網頁

2021/6/28

Spring Boot Thymeleaf Layout Dialect簡單範例

Spring Boot Thymeleaf使用Layout Dialect裝飾模板。


Thymeleaf模板排版(layout)有兩種方式:


下面介紹如何使用Thymeleaf Layout Dialect。

範例環境:

  • Java 8
  • Spring Boot 2.3.2.RELEASE
  • Thymeleaf 3
  • Thymeleaf Layout Dialect 2


事前要求

參考「Spring Boot Thymeleaf 簡單範例」搭建好Spring Boot Thymeleaf專案,下面以此進行修改。


Layout Dialect範例

pom.xml加入thymeleaf-layout-dialect依賴。

<dependency>
    <groupId>nz.net.ultraq.thymeleaf</groupId>
    <artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>

src/main/resources/templates新增layout.html內容如下,用來"裝飾"hello.html的模板。

layout.html<html>加入thyemleaf layout的xml命名空間xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"以便使用layout dialect的屬性。

<head>中加入了Bootstrap CDN的css。

<div>使用layout:fragment標示片段的名稱為content,此名稱對到hello.html中帶有layout:fragment="content"的標籤並把內容套進來。

layout.html

<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel='stylesheet' type="text/css"
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <title>Layout</title>
</head>
<body>
<header>
    <p>Hello Thymeleaf Layout Dialect</p>
</header>
<div layout:fragment="content">
</div>
</body>
</html>

修改hello.html如下。一樣在<html>加入layout dialect的xml命名空間,使用layout:decorate="~{layout.html}"標註使用的裝式模板為layout.html

<head>中加入/css/hello.css

在要套用裝飾模板的標籤加上layout:fragment屬性指定裝飾模板中同名的屬性,即對應到layout.html中帶有layout:fragment="content"的標籤。

hello.html

<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout.html}">
<head>
    <link rel='stylesheet' th:href="@{/css/hello.css}">
    <title>Hello Thymeleaf</title>
</head>
<body>
<div layout:fragment="content">
    <p th:text="'Hello, ' + ${name} + '!'"/>
</div>
</body>
</html>


測試

啟動專案並輸入http://localhost:8080/demo/hello導向hello.html結果顯示如下。可以看到<head>的內容除了hello.html原有的還加上(繼承)了layout.html的內容。hello.htmllayout:fragment="content"標籤內容則被放入了layout.htmllayout:fragment="content"標籤位置。

<html>
<head>
    <title>Hello Thymeleaf</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/demo/css/hello.css">
</head>
<body>
<header>
    <p>Hello Thymeleaf Layout Dialect</p>
</header>
<div>
    <p>Hello, World!</p>
</div>
</body>
</html>

參考github


沒有留言:

張貼留言