thymeleaf-layout-dialect를 이용한 Custom-Layout

손창현·2022년 6월 6일
0

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>
profile
백엔드개발자 손창현입니다.

0개의 댓글