streamalism.org

1. Inleiding

Thymeleaf is een Java-sjabloonengine voor het verwerken en creëren van HTML, XML, JavaScript, CSS en platte tekst. Bekijk dit artikel voor een inleiding tot Thymeleaf en Spring.

In dit artikel zullen we ons concentreren op sjablonen - iets dat de meeste redelijk complexe sites op de een of andere manier moeten doen. Simpel gezegd, pagina's moeten gemeenschappelijke paginacomponenten delen, zoals de koptekst, voettekst, menu en mogelijk nog veel meer.

Thymeleaf-adressen die met aangepaste dialecten - u lay-outs kunt maken met behulp van de Thymeleaf Standard Layout-systeem of de Layout Dialect - die het decorateurpatroon gebruikt voor het werken met de lay-outbestanden.

In dit artikel bespreken we enkele kenmerken van Thymeleaf Layout Dialect - die u hier kunt vinden. Om meer specifiek te zijn, zullen we de functies ervan bespreken, zoals het maken van lay-outs, aangepaste titels of het samenvoegen van head-elementen.

2. Maven afhankelijkheden

Laten we eerst eens kijken welke configuratie nodig is om Thymeleaf met Spring te integreren. De thymeleaf-spring bibliotheek is vereist in onze afhankelijkheden:

 org.thymeleaf thymeleaf 3.0.11.RELEASE org.thymeleaf thymeleaf-spring5 3.0.11.RELEASE 

Merk op dat voor een Spring 4-project de thymeleaf-spring4 bibliotheek moet worden gebruikt in plaats van thymeleaf-spring5. De laatste versie van de afhankelijkheden is hier te vinden.

We hebben ook een afhankelijkheid nodig voor dialect met aangepaste lay-outs:

 nz.net.ultraq.thymeleaf thymeleaf-layout-dialect 2.4.1 

De laatste versie is te vinden in de Maven Central Repository.

3. Thymeleaf Layout Dialect Configuratie

In deze sectie bespreken we hoe u Thymeleaf configureert voor gebruik Layout Dialect. Als u een stap terug wilt doen en wilt zien hoe u Thymeleaf 3.0 configureert in uw webapp-project, bekijk dan deze tutorial.

Zodra we Maven-afhankelijkheid hebben toegevoegd als onderdeel van een project, moeten we de Layout Dialect aan onze bestaande Thymeleaf-sjabloonengine. We kunnen dit doen met Java-configuratie:

SpringTemplateEngine-engine = nieuwe SpringTemplateEngine (); engine.addDialect (nieuwe LayoutDialect ());

Of door XML-bestandsconfiguratie te gebruiken:

Bij het decoreren van de secties van de inhoud en lay-outsjablonen, is het standaardgedrag om alle inhoudselementen na de lay-out-elementen te plaatsen.

Soms hebben we een slimmer samenvoegen van elementen nodig, waardoor we vergelijkbare elementen kunnen groeperen (js-scripts samen, stylesheets samen enz.).

Om dat te bereiken, moeten we een sorteerstrategie aan onze configuratie toevoegen - in ons geval is dat de groeperingsstrategie:

engine.addDialect (nieuwe LayoutDialect (nieuwe GroupingStrategy ()));

of in XML:

De standaardstrategie is om elementen toe te voegen. Met bovenstaande hebben we alles gesorteerd en gegroepeerd.

Als geen van beide strategieën aan onze behoeften voldoet, kunnen we onze eigen strategie implementeren Sorteren Strategie en geef het door aan het dialect zoals hierboven.

4. Functies van naamruimte en kenmerkprocessors

Eenmaal geconfigureerd kunnen we beginnen met gebruiken indeling naamruimte en vijf nieuwe attribuutprocessors: versieren, titel-patroon, invoegen, vervangen, en fragment.

Om de lay-outsjabloon te maken die we voor onze HTML-bestanden willen gebruiken, hebben we het volgende bestand gemaakt met de naam template.html:

  ... 

Zoals we kunnen zien, hebben we de naamruimte gewijzigd ten opzichte van de standaard xmlns: th = "// www.thymeleaf.org" naar xmlns: layout = "// www.ultraq.net.nz/thymeleaf/layout".

Nu kunnen we gaan werken met attribuutprocessors in onze HTML-bestanden.

4.1. layout: fragment

Om aangepaste secties in onze lay-out of herbruikbare sjablonen te maken die kunnen worden vervangen door secties met dezelfde naam, gebruiken we fragment attribuut in ons template.html lichaam:

Uw pagina-inhoud komt hier
Mijn aangepaste voettekst
Uw aangepaste voettekst hier

Merk op dat er twee secties zijn die zullen worden vervangen door onze aangepaste HTML - inhoud en voettekst.

Het is ook belangrijk om de standaard HTML te schrijven die zal worden gebruikt als een van de fragmenten niet wordt gevonden.

4.2. indeling: versieren

De volgende stap die we moeten maken, is het maken van een HTML-bestand, dat wordt versierd met onze lay-out:

   Layout Dialect Voorbeeld 
Dit is een aangepaste inhoud die u kunt verstrekken
Dit is een voettekstinhoud die u kunt wijzigen

Zoals het wordt weergegeven in de 3e regel, gebruiken we indeling: versieren en specificeer de bron van de decorateur. Alle fragmenten uit het lay-outbestand die overeenkomen met fragmenten in een inhoudsbestand, worden vervangen door de aangepaste implementatie ervan.

4.3. layout: titel-patroon

Gezien het feit dat de Layout dialect overschrijft automatisch de titel van de lay-out met de titel die in de inhoudsjabloon wordt gevonden, het is mogelijk dat delen van de titel die in de lay-out worden gevonden, behouden blijven.

We kunnen bijvoorbeeld broodkruimels maken of de naam van de website behouden in de paginatitel. De layout: titel-patroon processor komt in zo'n geval met hulp. Het enige dat u in uw lay-outbestand hoeft op te geven, is:

Baeldung

Dus het uiteindelijke resultaat voor het lay-out- en inhoudsbestand gepresenteerd in de vorige paragraaf ziet er als volgt uit:

Baeldung - Voorbeeld van een lay-outdialect

4.4. layout: invoegen / layout: vervangen

De eerste processor, layout: invoegen, is vergelijkbaar met het origineel van Thymeleaf th: invoegen, maar laat toe om de volledige HTML-fragmenten door te geven aan de ingevoegde sjabloon. Het is erg handig als u HTML heeft die u opnieuw wilt gebruiken, maar waarvan de inhoud te complex is om te bepalen of te construeren met alleen contextvariabelen.

De tweede, layout: vervangen, is vergelijkbaar met de eerste, maar met het gedrag van th: vervangen, die de host-tag daadwerkelijk zal vervangen door de code van het gedefinieerde fragment.

5. Conclusie

In dit artikel hebben we enkele manieren beschreven om lay-outs in Thymeleaf te implementeren.

Merk op dat de voorbeelden de Thymeleaf versie 3.0 gebruiken; Volg deze procedure als u wilt leren hoe u uw project kunt migreren.

De volledige implementatie van deze tutorial is te vinden in het GitHub-project.

Hoe te testen? Onze suggestie is om eerst met een browser te spelen en daarna ook de bestaande JUnit-tests te controleren.

Onthoud dat u lay-outs kunt maken met behulp van het bovenstaande Layout Dialect of u kunt eenvoudig uw eigen oplossing creëren. Hopelijk geeft dit artikel u wat meer inzichten over het onderwerp en vindt u uw voorkeursbenadering afhankelijk van uw behoeften.