我是一个Thymeleaf初学者.我从一个共同的布局页面开始:
片段/的layout.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headerFragment">
<title>Template title</title>
<!-- metas, link and scripts -->
</head>
<body>
<div class="container">
Some text
</div>
</body>
</html>
还有一个内容页面:
page.html中
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/layout :: headerFragment">
<title>Page title</title>
<!-- metas, link and scripts -->
</head>
<body>
<div class="container">
Some text
</div>
</body>
</html>
当我渲染页面时,标题始终来自模板,而不是来自页面.在Thymeleaf中是否可以使用metas,脚本和样式共同(在HEAD标签中)但是每页标题？
小智 20
我也有这个问题(谢谢你nmy参考文档!)这是我注意到的以及我在我的应用程序中如何解决它:
文档中要注意的事项:
th:include和之间的区别th:replaceth:fragmentthis查找选择器的选项考虑到这三件事,您可以执行以下操作:
片段/的layout.html:
<head th:fragment="headerFragment">
<title th:include=":: #pageTitle">Layout Generic Title< /title>
<!-- metas, link and scripts -->
</head>
page.html中
<head th:include="fragments/layout :: headerFragment">
<title id="pageTitle">Page title</title>
<!-- other elements you want to reference in your layout -->
</head>
希望这可以帮助!
dem*_*iak 11
查看可参数化的片段签名.
基本上,在你的片段中:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headerFragment (pageTitle)">
<title th:text="${pageTitle}>Template title</title>
<!-- metas, link and scripts -->
</head>
<body>
<div class="container">
Some text
</div>
</body>
</html>
然后,在哪里使用它:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/layout :: headerFragment (pageTitle='Bla Bla Some Title'">
<title>Page title</title>
<!-- metas, link and scripts -->
</head>
<body>
<div class="container">
Some text
</div>
</body>
</html>
您甚至可以将它们组合起来;)在模板页面中使用以下内容.
<title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">
Template title
</title>
在您的情况下,这将解决:
<title>Template title - Page Title</title>
小智 7
这是我发现的最佳解决方案：
<th:block th:fragment="header">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" charset="UTF-8"/>
<meta name="_csrf" th:content="${_csrf.token}"/>
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<!-- Bootstrap Css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>
<!-- Fontawesome css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</th:block><head>
<div th:replace="fragments/headerFragment :: header"></div>
<title>Example</title>
<script src="customStuff"></script>
</head>因此，最终您可以拥有一个片段，其中包含所有页面中所需的所有脚本和css，并将其添加到标题中，同时仍然可以广告一些自定义css，脚本或任何其他内容。
| 归档时间： |
|
| 查看次数： |
23637 次 |
| 最近记录： |