目录
理论
三种引入公共片段的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>