ThymeleafFragment

springboot Thymeleaf Fragment 수업 정리

Ex19ThymeleafFragment

프로젝트 생성시 추가 → 홈페이지
패키지 생성시 겹치는 경우 고치는 법
폴더>파일 생성하기

head.html 작성 → css나 js 파일을 포함시키기

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<th:block th:fragment="headFragment">
  <meta charset="UTF-8">
  <title>head.html의 타이틀</title>

  <link rel="stylesheet" href="/css/myglobal.css">
  <script src="/js/myglobal.js"></script>

  <link rel="stylesheet" href="/css/header.css">
  <link rel="stylesheet" href="/css/footer.css">

</th:block>
</html>

header 작성 (footer도 비슷하게 작성)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <header th:fragment="headerFragment">
    <header id="header">헤더 입니다.</header>
  </header>
</html>

first 작성 → head와 header,footer를 받아옴

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>first.html의 타이틀</title>
    <!-- 자체 타이틀이 있으면, head.html의 타이틀은 무시됨. -->

    <th:block th:replace="fragments/head :: headFragment"></th:block>
  </head>
  <body>
    <header th:replace="fragments/header :: headerFragment"></header>

    <p>first.html의 자체 콘텐츠</p>

    <footer th:replace="fragments/footer :: footerFragment"></footer>
  </body>
</html>

결과

ThymeleafFragment

주이야기

Error

Templates (for web app):

Error