[블로그 만들기] 3. Template Include 설정

부분 템플릿 <header> <footer> 만들기

mmmmmm02

Aug 21, 2024

Contents

3. Template Include 설정

💡

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

3-1. 부분템플릿 만들기

board 안의 파일들이 H 와 f 로 표기한 부분의 코드가 반복되기 때문에

layout 으로 header와 footer 를 빼서 핵심적인 부분에 집중 할 수 있게 할 수 있다.

templates 폴더 안에 layout 폴더를 만들고, 그 안에 header 와 footer mustache 파일을 만든다.

파일들에 반복되는 코드를 템플릿으로 빼서 사용하기

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>

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>

전체 mustache 파일의 반복되는 부분은 {{>layout/header}} 와 {{>layout/footer}} 로 수정하여, 바뀌는 코드에만 집중 할 수 있게 한다.


{{>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}}

See more posts

[블로그 만들기] 3. Template Include 설정

3. Template Include 설정

3-1. 부분템플릿 만들기

header.mustache 파일

footer.mustache 파일

More articles

[블로그 만들기] 5. 글쓰기 기능 만들기 (1)

[블로그 만들기] 4. 테이블 생성

[블로그 만들기] 2. View 연결

[블로그 만들기] 1. 프로젝트 세팅