Thymeleaf - Fragments avec Mise en page

Je fais de mon point de vue basés sur un modèle, mais il y a des domaines où je veux entrer fragments.

Modèle : base.html

<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <head>
        <title>HELLO</title>             
    </head>
    <body>
        <div layout:fragment="content"></div>
        <footer>
            Year Template
        </footer>
    </body>
</html>

vue: list.html

<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="base">
    <head th:replace="fragments/init :: head">
        <title>Title</title> 
    </head>
    <div  layout:fragment="content">
        <h1> <remove>List</remove> <small></small> </h1>       
    </div>
    <footer th:replace="fragments/init :: footer">
        Year List
    </footer>
</html>

Fragments : fragment/init.html

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head">
    <title>Title of Fragment</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body>
    <footer th:fragment="footer">
        2004 
    </footer>
</body>
</html>

Avec le fragment de tête, il fonctionne correctement. Mais dans le pied de page, Mais dans le pied de page, le code du modèle est affiché.

De sortie:

<html lang="en"><head>
    <title>Title of Fragment</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
    <body screen_capture_injected="true">
        <div>
        <h1> <remove>List</remove> <small></small> </h1>        
    </div>
        <footer>
            Year Template
        </footer>
    </body>
</html>

J'espère que vous pourrez m'aider. Merci à l'avance.

Mise à JOUR

base.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
  <head>
    <title>Template title</title>    
  </head>
  <body>
    <header>
      <h1>Template Title</h1>
    </header>
    <section layout:fragment="content">
      <p>Text Template</p>
    </section>   
    <footer layout:fragment="footer">
        <p>Footer template</p>
    </footer>
  </body>
</html>

list.html

<!DOCTYPE html>
<html   xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorator="base">
  <head th:replace="fragments/init :: head">
    <title>Title List</title>    
  </head>
  <body>
    <section layout:fragment="content">
      <p>Content List page</p>        
    </section>    
    <footer layout:fragment="footer">
        <div layout:include="fragments/init :: extra" th:remove="tag">
            <p>Footer List page</p>
        </div>        
    </footer>  
  </body>
</html>

init.html

<!DOCTYPE html>
<html   xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <head layout:fragment="head">
        <title>Title of Fragment</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
    </head>
    <body>
         <div layout:fragment="extra">
             <p>Extra Content Fragment </p>             
         </div>    
    </body>
</html>

De sortie:

     <html xmlns="http://www.w3.org/1999/xhtml"><head>
        <title>Title of Fragment</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
  <body screen_capture_injected="true">
    <header>
      <h1>Template Title</h1>
    </header>
    <section>
      <p>Content List page</p>        
    </section>   
    <footer>

             <p>Extra Content Fragment </p>             

    </footer>

</body></html>

J'ai réussi à inclure le fragment de code dans le pied de page, mais mon but est de le remplacer.

Solution:

<footer layout:fragment="footer" layout:include="fragments/init :: extra" th:remove="tag">
        <p>Footer List Page</p>
    </footer>

OriginalL'auteur JohnPortella | 2014-08-02

  1. 6

    Le pied de page dans votre mise en page se complique pas contenir un fragment de l'élément, de sorte que le pied de page ne change pas.

    Le contenu de la page a été décoré par les éléments de la Layout.html le
    résultat d'une combinaison de décorateur page, plus les fragments
    de la page de contenu (<head> des éléments provenant des deux pages avec le <title>
    élément de la page de contenu prenant la place de le décorateur, de tous les
    éléments de le décorateur, mais remplacé par tout le contenu de la page
    fragments si spécifié).

    https://github.com/ultraq/thymeleaf-layout-dialect#decorators-and-fragments

    Je vous remercie. Avec le lien que vous avez fourni, je, je pourrais inclure le fragment de code pour le Pied de page, mais je veux remplacer le pied de page complètement. Comment pourrais-je modifier mon code pour remplacer le pied de page? (Ci-dessus, vous verrez le code mis à jour)
    J'ai déjà pu résoudre. Je vous remercie.

    OriginalL'auteur Michiel Bijlsma