Tête et titre en Thymeleaf

Question

Tête et titre en Thymeleaf

<!-Je suis un débutant de Thymeleaf. J'ai commencé avec une mise en commun de la page:

fragments/mise en page.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>

quand je rends la page, le titre est toujours du modèle, pas de la page. Est-il possible dans Thymeleaf d'avoir des metas, des scripts et un style en commun (dans la balise HEAD) mais d'avoir un par page titre?

10

thymeleaf

demandé sur Mahozad 2015-07-16 13:34:58

6 réponses

score 14 · Answer 1

j'ai été aussi à avoir ce problème (Merci nmy pour faire référence au documentation!) Voici ce que j'ai remarqué et comment je l'ai résolu dans mon application:

Choses à noter à partir de la documentation:

Les différences entre th:include et th:replace
référencement des fragments par domselector au lieu de th:fragment
Thymeleaf fournit un"this" option pour trouver des sélecteurs

Avec ces 3 choses à l'esprit, vous pouvez effectuer les opérations suivantes:

fragments/mise en page.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>

Espérons que cette aide!

score 9 · Answer 2

découvrez Paramétrable fragment de signatures.

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>

Puis, 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>

score 6 · Answer 3

vous pouvez même les combiner;) utilisez ce qui suit dans la page modèle.

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

dans votre cas, cela se résoudrait dans:

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

score 3 · Answer 4

Ce travail pour moi..

mise en page

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

page

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

sur mon Controller

m.addAttribute("pageTitle", "Dashboard Page");

score 0 · Answer 5

Selon documentation th:comprennent le contenu d'un fragment dans le y compris vrd. Vous obtiendrez donc 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 les dialectes de mise en page pour obtenir les mêmes résultats que ceux décrits ici. Thymeleaf disposition dialecte et th:remplacer, dans la tête des causes de titre pour être vide

score 0 · Answer 6

Créer un bloc fragment

<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>

le Faire 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>

ainsi, à la fin, vous pouvez avoir un fragment contenant tous les scripts et css dont vous avez besoin dans toutes vos pages et il suffit de l'ajouter à vos en-têtes, tout en étant en mesure d'ajouter certains CSS personnalisés, scripts ou quoi que ce soit

Las etiquetas más populares

Tête et titre en Thymeleaf

6 réponses