저는 헤더와 푸터를 하나의 html에 넣고 불러올페이지에선 하나의 html만 불러오도록 사용했습니다.
- headerFooter.html을 만듭니다.
- 아래 코드를 DOCTYPE 밑에 넣습니다.
<html xmlns:th="http://www.thymeleaf.org">3. <head>안에 아래의 코드를 넣습니다. 폰트나 CSS파일 링크태그는 헤드안의 이 블록안에 넣어주세요.
configFragment라는것은 그냥 지칭하는 이름이니 자율적으로 수정해주시면 됩니다.
th:fragment="" 이 따옴표안에 자율적으로 그 블록의 이름을 붙이시면 됩니다.
<th:block th:fragment="configFragment">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
<!-- Vendor CSS Files -->
<link th:href="@{/vendor/aos/aos.css}" rel="stylesheet">
</th:block>4. <body>안에는 이제 페이지의 헤드부분에 올 header영역의 태그를 넣습니다.
아래처럼 차곡차곡 탑바, 메인헤더, 푸터 그리고 스크립트 링크를 이렇게 넣어주시면 headerFoother.html을 불러올때 모두 적용됩니다.
<section th:fragment="top-bar" id="topbar">
페이지 맨 윗부분(로그인 회원가입 표시되는 부분 영역)
</section>
<header th:fragment="main-header" id="header">
nav 영역에 올 태그를 넣습니다.
</header>
<footer th:fragment="footer" id="footer">
</footer>
<th:block th:fragment="script">
<script th:src="@{/vendor/aos/aos.js}"></script>
<script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
</th:block>5. 이제 mypage.html라는 곳에서 headerFooter.html을 불러올거에요. 일단 DOCTYPE 아래 이렇게 넣어줍니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">6. 그리고 <head>안에 아래처럼 불러와줍니다.
<th:block th:replace="headerFooter.html :: configFragment"></th:block>7. <body>의 첫줄에서 아래처럼 넣어줍니다.
<div th:replace="headerFooter.html :: top-bar"></div>
<div th:replace="headerFooter.html :: main-header"></div>8. 그리고 <body>안에 원래 작성하려던 페이지를 작성하신후, 바디 맨 끝부분에 (</body>태그 닫기 전)
<div th:replace="headerFooter.html :: footer"></div>
<th:block th:replace="headerFooter.html :: script"></th:block>요렇게 넣어주시면 됩니다!
728x90