Springboot + Thymeleaf + Layout Dialect를 사용하여 화면 레이아웃을 공통화
Layout Dialect에서 레이아웃을 공통화해 봅니다.
#thymeleaf3가 되어 바뀌고 있는 것 같아서 재작성했습니다.
공통 레이아웃은 페이지 전체의 크기, 헤더, 바닥글 및 콘텐츠 부분의 너비와 높이를 공통화하여 콘텐츠 부분만 고유 페이지에 정의합니다. 아래 그림과 같은 느낌을 이미지하고 있습니다.
1. 개발 환경
2. 구성
├─java
│ └─com
│ └─sample
│ HeloController.java
│ SampleLayoutApplication.java
│ ServletInitializer.java
└─resources
│ application.properties
├─static
└─templates
│ index.html
└─commons
layout.html
공통화 된 화면 레이아웃 : commos/layout.html
고유 화면 : index.html
3. 의존성
build.gradle
dependencies {
compile('org.springframework.boot:spring-boot-starter-thymeleaf')
compile('org.springframework.boot:spring-boot-starter-web')
runtime('org.springframework.boot:spring-boot-devtools')
compileOnly('org.projectlombok:lombok')
compile "org.thymeleaf:thymeleaf:3.0.9.RELEASE"
compile "org.thymeleaf:thymeleaf-spring4:3.0.9.RELEASE"
compile('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:2.3.0')
compile('org.webjars:jquery:3.3.1')
compile('org.webjars:jquery-ui:1.12.1')
compile('org.webjars:bootstrap:3.3.7')
providedRuntime('org.springframework.boot:spring-boot-starter-tomcat')
testCompile('org.springframework.boot:spring-boot-starter-test')
}
포인트
compile "org.thymeleaf:thymeleaf:3.0.9.RELEASE"
compile "org.thymeleaf:thymeleaf-spring4:3.0.9.RELEASE"
compile('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:2.3.0')
4.공통 레이아웃(commons/layout)
layout.html
<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Spring Boot Sample Site</title>
<meta name="description" content="common-meta">
<link th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet" />
<link th:href="@{/webjars/jquery-ui/1.12.1/jquery-ui.min.css}" rel="stylesheet" />
<script th:src="@{/webjars/jquery/3.3.1/jquery.min.js}"></script>
<script th:src="@{/webjars/jquery-ui/1.12.1/jquery-ui.min.js}"></script>
<script th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
</head>
<body>
<div class="col-lg-6">
<div class="bg-primary">
<form th:action="@{/}" method="post">
<h2 layout:fragment="header"></h2>
<button>ログアウト</button>
</form>
</div>
<div layout:fragment="contents"></div>
<footer style="text-align:right;">共通フッタ</footer>
</div>
</body>
</html>
포인트
고유 페이지에서는, 헤더의 타이틀과, 개별의 폼을 각각, 「header」, 「contents」로 지정하는 것만으로 모든 폼의 레이아웃의 이미지가 같게 되도록 합니다. 또, 공통으로 이용하는 css나 javascript는, layout에 써 두면, 고유 페이지에 쓰지 않아도 됩니다.
5. 고유 페이지
index.html
<!DOCTYPE html>
<html
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{commons/layout}">
<head>
<title>個別ページタイトル</title>
<meta name="description" content="個別metaタグ">
</head>
<body>
<div layout:fragment="header">タイトルは個別に設定します。</div>
<div layout:fragment="contents">
<P>ここから下が、個別のページです</P>
<div id="hello-text"></div>
<!-- 個別ページでjquery-uiが正しくうごくか検証します -->
<input type="text" class="datepicker"/>
<script>
$(function() {
$('#hello-text').text('Hello SpringBoot from JQuery!!');
$('.datepicker').datepicker();
});
</script>
</div>
</body>
</html>
Thymeleaf3에서는 html 태그에 "layout:decorate="~{commons/layout}"라고 가정합니다.
※ Thymeleaf2일 때는 "layout:decorator="common/layout""로 했습니다.
6. 실행하여 만든 페이지
Reference
이 문제에 관하여(Springboot + Thymeleaf + Layout Dialect를 사용하여 화면 레이아웃을 공통화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/t-iguchi/items/7d52141fd0ddda0657e6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
