Spring Java: thymeleaf - étendre un template

Résolu/Fermé

charline159 Messages postés 212 Date d'inscription lundi 14 août 2017 Statut Membre Dernière intervention 22 juin 2022 - Modifié le 25 mai 2021 à 18:08
charline159 Messages postés 212 Date d'inscription lundi 14 août 2017 Statut Membre Dernière intervention 22 juin 2022 - 29 mai 2021 à 12:30

Bonjour, je souhaiterais réutiliser certaines parties communes (header, footer) à plusieurs pages d'un site. J'ai donc utilisé l'attribut layout comme ceci:

La page que j'aimerais réutiliser dans différentes pages (skeleton.html):

<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <head>
        <meta charset="UTF-8">
        <title>Message</title>
        <link th:href="@{/css/general.css}" rel="stylesheet" />
    </head>

    <body>
        <header th:insert="fragments/header.html :: header"> </header>

        <h1>Skeleton</h1>
        <div layout:fragment="content">
            <p>Changing contents</p>
        </div>

        <footer th:insert="fragments/footer.html :: footer"> </footer>
        <script type="text/javascript" th:src="@{/js/littlescript.js}"></script>
    </body>
</html>

La page qui doit faire appel à skeleton (test.html):

<!DOCTYPE html>
<html lang="en"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="skeleton.html">

  <body>
    <div layout:fragment="content">

      <!--Content of the page-->
      <h3>this is a page injected in another page</h3>

    </div>
  </body>
</html>

Cependant, lorsque j'affiche la page test.html, le contenu de skeleton n'est pas affiché, comme si je ne l'appelais pas.

Pourtant, j'ai l'impression d'avoir bien respecté la syntaxe, etc.

Une idée du problème ?

Configuration: Windows / Firefox 88.0

A voir également:

Thymeleaf extend template
Template qui veut gagner des millions - Forum Powerpoint
Template calendrier excel - Télécharger - Bureautique
Template typename t - Astuces et Solutions
Template un gars une fille - Forum Montage vidéo
Sommaire word template - Guide

3 réponses

Réponse 1 / 3

KX Messages postés 16664 Date d'inscription samedi 31 mai 2008 Statut Modérateur Dernière intervention 21 janvier 2023 2 998
25 mai 2021 à 20:37

Bonjour,

Il faudrait que tu regardes la documentation, elle est plutôt bien faite, mais ton code est loin de correspondre à ce qu'elle décrit.
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#template-layout

Exemple :

template.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <body>
    <div th:fragment="header">Mon header</div>
    <div th:fragment="footer">Mon footer</div>
  </body>
</html>

test.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <body>
    <div>Avant header</div>
    <div th:insert="~{template :: header}"></div>
    <div>Entre header et footer</div>
    <div th:insert="~{template :: footer}"></div>
    <div>Après footer</div>
  </body>
</html>

Réponse 2 / 3

charline159 Messages postés 212 Date d'inscription lundi 14 août 2017 Statut Membre Dernière intervention 22 juin 2022 1
25 mai 2021 à 21:40

Bonjour,

J'avais suivi ces tutos :
- https://www.kindsonthegenius.com/how-to-use-layout-page-in-spring-boot-with-thymeleaf-master-and-content-page/
- https://stackoverflow.com/questions/22212512/extend-a-view-with-thymeleaf

Du coup je trouve ça un peu étonnant que les gens parlent de xmlns:layout et layout:decorate alors que la doc officielle n'en parle pas.

J'ai essayé ton code, mais je ne vois pas trop la différence. Je peux déjà afficher mon header et mon footer dans skeleton.html qui a l'air de fonctionner correctement, mais je n'arrive pas à afficher le contenu de test.html + skeleton.html sur une seule et même page.

KX Messages postés 16664 Date d'inscription samedi 31 mai 2008 Statut Modérateur Dernière intervention 21 janvier 2023 2 998
25 mai 2021 à 22:51

"je trouve ça un peu étonnant que les gens parlent de xmlns:layout et layout:decorate alors que la doc officielle n'en parle pas"

xmlns

permet de définir des noms pour les éléments que tu utilises, un peu comme des variables, le nom définit ensuite permet de savoir de quel type on parle. En l'occurrence ce qui est nommé par th: et layout: ce ne sont pas les mêmes choses.

xmlns:th="http://www.thymeleaf.org"

c'est le ThymeLeaf de Spring Boot, via la dépendance org.springframework.boot:spring-boot-starter-thymeleaf et dont je t'ai donné la documentation Spring précédemment :
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"

c'est une bibliothèque complémentaire (qui n'est pas géré par Spring) via la dépendance nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect dont la documentation est ici :
https://ultraq.github.io/thymeleaf-layout-dialect/

charline159 Messages postés 212 Date d'inscription lundi 14 août 2017 Statut Membre Dernière intervention 22 juin 2022 1 > KX Messages postés 16664 Date d'inscription samedi 31 mai 2008 Statut Modérateur Dernière intervention 21 janvier 2023
26 mai 2021 à 11:25

J'étais déjà tombée sur https://ultraq.github.io un peu plus tôt. Dans la section Getting started, ils disent:
"This will introduce the layout namespace, and 5 new attribute processors that you can use in your templates: decorate, title-pattern, insert, replace, and fragment."
Etant donné que je peux déjà utiliser insert et replace, j'en conclus que je peux utiliser les autres tags également.

Au final, ce que j'avais fait est correct. J'avais juste oublié une dépendance dans le fichier pom.xml... A présent, tout fonctionne correctement.

Merci pour ton aide!

Réponse 3 / 3

charline159 Messages postés 212 Date d'inscription lundi 14 août 2017 Statut Membre Dernière intervention 22 juin 2022 1
26 mai 2021 à 11:26

Pour mon fichier test.html, j'ai essayé également ce code:

<!DOCTYPE html>
<html lang="en"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{skeleton}"
      xmlns:th="http://www.thymeleaf.org">

  <body>
    <div layout:fragment="content">

      <!--Content of the page-->
      <h3>this is a page injected in another page</h3>

    </div>
  </body>
</html>

donc avec cette syntaxe:

layout:decorate="~{skeleton}"

mais ma page skeleton ne s'affiche toujours pas. J'obtiens seulement le contenu de test.html.

Newsletters