• 如何在Thymeleaf 模板中使用片段Fragments

    1. 引言

    在本文中，我们将展示如何在Thymeleaf 模板中使用片段。表示可包含在其他模板中的模板片段的片段。它可以是页眉，菜单，页脚和文档的任何其他部分，通常在许多页面上重复。片段可以参数化并包含在特定的初始参数中。

    如果您需要有关如何在弹簧启动应用程序中安装和使用百里香的更多信息，请点击以下链接：使用百里香的弹簧启动。

    2. 包括模板片段

    为了定义新的百里叶碎片，我们使用属性。片段可以隔离在单独的文件中（我们建议使用此方法），也可以在任何其他模板中定义。th:fragment

    最简单的片段可以具有以下结构：

    复制 
    1. <footer th:fragment="footer">
    2.     <p>2019 FrontBackend.com</p>
    3. </footer>

    我们还可以在单个HTML文档中定义多个片段，也可以是格式正确的HTML文件：

    复制 
    1. <!DOCTYPE HTML>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8"/>
    5.     <title>Spring Boot Thymeleaf Application - Fragments</title>
    6. </head>
    7. <body>
    8.  
    9. <div th:fragment="header">
    10.     <h1>Thymeleaf Fragments</h1>
    11. </div>
    12.  
    13. <div th:fragment="menu">
    14.     <a href="#home" class="active">Home</a>
    15.     <a href="#blog">Blog</a>
    16.     <a href="#contact">Contact</a>
    17.     <a href="#about">About</a>
    18. </div>
    19.  
    20. <footer th:fragment="footer">
    21.     <p>2019 FrontBackend.com</p>
    22. </footer>
    23.  
    24. </body>
    25. </html>

    有三种方法可以包含片段中的内容：

    • 使用 th：insert 属性 - 在主机标记内插入指定的片段，
    • 使用 th：replace 属性 - 将整个主机标记替换为指定的片段，
    • 使用 th：include 属性 - 类似于 th：插入，但它只插入指定片段的内容（已弃用）。

    在以下示例中，我们包含使用三种方法的片段：footerparts

    复制 
    1. <body>
    2.  
    3.   <div th:insert="parts :: footer"></div>
    4.  
    5.   <div th:replace="parts :: footer"></div>
    6.  
    7.   <div th:include="parts :: footer"></div>
    8.  
    9. </body>

    结果页面将具有以下结构：

    复制 
    1. <body>
    2.  
    3.   <div>
    4.     <footer>
    5.       <p>2019 FrontBackend.com</p>
    6.     </footer>
    7.   </div>
    8.  
    9.   <footer>
    10.     <p>2019 FrontBackend.com</p>
    11.   </footer>
    12.  
    13.   <div>
    14.     <p>2019 FrontBackend.com</p>
    15.   </div>
    16.  
    17. </body>

    3. 片段选择器

    百里叶碎片可以使用简单的DOM选择器包含在另一个模板中。我们可以使用 HTML 元素的 id 或类名来获取它们。在下面的示例中，我们包含四个片段，其中一个使用 DIV 元素的类名：div.panel

    复制 
    1. <!DOCTYPE HTML>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8"/>
    5.     <title>Spring Boot Thymeleaf Application - Fragments Main</title>
    6. </head>
    7. <body>
    8.  
    9. <header th:insert="_parts :: header"> </header>
    10. <div th:replace="_parts :: menu"></div>
    11. <div th:replace="_parts :: div.panel"></div>
    12. <div th:replace="_parts :: footer"></div>
    13.  
    14. </body>
    15. </html>

    结果将具有以下结构：

    复制 
    1.  
    2. <!DOCTYPE HTML>
    3. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8"/>
    6.     <title>Spring Boot Thymeleaf Application - Fragments Main</title>
    7. </head>
    8. <body>
    9.  
    10. <header>
    11. <div>
    12.     <h1>Thymeleaf Fragments</h1>
    13. </div>
    14. </header>
    15. <div>
    16.     <a href="#home" class="active">Home</a>
    17.     <a href="#blog">Blog</a>
    18.     <a href="#contact">Contact</a>
    19.     <a href="#about">About</a>
    20. </div>
    21. <div class="panel">
    22.     This is a sample panel
    23. </div>
    24. <footer>
    25.     <p>2019 FrontBackend.com</p>
    26. </footer>
    27.  
    28. </body>
    29. </html>

    3. 参数化片段

    定义 与 的片段可以指定一组输入参数。要使用参数化片段，我们需要提供一个片段名称和声明的参数列表。th:fragment

    复制 
    1. <div th:fragment="fragmentName(parameter1, parameter2 ...)">
    2.     ...
    3. </div>

    在下面的示例中，我们定义了一个负责在 HTML 表中显示单个联系人行的片段。

    复制 
    1. <!DOCTYPE HTML>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8"/>
    5.     <title>Spring Boot Thymeleaf Application - Fragments Tables</title>
    6. </head>
    7. <body>
    8.  
    9. <table>
    10.     <tr th:fragment="contactRow(stat, row)">
    11.         <td th:text="${stat.count}">1</td>
    12.         <td th:text="${row.name}">Name</td>
    13.         <td th:text="${row.email}">Email</td>
    14.         <td th:text="${row.type.name() == 'INDIVIDUAL' ? 'Individual' : 'Group'}"></td>
    15.         <td>
    16.             <th:block th:if="${row.type.name() == 'GROUP'}">
    17.                 <p th:each="member : ${row.members}" th:text="${member.email}"></p>
    18.             </th:block>
    19.         </td>
    20.     </tr>
    21. </table>
    22.  
    23. </body>
    24. </html>

    我们使用属性在联系人列表中包含参数化片段：th:replacecontactRow(stat, row)

    复制 
    1. <!DOCTYPE HTML>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8"/>
    5.     <title>Spring Boot Thymeleaf Application - Fragments - Contacts</title>
    6. </head>
    7. <body>
    8.  
    9. <table cellspacing="1" cellpadding="1" border="1">
    10.     <thead>
    11.     <tr>
    12.         <th>No</th>
    13.         <th>Name</th>
    14.         <th>Email</th>
    15.         <th>Type</th>
    16.         <th>Members</th>
    17.     </tr>
    18.     </thead>
    19.     <tbody>
    20.     <tr th:each="contact, stat : ${contacts}">
    21.         <th:block th:replace="_tables :: contactRow(${stat}, ${contact})">row</th:block>
    22.     </tr>
    23.     </tbody>
    24. </table>
    25.  
    26. </body>
    27. </html>

    参数化片段为我们提供了很多可能性。它允许我们以许多不同的方式重用一个模板。我们还可以将常用的逻辑分离到一个片段中，并将其附加到许多模板中。

    4. 灵活的布局

    片段表达式不仅可以用于对象，数字，列表等参数，还可以提供标记片段。

    假设我们希望在标头部分中定义一组样式表和javascript，但也有可能使用其他资源扩展该列表。

    基本标头片段将具有以下结构：

    复制 
    1. <head th:fragment="baseHeader(title,links)">
    2.  
    3.   <title th:replace="${title}">Base Title | FrontBackend</title>
    4.  
    5.   <!-- Common styles and scripts -->
    6.   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
    7.   <link rel="shortcut icon" th:href="@{/images/favicon.ico}">
    8.   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js"></script>
    9.  
    10.   <!--/* This is a laceholder for additional links */-->
    11.   <th:block th:replace="${links}" />
    12.  
    13. </head>

    现在，如果我们想在标题中加入一些额外的链接，只需使用以下示例：baseHeader

    复制 
    1. <head th:replace="base :: baseHeader(~{::title},~{::link})">
    2.  
    3.   <title>The best tutorial ever | FrontBackend</title>
    4.  
    5.   <link rel="stylesheet" th:href="@{/css/awesome.min.css}">
    6.   <link rel="stylesheet" th:href="@{/jquery/jquery-ui.css}">
    7.  
    8. </head>

    ::title并指向当前模板中的标题和链接元素。结果头标记将如下所示：::link

    复制 
    1. <head>
    2.  
    3.   <title>The best tutorial ever | FrontBackend</title>
    4.  
    5.   <!-- Common styles and scripts -->
    6.   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
    7.   <link rel="shortcut icon" th:href="@{/images/favicon.ico}">
    8.   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js"></script>
    9.  
    10.   <link rel="stylesheet" th:href="@{/css/awesome.min.css}">
    11.   <link rel="stylesheet" th:href="@{/jquery/jquery-ui.css}">
    12.  
    13. </head>

    5. 结论

    在本文中，我们已经展示了百里叶中的模板布局机制是多么灵活。我们介绍了如何重用片段以及如何使用参数化模板。所有功能使片段成为模板管理的高级工具。

  • 相关阅读:
    适合个人请假的理由
    免登陆 同步脚本 zookeeper kafka集群详细安装步骤
    手把手教你安装python环境 Mac Windows
    测试用例的设计
    代数——第3章——向量空间
    项目（智慧教室）第一部分：cubemx配置，工程文件的移植，触摸屏的检测，项目bug说明
    2035. 将数组分成两个数组并最小化数组和的差 折半搜索
    LiveMedia视频监控汇聚管理平台视频接入方案（二）
    饿了么三面：让你怀疑人生的Spring Boot夺命连环40问
    Stream Collectors.groupingBy的四种用法 解决分组统计（计数、求和、平均数等）、范围统计、分组合并、分组结果自定义映射等问题
  • 原文地址：https://blog.csdn.net/allway2/article/details/127406201