web-dev-qa-db-fra.com

Tête et titre chez Thymeleaf

Je suis un débutant à Thymeleaf . J'ai commencé avec une page de présentation commune:

fragments/layout.html 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headerFragment">
    <title>Template title</title>
    <!-- metas, link and scripts -->
</head>
<body>
<div class="container">
    Some text
</div>
</body>
</html>

Et une page de contenu:

page.html 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/layout :: headerFragment">
    <title>Page title</title>
    <!-- metas, link and scripts -->
</head>
<body>
<div class="container">
    Some text
</div>
</body>
</html>

Lors du rendu de la page, le titre provient toujours du modèle, pas de la page . Est-il possible dans Thymeleaf d'avoir des métas, des scripts et un style en commun (dans la balise HEAD) par page titre?

thymeleaf
14
Andrea Colleoni

J'avais aussi ce problème (merci nmy pour avoir référencé la documentation !) Voici ce que j'ai remarqué et comment je l'ai résolu dans mon application:

Points à noter dans la documentation:

  1. Les différences entre th:include et th:replace
  2. Référencement de fragments par domselector au lieu de th:fragment
  3. Thymeleaf fournit une option "this" pour trouver des sélecteurs

Avec ces 3 choses à l'esprit, vous pouvez faire ce qui suit:

fragments/layout.html:

<head th:fragment="headerFragment">
    <title th:include=":: #pageTitle">Layout Generic Title< /title>
    <!-- metas, link and scripts -->
</head>

page.html

<head th:include="fragments/layout :: headerFragment">
    <title id="pageTitle">Page title</title>
    <!-- other elements you want to reference in your layout -->
</head>

J'espère que cela t'aides!

17
tarish

Check out Signatures de fragments paramétrables .

En gros, dans votre fragment:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headerFragment (pageTitle)">
    <title th:text="${pageTitle}>Template title</title>
    <!-- metas, link and scripts -->
</head>
<body>
    <div class="container">
        Some text
    </div>
</body>
</html>

Ensuite, où vous l'utilisez:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/layout :: headerFragment (pageTitle='Bla Bla Some Title'">
    <title>Page title</title>
    <!-- metas, link and scripts -->
</head>
<body>
    <div class="container">
        Some text
    </div>
</body>
</html>
11
demaniak

Vous pouvez même les combiner;) Utilisez les éléments suivants dans la page de modèle.

<title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">
    Template title
</title>

Dans votre cas, cela résoudrait en:

<title>Template title - Page Title</title>
8
MystyxMac

C'est la meilleure solution que j'ai trouvée:

  1. Créer un fragment de bloc

<th:block th:fragment="header">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" charset="UTF-8"/>
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <!-- Bootstrap Css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>

    <!-- Fontawesome css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</th:block>

  1. Faites cela dans toutes les têtes pour vos pages html

<head>
    <div th:replace="fragments/headerFragment :: header"></div>
    <title>Example</title>
    <script src="customStuff"></script>
</head>

Donc, à la fin, vous pouvez avoir un fragment contenant tous les scripts et css dont vous avez besoin dans toutes vos pages et l’ajouter simplement à vos en-têtes, tout en restant capable de 

4
Yocker95k

Ce travail pour moi ..

disposition 

<head th:fragment="headerfragment">
    <title th:text="${pageTitle}">Template Title</title>

page 

<head th:include="layout :: headerfragment">

sur mon contrôleur 

m.addAttribute("pageTitle", "Dashboard Page");
3
Ucup Timposu

Selon documentation th: include inclut le contenu d’un fragment dans le fichier div. Ainsi, vous obtiendrez le titre du modèle. Vous pouvez utiliser un attribut pour le titre de la page comme suit et définir sa valeur dans chaque contrôleur.

<head th:fragment="headerFragment">
   <title>${pagetitle}</title>
   <!-- metas, link and scripts -->
</head>

Vous pouvez également utiliser des dialectes de présentation pour obtenir les mêmes résultats que ceux décrits ici . dialecte de présentation Thymeleaf et th: replace in head entraîne la suppression du titre

0
nmy