我正在学习本教程:http://www.thymeleaf.org/doc/layouts.html(到达百里香布局方言部分)。在那里你可以找到一个例子:
<!DOCTYPE html>
<html>
<head>
<!--/* Each token will be replaced by their respective titles in the resulting page. */-->
<title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">Task List</title>
...
</head>
<body>
<!--/* Standard layout can be mixed with Layout Dialect */-->
<div th:replace="fragments/header :: header">
...
</div>
<div class="container">
<div layout:fragment="content">
...
</div>
<div th:replace="fragments/footer :: footer">© 2014 The Static Templates</div>
</div>
</body>
</html>
在上面的例子中,页脚和页眉被th:replace
标记替换,而<head>
在布局文件中有<title>
标记。
基本上,我想用th:replace
替换整个<head>
标签。因此,我有:
我的布局文件:
<!DOCTYPE html>
<html>
<head th:replace="/html/components/head :: head">
</head>
<body>
<div layout:fragment="content">
</div>
...
<div th:replace="/html/components/footer :: footer" />
</body>
<html>
我的内容文件:
<!DOCTYPE html>
<html layout:decorator="/html/layouts/layout">
<head>
<title>My content title</title>
</head>
<body>
<div layout:fragment="content">
...
</div>
</body>
</html>
最后是我的/html/components/head.htm文件:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:fragment="head">
<meta charset="utf-8" />
<title layout:title-pattern="$CONTENT_TITLE">Layout Title should be replaced by Content Title!</title>
...
</head>
<body>
</body>
</html>
内容还可以。页脚和页眉按预期包含(替换)在文件中,但页面标题为空!
我得到:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title></title>
...
怎么了?
最后,我找到了实现我想要的东西的方法。
在布局文件<title>
中,标签必须保留。我将所有其他标签与<object>
标签分组,并将其注释如下:
<head>
<title layout:title-pattern="$CONTENT_TITLE">Layout Title will be replaced by Page Title!</title>
<object th:include="/html/components/head :: head" th:remove="tag" />
</head>
在我的html/components/head.htm文件中,我必须删除<title>
标记,这样它在包含后就不会重复。
<head th:fragment="head">
<meta charset="utf-8" />
<!-- NO TITLE TAG HERE -->
...
</head>
通过这种方式,头部片段被包含在<object>
标签中,由于th:remove="tag"
,<object>
标签被删除,我的最终HTML输出是:
<head>
<title>My content title</title>
<meta charset="utf-8" />
<!-- NO TITLE TAG HERE -->
...
</head>
很明显,我删除了这里没有标题标签的消息,一旦我得到它的工作。
我想我找到了一种稍微不那么详细的方法来将th:replace
和th:fragment
一起使用,例如在页面中包括常见的<head>
元数据和静态资源包含。
将th:remove="tag"
放入片段定义中,这样您就不必每次都重复th:remove="tag"
。
fragment_head.html
<thymeleaf xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
th:fragment="head" th:remove="tag">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" th:href="@{/css/vendor/bootstrap.min.css}"/>
</thymeleaf>
mypage.html
<head>
<thymeleaf th:replace="fragment_head :: head" />
</head>
您可以替换整个head标记。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="pl" th:replace="fragments/head :: head">
</head>
<body>
...
</body>
</html>
resources/templates/fragments/head.html:
<head lang="pl">
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.5/css/bootstrap.min.css"
th:href="@{/webjars/bootstrap/3.3.5/css/bootstrap.min.css}"
rel="stylesheet" media="screen" />
<script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.min.js"
th:src="@{/webjars/jquery/2.1.4/jquery.min.js}"></script>
<link href="../static/css/mycss.css"
th:href="@{css/mycss.css}" rel="stylesheet" media="screen"/>
</head>