Template include를 사용하면 동일한 HTML 코드나 Template 코드를 여러 파일에 반복적으로 작성할 필요 없이, 한 번 작성한 코드를 재사용할 수 있습니다1.부분 템플릿 만들기
templates 디렉토리에 layout디렉토리를 만들고 footer.mustache와 header.mustache를 만듭니다.
2. header와 footer 분리하기
2-1.header
header에는 head태그도 포함했기 때문에 css가 연결돼 있다.
<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>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/board">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="/board/save-form">글쓰기</a>
</li>
</ul>
</div>
</div>
</nav>2-2. footer
<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>
</html>3. include 해주기
{{>layout/header}} 이 코드로 header을 include 해주고
{{>layout/footer}} 이 코드로 footer을 include 해줍니다.3-1. list.mustache
<!DOCTYPE html>
<html lang="en">
{{>layout/header}}
<div class="container p-5">
<div class="card mb-3">
<div class="card-body">
<h4 class="card-title mb-3">제목1</h4>
<a href="detail.mustache" class="btn btn-primary">상세보기</a>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h4 class="card-title mb-3">제목2</h4>
<a href="detail.mustache" class="btn btn-primary">상세보기</a>
</div>
</div>
</div>
{{>layout/footer}}
</htmL>3-2. detail.mustache
<!DOCTYPE html>
<html lang="en">
{{>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}}
</htmL>3-3. save-form.mustache
<!DOCTYPE html>
<html lang="en">
{{>layout/header}}
<div class="container p-5">
<!-- 요청을 하면 localhost:8080/board/save POST로 요청됨
title=사용자입력값&content=사용자값 -->
<div class="card">
<div class="card-header"><b>글쓰기 화면입니다</b></div>
<div class="card-body">
<form>
<div class="mb-3">
<input type="text" class="form-control" placeholder="Enter title" name="title">
</div>
<div class="mb-3">
<textarea class="form-control" rows="5" name="content"></textarea>
</div>
<button class="btn btn-primary form-control">글쓰기완료</button>
</form>
</div>
</div>
</div>
{{>layout/footer}}
</htmL>3-4. update-form.mustache
<!DOCTYPE html>
<html lang="en">
{{>layout/header}}
<div class="container p-5">
<div class="card">
<div class="card-header"><b>글수정하기 화면입니다</b></div>
<div class="card-body">
<form>
<div class="mb-3">
<input type="text" class="form-control" placeholder="Enter title" name="title" value="제목1">
</div>
<div class="mb-3">
<textarea class="form-control" rows="5" name="content">내용1</textarea>
</div>
<button class="btn btn-primary form-control">글수정하기완료</button>
</form>
</div>
</div>
</div>
{{>layout/footer}}
</htmL>Share article
