Html Thymeleaf - 具有布局的片段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25095967/
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
Thymeleaf - Fragments with Layout
提问by JohnPortella
I'm doing my view based on a template, but there are some areas where I want to enter fragments.
我正在根据模板进行视图，但在某些区域我想输入片段。
Template : base.html
模板：base.html
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>HELLO</title>
</head>
<body>
<div layout:fragment="content"></div>
<footer>
Year Template
</footer>
</body>
</html>
view: list.html
视图：list.html
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="base">
<head th:replace="fragments/init :: head">
<title>Title</title>
</head>
<div layout:fragment="content">
<h1> <remove>List</remove> <small></small> </h1>
</div>
<footer th:replace="fragments/init :: footer">
Year List
</footer>
</html>
Fragments : fragment/init.html
片段：片段/init.html
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head">
<title>Title of Fragment</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body>
<footer th:fragment="footer">
2004
</footer>
</body>
</html>
With the head fragment, it works correctly. But in the footer, But in the footer, the code of the template is displayed.
使用头部片段，它可以正常工作。但是在页脚中，但是在页脚中，显示的是模板的代码。
Output:
输出：
<html lang="en"><head>
<title>Title of Fragment</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body screen_capture_injected="true">
<div>
<h1> <remove>List</remove> <small></small> </h1>
</div>
<footer>
Year Template
</footer>
</body>
</html>
I hope you can help me. Thanks in advance.
我希望你能帮助我。提前致谢。
UPDATE
更新
base.html
基本文件
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>Template title</title>
</head>
<body>
<header>
<h1>Template Title</h1>
</header>
<section layout:fragment="content">
<p>Text Template</p>
</section>
<footer layout:fragment="footer">
<p>Footer template</p>
</footer>
</body>
</html>
list.html
列表.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="base">
<head th:replace="fragments/init :: head">
<title>Title List</title>
</head>
<body>
<section layout:fragment="content">
<p>Content List page</p>
</section>
<footer layout:fragment="footer">
<div layout:include="fragments/init :: extra" th:remove="tag">
<p>Footer List page</p>
</div>
</footer>
</body>
</html>
init.html
初始化文件
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head layout:fragment="head">
<title>Title of Fragment</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body>
<div layout:fragment="extra">
<p>Extra Content Fragment </p>
</div>
</body>
</html>
Output:
输出：
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Title of Fragment</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body screen_capture_injected="true">
<header>
<h1>Template Title</h1>
</header>
<section>
<p>Content List page</p>
</section>
<footer>
<p>Extra Content Fragment </p>
</footer>
</body></html>
I managed to include the code fragment in the footer, but my goal is to replace it.
我设法将代码片段包含在页脚中，但我的目标是替换它。
Solution:
解决方案：
<footer layout:fragment="footer" layout:include="fragments/init :: extra" th:remove="tag">
<p>Footer List Page</p>
</footer>
回答by Michiel Bijlsma
The footer in your layout page doens't contain an fragment element, so the footer doesn't change.
布局页面中的页脚不包含片段元素，因此页脚不会更改。
The content page was 'decorated' by the elements of Layout.html, the result being a combination of the decorator page, plus the fragments of the content page (
<head>elements from both pages with the<title>element from the content page taking place of the decorator's, all elements from the decorator, but replaced by all content page fragments where specified).
内容页面由 Layout.html 的元素“装饰”，结果是装饰页面的组合，加上内容页面的片段（
<head>来自两个页面的<title>元素，来自内容页面的元素取代了装饰页面的元素，装饰器中的所有元素，但被指定的所有内容页面片段替换）。
https://github.com/ultraq/thymeleaf-layout-dialect#decorators-and-fragments
https://github.com/ultraq/thymeleaf-layout-dialect#decorators-and-fragments
