2015-03-27 4 views
3

У меня возникли проблемы с тем, как Тимелеаф ведет себя так, как хочу по шаблонам. Я ранее использовал Apache Tiles, который работал, но я думал, что это большой вес с конфигурацией/XML. У меня было элегантное решение, в котором я даже определял свои сценарии JavaScripts и Sytlesheets в конфигурации Tiles XML. Однако я хочу полностью отказаться от JSP. Я видел ссылки для Тимелеафа и Лицелетов. Я решил попробовать Thymeleaf, но у меня проблемы с настройкой по умолчанию для всех моих других страниц.Шаблоны с 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> 

Любые идеи или лучшие практики?

+0

Извините, я не вижу здесь смысла. Я использую это для включения заголовка меню: '

 
' –

ответ

3

Вы хотите Thymeleaf Layout Dialect.

+0

Да, это именно то, что я искал. Теперь, если работы похожи на sitemesh, плитки apache и Microsoft Razor. Похоже, что это можно сделать без дополнительных библиотек из того, что я прочитал, но для меня это намного интуитивно понятен – jkratz55

Смежные вопросы