thymeleaf-layout-dialect가 제공하는 Custom layout을 사용하여 custom한 layout html을 만들었다.
custom-layout을 사용하면 다른 페이지가 가지고 있어야 할 Header, Navigaion bar, footer, css, script 등을 포함하고 있는 공통의 layout html 페이지를 만들 수 있다.
기존에는 fragment만을 사용하여 페이지를 구성하였다. 이럴 경우엔 새 페이지를 만들때마다 필요한 fragment를 매번 추가해줘야 하지만 layout을 사용함으로써 내가 원하는 Header, css, script, content등을 추가만 해주면 된다.
아래는 내가 생성한 layout.html 파일이다.
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:replace="fragments/header::header"></head>
<body>
<nav th:replace="fragments/nav::nav"></nav>
<div layout:fragment="content"></div>
<footer th:replace="fragments/footer::footer"></footer>
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" crossorigin="anonymous"></script>
<script th:src="@{/webjars/jquery/3.6.0/jquery.js}"></script>
<!-- Core theme CSS (includes Bootstrap)-->
<script th:src="@{/js/scripts.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
<th:block layout:fragment="script"></th:block>
</body>
</html>