본문 바로가기
💻 뚝딱뚝딱/북북클럽

[개발일지#020] 타임리프 템플릿 레이아웃 이용하여 페이지마다 title 변경되도록 수정

by 뚜루리 2024. 3. 5.
728x90
320x100
[참고]
김영한님 스프링 강의를 바탕으로 진행되는 토이프로젝트의 과정을 기록하는 글입니다. 
둥근 피드백은 언제나 환영입니다.

 

[오늘의 개발내용]
1. 이전에 타임리프 템플릿 레이아웃을 적용했는데 페이지마다 title을 가져오게끔은 해놓지 않아서 그부분 수정예정

 

Config.html

Config.html 은 공통 style, js등을 넣어두려고 만든 곳인데 원래 <head> 전체를 replace 하는 것이 아니라 <th:block> 안에 해당 내용을 적고 title을 뺀상태로 변경해줌.

 

layout.html

<!DOCTYPE html>
<html lagn="ko"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<html th:fragment="layout">

<head>
    <!--공통 JS / CSS 영역을 관리하는 환경 영역-->
    <th:block th:replace="common/config::config"></th:block>
</head>
<body>
    <!-- content -->
    <th:block layout:fragment="content"></th:block>

    <!-- footer -->
    <footer th:replace="common/footer::footer"></footer>
</body>
</html>

layout.html 의 <head> 안에 아까 수정한 config를 replace해주는 방식으로 수정. 

 

 

allTimeline.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{common/layout}"
      layout:fragment="content">
    <head>
        <title>timeline</title>
    </head>

템플릿 레이아웃이 적용될 일반 화면에서는 title에 원하는 타이틀명을 넣어줌. 

 

[구현화면]

각 페이지마다 지정한 title명이 입력됨!

 

 

728x90
320x100