带有百里香叶的模板答案

【问题标题】：Templates with Thymeleaf带有百里香叶的模板
【发布时间】：2015-06-01 08:31:34
【问题描述】：

我在让 Thymeleaf 以我想要的模板方式行事时遇到了一些问题。我以前使用的 Apache Tiles 可以工作，但我认为配置/ XML 很重。我有一个优雅的解决方案，我什至可以在 Tiles XML 配置中定义我的 JavaScript 和 Sytlesheets。但是我想完全摆脱 JSP。我看过 Thymeleaf 和 Facelets 的参考资料。我决定尝试一下 Thymeleaf，但在为所有其他页面获取默认布局时遇到问题。

仅作为背景，这是我在 Apache Tiles 中使用的默认布局文件。

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>

<tiles:importAttribute name="javascripts"/>
<tiles:importAttribute name="stylesheets"/>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="XXXXXXXXXXX">
    <meta name="description" content="Something">
    <title><tiles:insertAttribute name="title"></tiles:insertAttribute></title>
    <!-- stylesheets -->
    <c:forEach var="css" items="${stylesheets}">
        <link rel="stylesheet" type="text/css" href="<c:url value="${css}"/>">
    </c:forEach>
    <!-- end stylesheets -->
</head>
<body>

    <!--[if lt IE 10]>
        <p class="alert alert-warning">
            Warning: You are using an unsupported version of Internet Explorer. We recommend using Internet Explorer
            10+. If you are a Windows XP user you'll need to download an alternative browsers such as FireFox, Chrome,
            Opera, or Safari. 
        </p>
    <![endif]-->

    <!-- header -->
    <div id="header">
        <tiles:insertAttribute name="header"></tiles:insertAttribute>
    </div>
    <!-- end header  -->

    <!-- content -->
    <div id="content">
        <tiles:insertAttribute name="content"></tiles:insertAttribute>
    </div>
    <!-- end content -->

    <!-- footer -->
    <div id="footer">
        <tiles:insertAttribute name="footer"></tiles:insertAttribute>
    </div>
    <!-- end footer -->

    <!-- scripts -->
    <c:forEach var="script" items="${javascripts}">
        <script src="<c:url value="${script}"/>"></script>
    </c:forEach>
    <!-- end scripts -->

</body>
</html>

我想用 Thymeleaf 复制类似的行为，其中视图将在模板内呈现，希望如此。

据我所知，Thymeleaf 不是这样工作的。相反，您定义片段并将它们包含在每个页面上。它的工作方向相反。

我找到了这个 GitHub 的例子https://github.com/michaelisvy/mvc-layout-samples/tree/master/src/main/webapp/WEB-INF/view/thymeleaf

我不明白下面的文件。

!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head th:fragment="headerFragment">
             <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <link th:href="@{/style/app.css}" rel="stylesheet" />
    </head>
<body>
        <div class="container" style="padding-top: 50px;">
            <div th:fragment="menuFragment">
                <div class="header well">
                    <img th:src="@{/images/springsource_banner_green.png}"/>
                </div>
                <div class="page-header">
                    <h1 th:text="${title}"></h1>
                </div>  
                <ul>
                    <li><a th:href="@{/users/all/jsp-plain.htm}">No template</a></li>
                    <li><a th:href="@{/users/all/jsp-custom-1.htm}">Custom tags</a></li>
                    <li><a th:href="@{/users/all/jsp-custom-2.htm}">Custom tags with table tag</a></li>
                    <li><a th:href="@{/users/all/jsp-tiles.htm}">Apache Tiles</a></li>
                    <li><a th:href="@{/users/all/thymeleaf.htm}">Thymeleaf</a></li>
                </ul>
            </div>
        </div>

</body>
</html>

这一行毫无意义，因为它不是片段的一部分，因为当它包含在 users.html 中时，html 结构就会丢失。

<div class="container" style="padding-top: 50px;">

基本上我想要这样的东西

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container" style="padding-top: 50px;">
        <div>
            <div class="header well">
                <img th:src="@{/images/springsource_banner_green.png}"/>
            </div>
            <div class="page-header">
                <h1 th:text="${title}"></h1>
            </div>
            <ul>
                <li><a th:href="@{/users/all/jsp-plain.htm}">No template</a></li>
                <li><a th:href="@{/users/all/jsp-custom-1.htm}">Custom tags</a></li>
                <li><a th:href="@{/users/all/jsp-custom-2.htm}">Custom tags with table tag</a></li>
                <li><a th:href="@{/users/all/jsp-tiles.htm}">Apache Tiles</a></li>
                <li><a th:href="@{/users/all/thymeleaf.htm}">Thymeleaf</a></li>
            </ul>
        </div>
    </div>

    <div id="content">
    <!-- PAGES SHOULD RENDER HERE, example User.html -->
    </div>

    <!-- scripts -->
    <script src="https://code.jquery.com/jquery-2.1.3.min.js" />
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body>
</html>

有什么想法或最佳实践吗？

【问题讨论】：

对不起，我看不出这里的重点。我用它来包含一个菜单标题：<div th:replace="fragments/header :: header">&nbsp;</div>

标签： spring-mvc thymeleaf

【解决方案1】：

你想要Thymeleaf Layout Dialect。

【讨论】：

是的，这正是我想要的。现在 if 的工作方式类似于 sitemesh、apache tile 和 Microsofts Razor。看起来它可以在没有我阅读的额外库的情况下完成，但这对我来说更直观
为什么不在官方 Thymeleaf 文档中解释 Thymeleaf Layout Dialect.. Thymeleaf 文档真的很糟糕..