亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 Thymeleaf 上使用具有動態數據的多個“組件”(文件)?

如何在 Thymeleaf 上使用具有動態數據的多個“組件”(文件)?

ibeautiful 2023-05-10 13:23:45
我正在建立一個新網站,我希望有多個文件用于可重復使用的組件(頁眉、頁腳、通用導入、腳本等)。我還想為每個布局(組合我定義的組件)創建文件,如“主應用程序”、“全屏儀表板”等。最后,我想創建只包含我需要的內容的頁面,然后將其插入布局我的選擇。像這樣的東西:文件圖我看過這個問題,但這需要我在 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>

這樣我就可以在我的內容頁面上有可選參數,每個片段單獨處理這些參數。


查看完整回答
反對 回復 2023-05-10
  • 1 回答
  • 0 關注
  • 191 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號