我正在建立一个新网站，我希望有多个文件用于可重复使用的组件（页眉、页脚、通用导入、脚本等）。我还想为每个布局（组合我定义的组件）创建文件，如“主应用程序”、“全屏仪表板”等。最后，我想创建只包含我需要的内容的页面，然后将其插入布局我的选择。像这样的东西：文件图我看过这个问题，但这需要我在 java 上调用布局，并将我的内容作为参数，而不是在我的内容上定义要使用的布局。我还考虑过只使用我的“布局”作为模板，然后复制+粘贴到一个新的“内容”文件中并编辑占位符。这是一个示例控制器： @View("ticketing/home") @Get("/") public HttpResponse home() { final Map<String, Object> resultMap = new HashMap<>(); resultMap.put("requests", ticketingClient.getSummaryRequests()); //Returns a list of tickets to be displayed. return HttpResponse.ok(resultMap); //Maps the resultMap variable to the ticketing/home thymeleaf template }这就是我想要构建内容文件的方式：<html> <head> <title>Tickets</title> </head><body> <div> <p>My Content is here!</p> <img src="wow.jpeg"> </div></body></html>这就是我现在的布局：<html xmlns:th="http://www.thymeleaf.org"><head> <title>Application Layout</title> <th:block th:include="./fragments/head.html :: imports"></th:block></head><body> <div id="wrapper"> <!-- Sidebar Menu --> <div th:replace="./fragments/sidebar.html :: sidebar"></div> <div id="page-wrapper" class="gray-bg"> <!-- Navigation Menu --> <div th:replace="./fragments/topbar.html :: topbar"></div> <!-- Page Header --> <div th:replace="./fragments/pageheader.html :: pageheader"></div> <!-- Main Content --> <div class="wrapper wrapper-content animated fadeInUp" th:fragment="content"> <div class="row"> <div class="col-lg-12"> <div class="wrapper wrapper-content"> <p>Content here</p> </div> </div> </div> </div> </div> </div> <div th:replace="./fragments/footer.html :: footer"></div> <th:block th:replace="./fragments/scripts.html :: scripts"></th:block></body></html>我希望能够使用相同的 java 语法（带有注释）来使用我的视图。我宁愿在内容文件中进行更多更改，也不愿在布局文件中进行更改。
1 回答
FFIVE
TA贡献1797条经验 获得超6个赞
找到了一个有用的答案：
这是一些代码：组件：内容
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Content Wrapper</title>
</head>
<body>
<div class="wrapper wrapper-content animated fadeInUp" th:fragment="content(content)">
<!-- Main Content -->
<div class="row">
<div class="col-lg-12">
<div class="wrapper wrapper-content">
<th:block th:replace="${content}"></th:block>
</div>
</div>
</div>
</div>
</body>
</html>
组件：页眉
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" th:fragment="pageheader">
<head>
<title>Page Header</title>
</head>
<body>
<div class="row wrapper border-bottom white-bg page-heading" th:fragment="pageheader(title)">
<div class="col-sm-8 col-lg-9">
<!-- Title -->
<h2 th:replace="${title}">This is main title</h2>
<th:block th:if="${breadcrumb}">
<!-- Breadcrumb -->
<ol class="breadcrumb" th:replace="${breadcrumb}">
<li class="breadcrumb-item"><a href="index.html">This is</a></li>
<li class="breadcrumb-item active"><strong>Breadcrumb</strong></li>
</ol>
</th:block>
</div>
<div class="col-sm-4 col-lg-3">
<th:block th:if="${actions}">
<!-- Main Action -->
<div class="title-action btn-group" th:if="${actions}" th:replace="${actions}">
<a href="" class="btn btn-primary">Main Actions</a>
<a href="" class="btn btn-primary">Main Actions</a>
</div>
</th:block>
</div>
</div>
</body>
</html>
布局：applayout
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" th:fragment="layout"> <!-- ${content} and ${title} are mandatory -->
<head>
<title th:replace="${title}">Application Layout</title>
<th:block th:include="./fragments/head.html :: imports"></th:block>
</head>
<body>
<div id="wrapper">
<!-- Sidebar Menu -->
<div th:replace="./fragments/sidebar.html :: sidebar"></div>
<div id="page-wrapper" class="gray-bg">
<!-- Navigation Menu -->
<div th:replace="./fragments/topbar.html :: topbar"></div>
<!-- Page Header -->
<div th:replace="./fragments/pageheader.html :: pageheader(title=${title},breadcrumb=${breadcrumb},actions=${actions})"></div>
<!-- Main Content -->
<div class="wrapper wrapper-content animated fadeInUp" th:replace="./fragments/content.html :: content(${content})"></div>
</div>
</div>
<div th:replace="./fragments/footer.html :: footer"></div>
<th:block th:replace="./fragments/scripts.html :: scripts"></th:block>
</body>
</html>
内容：门票
<!DOCTYPE html>
<html th:replace="~{layout/applayout.html :: layout(title=~{::title},breadcrumb=~{::ol},content=~{::#main},scripts=~{::#scripts})}" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Homepage</title>
</head>
<body>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item active"><strong>wow</strong></li>
</ol>
<div id="main">
<div class="col">
<p>WOW</p>
</div>
<div class="col">
<p>WOW</p>
</div>
<div class="col">
<p>WOW</p>
</div>
</div>
<th:block id="scripts">
</th:block>
</body>
</html>
这样我就可以在我的内容页面上有可选参数，每个片段单独处理这些参数。
添加回答
举报
0/150
提交
取消