两种 thymeleaf - layout

最新推荐文章于 2024-07-25 11:52:08 发布

空心重阳

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量233

点赞数

分类专栏： Thymeleaf 文章标签： html java

本文链接：https://blog.csdn.net/m0_46626943/article/details/107552260

版权

Thymeleaf 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

th:fragment

公共head

layout/layout.html

<head th:fragment="layout_head(title, links)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title th:replace="${title}">标题</title>
    <link rel="stylesheet" href="xxx.css">
    <th:block th:replace="${links}"/>
</head>
<body class="layout-body" th:fragment="layout_body(tags)">
    <header>头部</header>
    <th:block th:replace="${tags}"/>
    <footer>尾部</footer>
</body>

index.html
不引入css

<head th:replace="layout/layout:: layout_head(~{::title}, ~{})">
    <title>控制台</title>
</head>

引入css

<head th:replace="layout/layout :: layout_head(~{::title}, ~{::link})">
    <title>控制台</title>
    <link rel="stylesheet" href="1.css">
    <link rel="stylesheet" href="2.css">
</head>

<body th:replace="layout/layout :: layout_body(~{::#layout_main})">
    <div id="layout_main">内容</div>
</body>

公共标签

layout/layout.html

<!-- 第一种 声明ID -->
<div id="idName">内容</div>
<!-- 第二种 th:fragment -->
<div th:fragment="name">内容</div>

index.html

<div th:replace="layout/layout :: #idName"></div>
<div th:replace="layout/layout :: name"></div>

th:include(template :: selector)：加载模板内容（不保留模板节点）
th:replace(template :: selector)：加载模板标签，替换掉当前标签
th:insert(template :: selector)：加载模板标签到当前标签内容下

layout:fragment

layout/layout.html

<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="xxx.css">
</head>
<body class="layout-body">
    <header>头部</header>
    <main layout:fragment="content"></main>
    <footer>尾部</footer>
</body>
</html>

index.html

<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" layout:decorator="layout/layout">
<head>
    <title>index</title>
    <link rel="stylesheet" href="xxx2.css">
</head>
<body>
    <div layout:fragment="content">
        <h1>Hello World!!!</h1>
    </div>
</body>
</html>