Thymeleaf Seitenlayout Header-Eigenschaften überschrieben

Ok, also verwende ich thymeleaf page layouts.Thymeleaf Seitenlayout Header-Eigenschaften überschrieben

Es scheint zu funktionieren, aber ich möchte wissen, wie würde ich die <title></title>-Eigenschaft in der <head></head> einer Seite, die ein Fragment verwendet konfigurieren? Momentan wird alles im Kopf vom Header-Fragment überschrieben (siehe unten).

Das ist mein: resources/templates/fragments/header.html

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> 
<head th:fragment="header"> 
    <link href="../../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" rel="stylesheet" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" th:src="@{js/bootstrap.min.js}"></script> 
</head> 
<body></body> 
</html>

Dies ist mein Index-Seite (ich den Titel-Tag angezeigt werden soll):

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> 

<head th:include="fragments/header :: header"> 
    <title>THIS DOES NOT SHOW</title> 
</head> 
<body> 
    <div class="container"> 
     <div th:include="fragments/headerNavbar :: headerNavbar"></div> 

     <h1>hey</h1> 
     <div class="btn btn-success">button</div> 
     <button class="btn btn-success">another</button>  
    </div>

Dies ist die eigentliche HTML-Ausgabe:

<head> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <script src="js/bootstrap.min.js"></script> 
</head>

Ich bekomme, was los ist. Das Kopfzeilenfragment wird in den Kopf meiner Indexseite geladen (eingeschlossen) und überschreibt somit alle Eigenschaften.

Mein Problem ist, dass ich nicht weiß, wie ein Header-Fragment UND eine Datei verwenden dieses Fragment beim Angeben einer Eigenschaft, wie ein Titel.

Dies ist, was ich in Indexdatei versucht haben:

<head> 
    <div th:include="fragments/header :: header"></div> 
    <title>THIS DOES NOT SHOW</title> 
</head>

Aber es vermasselt wirklich mein HTML auf. Es muss eine einfache Lösung geben?

Quelle

2016-03-29 gudthing

Wahrscheinlich etwas, das ich auch fragen wollte. – Prashant

@ Prashant es ist ein komisches tbh! Scheint nicht wirklich eine offensichtliche Lösung zu sein. Es gibt mögliche Wege, vielleicht mit Jquery, aber das ist klobig ... – gudthing

Ja einverstanden! Sie könnten nur als Problemumgehungen und nicht als Lösungen angesehen werden, besonders wenn behauptet wird, dass Thymelblatt eine natürliche Template-Engine ist. Ich würde wirklich gerne wissen, ob wir etwas hier vermissen. – Prashant

Sie die Thymeleaf Layout Dialect verwenden könnten, die Unterstützung für hierarchisches Layout durch neue Attribute zur Verfügung stellt. Diese Attribute ähneln denen von Thymeleaf, bieten jedoch zusätzliche Funktionen.

Zum Beispiel erlaubt es, den Inhalt des Kopfbereichs des Layouts mit dem Inhalt des Kopfbereichs von der Seite, die den Körperbereich bereitstellt, zu mischen.

Sie müssen eine Vorlage erstellen, die als Layout für Ihre Seiten verwendet wird.Basierend auf dem Beispiel würden Sie so etwas wie dieses:

Datei resources/templates/layouts/layout.html

<!DOCTYPE html> 
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> 
    <head> 
    <link href="../../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" rel="stylesheet" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" th:src="@{js/bootstrap.min.js}"></script> 
    <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">My app</title> 
    </head> 
    <body> 
    <section layout:fragment="content"> 
     <!-- Content replaced by each page's content fragment --> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Praesent scelerisque neque neque, ac elementum quam dignissim interdum. 
     </p> 
    </section> 
    </body> 
</html>

Datei resources/templates/index.html

<!DOCTYPE html> 
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" 
     layout:decorator="layouts/layout"> 
<head> 
    <title>Home page</title> 
</head> 
<body> 
    <div layout:fragment="content"> 
     <h1>hey</h1> 
     <div class="btn btn-success">button</div> 
     <button class="btn btn-success">another</button>  
    </div> 
</body> 
</html>

diese Weise die resultierende Seite wird den folgenden Kopfteil haben:

<head> 
    <link href="../../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" rel="stylesheet" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" th:src="@{js/bootstrap.min.js}"></script> 
    <title>My app - Home page</title> 
</head>

Beachten Sie die layout:title-pattern-Attribut, mit dem ein Muster zum Erzeugen des endgültigen Titels festgelegt werden kann. Der Layout-Dialekt wird standardmäßig jedes Skript oder Stylesheet zusammenführen, das auch im Kopfbereich der Seite enthalten ist. Ich habe aus Gründen der Einfachheit kein Fragment für die Kopfzeile, Fußzeile, Menü usw. hinzugefügt, aber es wird auch unterstützt.

Werfen Sie einen Blick auf die Seite des Projekts, um zu sehen, welche Abhängigkeit Sie Ihrem Projekt und der erforderlichen Konfiguration hinzufügen müssen. Wenn Sie boot verwenden, wird dieser Dialekt bereits vom Thymeleaf-Starter unterstützt. Sie müssen also nur die Abhängigkeit zu Ihrem Projekt hinzufügen und es wird automatisch konfiguriert.

EDIT: I einen Tippfehler in der Layoutbeispiel korrigiert haben, wurde mit Layout: umfassen anstelle von Layout: Fragment.

Quelle

2016-03-30 07:23:02

Ich habe es akzeptiert, da ich diese Lösung zu meinem Original bevorzuge. Ich liebe hierarchische Layouts, daher muss ich weiter darauf eingehen :) – gudthing

musste wegen einer Ausnahme eine kleine Änderung am Beispiel vornehmen. Ich ändere das Layout: 'layout: include =" content "' zu 'layout: include =" :: content "' – gudthing

Sorry, mein Fehler, sollte stattdessen in _layout: fragment = "content" _ geändert werden. Dies ist das Attribut, das zum Einschließen des Seiteninhalts verwendet werden soll. In der Antwort korrigiert. –

Ok Ich fand einen Weg um es mit dieser solution. Ich denke immer noch, dass es klobig ist, und ich denke immer noch, dass es einen besseren Weg gibt, aber für meine Bedürfnisse ist das ausreichend (bitte teilen Sie eine Lösung, wenn Sie eine haben):

Die Magie ist mit der th:remove="tag", zur Laufzeit, die Objekt-Tag wird entfernt und zeigt das Fragment in geeigneter Weise:

<head> 
    <title>THIS DOES SHOW</title> 
    <object th:include="fragments/header :: header" th:remove="tag"><object> 
</head>

So, jetzt ist die Ausgabe:

<head> 
    <title>THIS DOES SHOW</title> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <script src="js/bootstrap.min.js"></script> 
</head>

Quelle

2016-03-29 13:40:44 gudthing

Gute Lösung, aber Sie haben einen Fehler in Ihrem Code, Sie schließen das

Thymeleaf Seitenlayout Header-Eigenschaften überschrieben

Antwort

Verwandte Themen