问题：

与Thymeleaf模板

芮雪风

2023-03-14

我在让Thymeleaf按照我想要的方式处理模板方面遇到了一些问题。我以前使用的ApacheTiles很有效，但我认为它在配置/XML中很重要。我有一个优雅的解决方案，我甚至在XML配置中定义我的JavaScripts和Sytlesheets。然而，我想完全远离JSP。我已经看到了Thymeleaf和Facelets的参考资料。我决定试试Thymeleaf，但我在为所有其他页面获取默认布局时遇到了问题。

只是为了一些背景，这是我与ApacheTiles一起使用的默认布局文件。

<%@ 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复制类似的行为，其中视图将在模板内呈现，希望这是自。

就我目前所知，百里香不会以这种方式工作。而是定义片段并将其包含在每个页面上。它的工作方向相反。

我找到了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>

有什么想法或最佳做法吗？

芮祺

2023-03-14

你想要的是百里香的布局方言。

与Thymeleaf模板

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档