1 回答

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>
這樣我就可以在我的內容頁面上有可選參數,每個片段單獨處理這些參數。
添加回答
舉報