아래 두 코드 처럼 layout:fragment의 이름이 같을 경우
- 각 html에 중복된 코드가 있을 경우 템플릿을 사용한다.
- 해당 템플릿을 사용하기 위해
<html layout:decorate="~{layout}">코드를 통해 연결시킨다. <html layout:decorate="~{layout}">에 의해layout.html파일이 실행될 때,
<th:block layout:fragment="content"></th:block>는 그 때 당시의 실행되고 있는 파일에 해당하는content로 인식한다.
ex)
Controller에서return "question_detail";을 할 경우question_detail.html이 실행된다.
이 경우layout.html에서는quetion_detail.html의content를 실행한다.
[question_detail.html]
<html layout:decorate="~{layout}">
<head></head>
<body>
<div layout:fragment="content" class="container my-3">
<!-- 질문 -->
<h2 class="border-bottom py-2" th:text="${question.subject}"></h2>
<div class="card my-3">
<div class="card-body">
<div class="card-text" style="white-space: pre-line;" th:text="${question.content}"></div>
<div class="d-flex justify-content-end">
<div class="badge bg-light text-dark p-2 text-start">
<div th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></div>
</div>
</div>
</div>
</div>
(... 생략)<question_list.html>
<html layout:decorate="~{layout}">
<head></head>
<body>
<div layout:fragment="content" class="container my-3">
<table class="table">
<thead class="table-dark">
<tr>
<th>번호</th>
<th>제목</th>
<th>작성일시</th>
</tr>
</thead>
<tbody>
<tr th:each="q, loop : ${questionList}">
<td>
<a th:text="${loop.count}" th:href="@{|/question/detail/${q.id}|}"></a>
</td>
<td>
<a th:text="${q.subject}" th:href="@{|/question/detail/${q.id}|}"></a>
</td>
<td th:text="${#temporals.format(q.createDate, 'yy-MM-dd HH:mm')}"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
초심 잃지 않기