Java Spring thymeleaf 页眉和页脚动态包括
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36663038/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Spring thymeleaf header and footer dynamic includes
提问by VK321
I recently started working with thymeleaf template engine in spring. What I want to achieve is - If my controller is this
我最近在春季开始使用 thymeleaf 模板引擎。我想要实现的是 - 如果我的控制器是这个
@RequestMapping(value="/", method=RequestMethod.GET)
public String index() {
return "homePage";
}
Then I want write HTML code in homePage.html without complete HTML definition like head, title, body etc.
然后我想在 homePage.html 中编写 HTML 代码，而不需要完整的 HTML 定义，如头部、标题、正文等。
<div>This is home page content</div>
Dont want to write in homePage.html like this.
不想在 homePage.html 中这样写。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
<title>Spring MVC Example</title>
</head>
<body>
<div th:include="fragments/header::head"></div>
<div>This is home page content</div>
<div th:include="fragments/footer::foot"></div>
</body>
I prefer to take head part for header fragment, content from controller and footer from footer fragment.
我更喜欢为页眉片段、来自控制器的内容和页脚片段的页脚取头部。
So in total - How I can achieve this:
所以总的来说 - 我如何实现这一目标：
/fragment/header.html
/fragment/header.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
<title>Spring MVC Example</title>
</head>
<body>
/home.html
/home.html
<div>This is home page content</div>
(this throw error)
（这个抛出错误）
/fragment/footer.html
/fragment/footer.html
</body>
</html>
Note: I already seen these examples
注意：我已经看过这些例子
回答by Joostje123
I solved this like this:
我是这样解决的：
Controller directs to index.html and gives the attribute of the "content page"
控制器指向 index.html 并给出“内容页”的属性
@RequestMapping(value={"/"})
public String root(Locale locale, ModelMap model) {
model.addAttribute("content", "helloWorldView");
return "index";
}
This is my index.html:
这是我的 index.html：
<!DOCTYPE html>
<html lang="en">
<head lang="en" th:replace="fragments/header :: header"> </head>
<body>
<div class="container">
<div th:replace="@{'views/' + ${content}} :: ${content}"></div>
</div>
<div lang="en" th:replace="fragments/footer :: footer"> </div>
</body>
</html>
So i have a folder fragments with header and footer:
所以我有一个带有页眉和页脚的文件夹片段：
fragments/header.html
片段/header.html
<head th:fragment="header">
//css includes etc title
</head>
fragments/footer.html
片段/页脚.html
<div th:fragment="footer">
//scripts includes
</div>
And in my folder views i got all the views with content views/helloWorldView.html:
在我的文件夹视图中，我获得了所有带有内容 views/helloWorldView.html 的视图：
<div th:fragment="helloWorldView">
//Content
</div>
回答by VK321
This is how I achieved it.
这就是我实现它的方式。
Step 1:Create default layout file
第 1 步：创建默认布局文件
resources/templates/layouts/default.html
资源/模板/布局/default.html
<!DOCTYPE html>
<html>
<head th:replace="fragments/header :: head"></head>
<body>
<div class="container">
<div layout:fragment="content"></div>
<div th:replace="fragments/footer :: footer"></div>
</div>
</body>
</html>
Step 2:Create your header and footer fragments.
第 2 步：创建页眉和页脚片段。
/resources/templates/fragments/header.html
/resources/templates/fragments/header.html
<head th:fragment="head">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta content="ie=edge" http-equiv="x-ua-compatible" />
<title th:text="${metaTitle} ? ${metaTitle} : 'default title'"></title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
<link rel="stylesheet" href="/css/style.css"/>
</head>
/resources/templates/fragments/footer.html
/resources/templates/fragments/footer.html
<div class="footer text-center" th:fragment="footer">
<p> <a href="#"> Terms of Use</a> | <a href="#">What's New</a> | <a href="#">Help</a> </p>
<!-- javascripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js">
</script>
</div>
Step 3:Create your home page
第 3 步：创建您的主页
/resources/templates/home.html
/resources/templates/home.html
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layouts/default">
<body>
<div id="page" layout:fragment="content">
<div>This is home page content</div>
</div>
</body>
</html>
Step 4 (Spring Boot 2):Add dependency to pom.xml
第 4 步（Spring Boot 2）：向 pom.xml 添加依赖
/pom.xml
/pom.xml
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
