반복적이고 동일한 그림을 부분 템플릿으로 만들 수 있다. 문법 {{>경로}}
header
<!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
<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>detail
{{>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}}list
{{>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}}save-form
{{>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}}update-form
{{>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}}
Share article
