理论

三种引入公共片段的th属性：

1. th:insert：将公共片段整个插入到声明引入的元素中；

2. th:replace：将声明引入的元素替换为公共片段；

3. th:include：将被引入的片段的内容包含进这个标签中；

演示及源码

第一个index界面：

第二个test1.html界面

第三个test2.html界面

程序项目结构如下：

源码如下：

MyMvcConfig.java

package thymleaftest.demo.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class MyMvcConfig {

    @Bean
    public WebMvcConfigurerAdapter webMvcConfigurerAdapter(){

        WebMvcConfigurerAdapter adapter = new WebMvcConfigurerAdapter() {
            @Override
            public void addViewControllers(ViewControllerRegistry registry) {

                registry.addViewController("/").setViewName("index");
                registry.addViewController("/index.html").setViewName("index");
                registry.addViewController("/test1.html").setViewName("test1");
                registry.addViewController("/test2.html").setViewName("test2");
            }
        };

        return adapter;
    }
}

topNav.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>顶部导航</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
</head>
<body>

<nav class = "ui inverted attached segment m-padded-tb-mini m-shadow-small" th:fragment="topbar" id="topID">
    <div class = "ui container">
        <div class = "ui inverted secondary stackable menu">
            <img class = "ui Mini circular image" src ="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552617187&di=0caccea665bc6e7fdfb863a99b22448c&imgtype=jpg&er=1&src=http%3A%2F%2Fwx4.sinaimg.cn%2Fthumb150%2F0073Cjx6gy1fw1upwz4dlj306o06oq38.jpg">
            <h2 class = "ui teal header item">My Web</h2>
            <a href="https://www.baidu.com" class="m-item item m-mobile-hide"><i class="mini computer icon"></i>点击访问我</a>
        </div>
    </div>
</nav>

</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index界面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
</head>
<body>

<div th:replace="~{commonality/topNav::topbar}"></div>


<h1>index界面</h1>

</body>
</html>

test1.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>test1界面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
</head>
<body>

<div th:replace="~{commonality/topNav::#topID}"></div>


<h1>test1界面</h1>


</body>
</html>

test2.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>test2界面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
</head>
<body>

<div th:insert="~{commonality/topNav::#topID}"></div>

<h1>test2界面</h1>

</body>
</html>

Spring Boot关于thymeleaf公共页面抽取

理论

演示及源码

猜你喜欢