[22/02/18] 타임리프 레이아웃 나누기

bulid.gradle에 추가

implementation group: 'com.github.zhanhb', name: 'thymeleaf-layout-dialect', version: '2.4.1'

layout>fragments(나눌 레이아웃)
나는 head, 공통 스크립트와 navbar만 가져와서 쓸 거기 때문에, 연습용으로 일단 다 만들어 놓고 navbar 타임리프 레이아웃을 페이지에 가져와서 붙이는 식으로 해 보았다.

navbar.html

<!DOCTYPE html>
<html lang="en" itemscope itemtype="http://schema.org/WebPage">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="navbarFragment">

<!-- 로그인 모달 -->
<div id="myModal" class="modal fade">

th:fragment="navbarFragment"
fragment명을 지정해야한다.
th:block에 지정한만큼 가져가서 쓸 수 있다.

layout.html

<!DOCTYPE html>
<html lagn="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<html lang="en" itemscope itemtype="http://schema.org/WebPage">

<!-- 공통 헤더-->
<th:block th:replace="/layout/fragments/head :: headFragment"></th:block>

<body class="index-page bg-gray-200">
<div id="wrapper">
    <th:block th:replace="/layout/fragments/navbar :: navbarFragment"></th:block>

    <div id="content-wrapper" class="d-flex flex-column">
        <div id="content">
            <!-- 본문-->
            <th:block layout:fragment="content"></th:block>
        </div>
        <!-- 공통 하단-->
        <th:block th:replace="/layout/fragments/footer :: footerFragment"></th:block>
    </div>
</div>

<!-- 공통 스크립트-->
<th:block th:replace="/layout/fragments/script :: scriptFragment"></th:block>
</body>
</html>
</html>

가져다 붙일때는 여기서 떼어가면 된다.
예시> login.html

<!DOCTYPE html>
<html lagn="en"
      xmlns:th="http://www.thymeleaf.org">
<html lang="en" itemscope itemtype="http://schema.org/WebPage">

<!-- 공통 헤더-->
<th:block th:replace="/layout/fragments/head :: headFragment"></th:block>

<body class="sign-in-basic">
<div id="wrapper">
    <th:block th:replace="/layout/fragments/navbar :: navbarFragment"></th:block>

이렇게 써도 되나 싶지만 일단 적용해서 프론트를 꾸며보기로!

참고 : https://dbsyys.tistory.com/13

vue에서 Dashboard를 누르면 다른 내용이 같은 표로 이동하는 실례
[문제풀기] PART 1. 튼튼한 기본기(1~5번)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage