• java+thymeleaf-layout-dialect+thymeleaf的使用


    一,添加pom.xml文件依赖

           <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>
            <dependency>
                <groupId>nz.net.ultraq.thymeleaf</groupId>
                <artifactId>thymeleaf-layout-dialect</artifactId>
                <version>2.4.1</version>
            </dependency>

    二,如下两个文件代码

    index.html引用模板文件,PS:(layout:decorate="testlayout/layout",这个必须注意,模板文件的地址)

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org"
          xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
          layout:decorate="~{testlayout/layout}">
    <head lang="en">
        <title>Search</title>
    </head>
    <body>
    <div class="row" layout:fragment="content">
        <h4 class="indigo-text center">中间部分e</h4>
    
    </div>
    </body>
    </html>

    模板文件

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org"
          xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
      <title>Insert title here</title>
    
    </head>
    <body>
    <div>
      <div th:replace="/testlayout/test::nav"></div>
    </div>
    <section layout:fragment="content">
      <p>Page content goes here</p>
    </section>
    <div>
     尾部
    </div>
    </body>
    </html>

    test.html导航文件代码,PS:<div th:replace="/testlayout/test::nav"></div>注意这个地址,不能写错,我的文件都是在testlayout这个文件目录下的

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <body>
    <div th:fragment="nav">
      <nav>
        <ul class="columnbar">
          <li><a href="/#">首页</a></li>
          <li><a href="/#">首页</a></li>
          <li><a href="/#">首页</a></li>
          <li><a href="/#">首页</a></li>
          <li><a href="/#">首页</a></li>
        </ul>
      </nav>
    </div>
    </body>
    </html>
  • 相关阅读:
    nginx概念
    leetcode——109.有序链表转换二叉搜索树
    leetcode——95.不同的二叉搜索树II
    leetcode——106.从中序和后序遍历序列构造二叉树
    leetcode——117. 填充每个节点的下一个右侧节点指针 II
    leetcode——99.恢复二叉搜索树
    leetcode——103.二叉树的锯齿形层次遍历
    leetcode——107.二叉树的层次遍历II
    leetcode——79.单词搜索
    leetcode——37.解数独
  • 原文地址:https://www.cnblogs.com/May-day/p/12256573.html
Copyright © 2020-2023  润新知