💻 뚝딱뚝딱/(구) 북북클럽
[개발일지#020] 타임리프 템플릿 레이아웃 이용하여 페이지마다 title 변경되도록 수정
뚜루리
2024. 3. 5. 15:44
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