thymeleaf的th:replace,th:include,th:insert用法

最新推荐文章于 2024-04-25 23:13:41 发布

原创最新推荐文章于 2024-04-25 23:13:41 发布 · 1k 阅读

CC 4.0 BY-SA版权

本文探讨了Thymeleaf在网页开发中的应用，介绍了th:insert、th:replace和th:include指令的区别，以及如何通过th:replace引入公共文件如CSS、JS和设置页面标题。重点讲解了如何传递参数并动态更新页面元素。

ACE-Step

音乐合成

ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

<!--前面部分是公共文件所在路径及文件名，没有文件名后缀::后面是公共文件内th:fragment的值，冒号前后要有空格-->
<div th:insert="/test/common2 :: res_common"></div>

<div th:replace="/test/common2 :: res_common"></div>

<div th:include="/test/common2 :: res_common"></div>

th:insert会保留当前引入标签
th:replace会替换当前引入标签

common2.html文件

<div th:fragment="res_common">
    common2
</div>

文件目录

在这里插入图片描述
如果还渲染不出来看看aplication中自己对thymeleaf文件路径配置

th:replace引入公共js,css等部分

被引用的公共文件

<!--title:标题参数(形参)-->
<head th:fragment="res_common(title)">
    <meta charset="UTF-8">
    
    <title th:replace="${title}"></title>

    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <link type="text/css" rel="stylesheet" href="/css/layui.css">
    <link type="text/css" rel="stylesheet" href="/layui/css/layui.mobile.css">
    <script type="text/javascript" src="/layui/layui.all.js"></script>

</head>

引用文件:
头部部分：

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--将title传递给公共部分文件-->
<head th:replace="/common/common :: res_common(~{::title})">
    <title>测试</title>

</head>
<body>