[따라하기] 1-3. Template Include setting

허성재

Aug 23, 2024

💡

반복적이고 동일한 그림을 부분 템플릿으로 만들수 있다 문법{{>경로}}

위에 콜아웃을 써봤다. 뭔가 핵심을 찝어주는거 같다.

모든 창에서 위의 헤더(Header)와 푸터(Footer)는 동일하다.

그럼 이걸 통일 시키면 관리하기 더 편하다. 그건 알고 있지만 콧수염(mustache)에서 이걸 어떻게 하는지를 배워봤다.

layout/header.mustache


<!DOCTYPE html>
<html lang="en">

<head>
    <title>Blog</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>

<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="list.html">Metacoding</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/save-form.html">글쓰기</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

detail.mustache


{{>layout/header}}

<div class="container p-5">

    <!-- 수정삭제버튼 -->
    <div class="d-flex justify-content-end">
        <a href="/update-form.html" class="btn btn-warning me-1">수정</a>
        <form>
            <button class="btn btn-danger">삭제</button>
        </form>
    </div>

    <div class="d-flex justify-content-end">
        <b>작성자</b> : 익명
    </div>

    <!-- 게시글내용 -->
    <div>
        <h2><b>제목1</b></h2>
        <hr />
        <div class="m-4 p-2">
            내용1
        </div>
    </div>
</div>

{{>layout/footer}}

layout/footer.mustache


<footer class="bg-light p-5 text-center">
    <h4>Created by Metacoding</h4>
    <h5>☎ 010-2222-7777</h5>
    <button class="btn btn-outline-primary">고객센터</button>
    <button class="btn btn-outline-primary">오시는길</button>
</footer>
</body>

</html>

결론으로 말하자면 머리 가슴 배로 3등분 해준거다. 재활용 할 애들을 layout의 폴더안에 머리인 header와 footer를 짤라 넣어주고, 본체인 곳 위와 아래에


{{>layout/header}}
~~~~~~~~~~~~~~~~~~~~~~
{{>layout/footer}}

하면 쉽게 할수 있다. 옛날에 include써가면 했었는데 이게 더 편한거 같다. 나머지들도 전부 같은 형태로 바꾸어 주었다.