springboot学习之十六(thymeleaf模板引擎公共代码片段)

 

 

集成

<!--thymeleaf模板-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <!--security安全配置-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>
        <!--对Thymeleaf添加Spring Security标签支持-->
        <dependency>
            <groupId>org.thymeleaf.extras</groupId>
            <artifactId>thymeleaf-extras-springsecurity5</artifactId>
        </dependency>

配置

  # thymeleaf后缀
  thymeleaf:
    prefix: classpath:/templates
    # 模板格式
    mode: HTML5
    encoding: UTF-8
    content-type: text/html
    suffix: .html
    # 开发时关闭缓存,不然没法看到实时页面
    cache: false

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

使用id

 

 

  javascript 和thymeleaf内联语法

 

 

 -----

自己的例子

common.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>common</title>
</head>
<body>

<div th:fragment="fragment-name" id="fragment-id">
    <span>公共页面片段</span>
</div>

<div  th:fragment="header(title)">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title th:text="${title}"></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <style>
        body{
            background: rgba(255, 0, 0, 0.2);
        }
    </style>
</div>

<div  th:fragment="footer_script">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"crossorigin="anonymous"></script>
</div>

</body>

</html>

使用

<!DOCTYPE html>
<html  lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <th:block th:include="/comm/common :: header('登录页面')" />
</head>
...
<th:block th:include="/comm/common :: footer_script" />

 

 

 

转 ： https://www.cnblogs.com/wangfx/p/16799157.html

 http://c.biancheng.net/spring_boot/thymeleaf.html

posted @ 2023-07-25 15:59  与f  阅读(46)  评论(0)  编辑  收藏  举报