如何在Thymeleaf上對動態數據使用多個“組件”（文件）？

Question

我正在建立一個新的網站，我想擁有多個文件以用於可重復使用的組件（頁眉，頁腳，，上的常見導入，腳本等）。 我還希望每個布局都有文件（結合我定義的組件），例如“主應用程序”，“全屏儀表板”等。最后，我想創建僅包含所需內容的頁面，然后將其插入到布局中由我選擇。

像這樣：文件圖

我已經看過這個問題，但這要求我以內容為參數調用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語法（帶有批注）來使用我的視圖。

我寧願在內容文件中而不是在布局文件中進行更多更改。

Answer 1

我找到了一個對我有用的答案：

我已經引用了這個帖子，這個帖子和這個問題提到的帖子。

這是一些代碼：組件：內容

<!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>

組件：pageheader

<!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>

布局：布局

<!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 lang="en" 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>

這樣，我可以在內容頁面上具有可選參數，這些參數將分別由每個片段處理。

如何在Thymeleaf上對動態數據使用多個“組件”（文件）？

問題描述

1 個解決方案

解決方案1
0 已采納 2019-08-01 15:40:14

如何在Thymeleaf上對動態數據使用多個“組件”（文件）？

問題描述

1 個解決方案

解決方案1 0 已采納 2019-08-01 15:40:14

解決方案1
0 已采納 2019-08-01 15:40:14