layout-dialect
1. pom.xml 라이브러리 추가
pom.xml
<!-- https://mvnrepository.com/artifact/nz.net.ultraq.thymeleaf/thymeleaf-layout-dialect --> <dependency> <groupId>nz.net.ultraq.thymeleaf</groupId> <artifactId>thymeleaf-layout-dialect</artifactId> </dependency>
2. static하위에 css 추가
css
/* Created by Keith Donegan of Code-Sucks.com E-Mail: Keithdonegan@gmail.com You can do whatever you want with these layouts, but it would be greatly appreciated if you gave a link back to http://www.code-sucks.com */ * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; } #wrapper { margin: 0 auto; width: 922px; } #header { color: #333; width: 900px; float: left; padding: 10px; border: 1px solid #ccc; height: 100px; margin: 10px 0px 5px 0px; background: rgb(249, 245, 244); } #leftcolumn { color: #333; border: 1px solid #ccc; background: #f4feff; margin: 0px 5px 5px 0px; padding: 10px; height: 350px; width: 195px; float: left; } #rightcolumn { float: right; color: #333; border: 1px solid #ccc; background: #fffbf0; margin: 0px 0px 5px 0px; padding: 10px; height: 350px; width: 678px; display: inline; } #footer { width: 900px; clear: both; color: #333; border: 1px solid #ccc; background: #BD9C8C; margin: 0px 0px 10px 0px; padding: 10px; }
3. fragments 설정
1) 프로젝트 내 fragments 폴더 생성 후 header, aside, footer 이름으로 각각 html 파일을 만든다. (분리)
➡️ 각 html마다 화면에 보여줄 영역을 타임리프의 fragment 속성으로 fragment 이름을 지정해준다. 예시) <div th:fragment=”headerFragment”>(내용)</div>
2) 프로젝트 내 layout 폴더 생성 후 default 이름으로 html 파일을 만든다. (조립)
➡️ html 태그 안에 xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" 을 작성해준다.
➡️ 타임리프의 replace 속성을 사용해서 해당 div 영역을 ~{경로에 지정되어 있는 fragment 이름의 영역}으로 교체한다. 예시) <div th:replace=”~{fragments/header :: headerFragment}”></div>
➡️ layout:fragment 로 페이지마다 내용이 바뀌는 영역을 미리 정의할 수 있다. (콘텐츠 영역, 자바스트크립트 영역) 예시) <th:block layout:fragment=”customContents”></th:block>
3) 실제 보여지는 화면 html 파일
➡️ html 태그 안에
1) xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" 을 작성해준다.
2) 조립된 html을 가져온다. layout:decorate=”~{layout/default}”
➡️ 페이지의 화면에 보여줄 내용을 작성하고, default.html 에서 미리 정의한 layout:fragment 이름으로 감싸준다. <th:block layout:fragment="customContents">
(html, 자바스크립트)
</th:block>
header.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <div id="header" th:fragment="headerFragment"> 상단메뉴 <br> /fragments/header.html <br> <a th:href="@{#}">회원가입</a> <a th:href="@{#}">회원목록</a> <a th:href="@{#}">상품등록</a> <a th:href="@{#}">상품목록</a> </div> </html>
aside.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <div id="leftcolumn" th:fragment="asideFragment"> aside 메뉴 <br> /fragments/aside.html <br> </div> </html>
footer.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <div id="footer" th:fragment="footerFragment"> footer 메뉴 <br> /fragments/footer.html <br> 멋쟁이v의 개발일지 </div> </html>
default.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta charset="UTF-8"> <title th:text="${title}"></title> <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}"> </head> <body> <div id="wrapper"> <!-- header start --> <div th:replace="~{fragments/header :: headerFragment}"></div> <!-- header end --> <!-- aside start --> <div th:replace="~{fragments/aside :: asideFragment}"></div> <!-- aside end --> <!-- contents start --> <div id="rightcolumn" style="overflow: scroll"> <!-- 페이지 마다 내용이 바뀌는 공간을 미리 정의 --> <th:block layout:fragment="customContents"></th:block> </div> <!-- contents end --> <!-- footer start --> <div th:replace="~{fragments/footer :: footerFragment}"></div> <!-- footer end --> </div> <!-- 페이지마다 작성될 스크립트 공간 정의 --> <th:block layout:fragment="customJs"></th:block> </body> </html><!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <div id="footer" th:fragment="footerFragment"> footer 메뉴 <br> /fragments/footer.html <br> 멋쟁이v의 개발일지 </div> </html>
main.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/default}"> <!-- th:block부분이 defalut.html 에서 지정한 layout:fragment="customContents" 영역에 들어간다. --> <th:block layout:fragment="customContents"> <!-- 인라인스타일로 작성하는 방법 --> <h1>[[${contents}]]</h1> <!-- 태그의 속성으로 작성하는 방법 --> <h1 th:text="${contents}"></h1> </th:block> </html>
tag : #Spring #layout #fragment #replace #decorate
Uploaded by N2T
