Spring Boot：使用Thymeleaf布局方言的Thymeleaf模板装饰器

最新推荐文章于 2024-08-15 14:47:41 发布

dnc8371

最新推荐文章于 2024-08-15 14:47:41 发布

阅读量660

点赞数

文章标签： java html python vue javascript ViewUI

介绍

在所有Thymeleaf模板上重用页眉和页脚的问题经常在StackOverflow上提出。在本文中，我将向您展示如何使用Thymeleaf布局方言来结构化模板，以在Spring Boot应用程序中实现更高的代码可重用性。

创建一个Spring Boot应用程序

让我们使用Spring Initializer创建一个具有所需依赖项的空项目。我为空项目选择了以下内容：

在最喜欢的IDE中加载项目后，只需将thymeleaf和thymeleaf-layout-dialect版本更新为项目pom.xml中的“”即可：

<thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version>
<thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>

注意：我在这个示例中使用了Spring Boot 1.5.8.RELEASE。一旦发布了稳定的2.0版本，我将相应地更新文章。

定义基本模板

如果使用的是Spring Boot，则无需为使用Thymeleaf和Thymeleaf布局方言进行任何配置。自动配置支持将配置使用Thymeleaf模板所需的所有bean。

让我们在src\main\resources\templates位置创建base.html ：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:th="http://www.thymeleaf.org"	
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
  <head>

    <title layout:title-pattern="$CONTENT_TITLE - $LAYOUT_TITLE">Base</title>
    <meta name="description" content=""/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" type="text/css" 
      href="https://bootswatch.com/4/cerulean/bootstrap.min.css" />
  </head>
  <body>

    <nav class="navbar navbar-light bg-light">
      <span class="navbar-brand mb-0 h1">Decorator Sample</span>
    </nav>

    <div class="container">
      <nav aria-label="breadcrumb" role="navigation">
        <ol class="breadcrumb">
          <th:block layout:fragment="breadcrumb">
          </th:block>
        </ol>
      </nav>
      <div class="content">
        <div layout:fragment="page_content"></div>
      </div>
    </div>
    <!-- /.container -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
    <th:block layout:fragment="scripts">
    </th:block>
  </body>

</html>

在上面的base.html您可以看到三个占位符：
- 面包屑
–内容 –内容所需的Javascript

其余Thymeleaf模板使用base.html装饰，并仅在以下三个部分中提供了三个占位符所需的数据。页面的标题定义为layout:title-pattern="$CONTENT_TITLE - $LAYOUT_TITLE" ，这意味着，如果任何模板声明了My Page标记，则页面标题将变为Base - My Page 。

面包屑的内容

希望使用base.html装饰自己的任何页面都应在其HTML中声明，如下所示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
  xmlns:th="http://www.thymeleaf.org" 
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" 
  layout:decorate="~{base}">
</html>

layout:decorate属性采用基本模板相对于模板根文件夹的位置。在我们的例子中，模板的根文件夹是src/main/resources/templates 。

通过在“：”之间的任意位置编写以下HTML，我们可以提供breadcrumb的内容。

<th:block layout:fragment="breadcrumb">
  <li class="breadcrumb-item">Page 1</li>
</th:block>

理想情况下，遵循在基本模板中定义layout:fragment的顺序将有助于保持页面之间内容顺序的一致性。 Thymeleaf及其布局方言生成的最终HTML是：

<nav aria-label="breadcrumb" role="navigation">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">Page 1</li>
  </ol>
</nav>

在相似的行上， page_content的内容将是：

<div layout:fragment="page_content" id="page_content">
  <h3>Page 1</h3>

  <div class="alert alert-info" style="display: none;" 
    id="js-content">
  </div>
  <a th:href="@{/page2}">Go to page 2</a>
</div>

使用<th></th>将不需要使用虚拟标记来包装内容。如果需要将内容包装在特定元素中，例如上面的<div> ，则必须用特定元素替换<th></th> 。

填充

很少有人会质疑scripts占位符scripts的必要性。这使我们可以将与页面相关的javascript放在一个地方，而不污染基本模板中的所有javascript。

<th:block layout:fragment="scripts">
<script type="text/javascript">
$(function(){
  $("#js-content").html("From Javascript").slideToggle();
});
</script>
</th:block>

您甚至可以创建一个专用的.js文件，并将其链接到scripts部分：

<th:block layout:fragment="scripts">
<script type="text/javascript"
  src="@{/path/to/js/file}">
</script>
</th:block>

结论

在本文中，我们看到了如何使用Thymeleaf Layout Dialect用通用的基础模板来装饰模板。当相关库位于其类路径上时，我们无需进行任何配置，因为Spring Boot通过自动配置来进行配置，在这种情况下，这是启动程序pom spring-boot-starter-thymeleaf带来的依赖关系

可以在这里找到可用的Spring Boot示例。

翻译自: https://www.javacodegeeks.com/2017/11/spring-boot-thymeleaf-template-decorator-using-thymeleaf-layout-dialect.html

dnc8371

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Spring Boot：使用Thymeleaf布局方言的Thymeleaf模板装饰器

介绍在所有Thymeleaf模板上重用页眉和页脚的问题经常在StackOverflow上提出。在本文中，我将向您展示如何使用Thymeleaf布局方言来结构化模板，以在Spring Boot应用程序中实现更高的代码可重用性。创建一个Spring Boot应用程序让我们使用Spring Initializer创建一个具有所需依赖项的空项目。我为空项目选择了以下内容：在...
复制链接

扫一扫