streamalism.org

1. Introduksjon

Thymeleaf er en Java-malmotor for behandling og oppretting av HTML, XML, JavaScript, CSS og ren tekst. For en introduksjon til Thymeleaf og Spring, ta en titt på denne oppskriften.

I denne oppskriften vil vi fokusere på mal - noe som rimeligst komplekse nettsteder trenger å gjøre på en eller annen måte. Enkelt sagt, sider må dele vanlige sidekomponenter som topptekst, bunntekst, meny og potensielt mye mer.

Thymeleaf adresserer det med tilpassede dialekter - du kan bygge oppsett ved hjelp av Thymeleaf Standard Layout System eller Layoutdialekt - som bruker dekoratørmønsteret for å jobbe med layoutfilene.

I denne artikkelen vil vi diskutere en håndfull funksjoner av Thymeleaf Layout Dialect - som finner du her. For å være mer spesifikk, vil vi diskutere funksjonene som å lage oppsett, tilpassede titler eller sammenslåing av hodelement.

2. Maven-avhengigheter

La oss først se den nødvendige konfigurasjonen som trengs for å integrere Thymeleaf med Spring. De thymeleaf-våren bibliotek kreves i våre avhengigheter:

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

Merk at, for et Spring 4-prosjekt, thymeleaf-spring4 biblioteket må brukes i stedet for thymeleaf-spring5. Den siste versjonen av avhengighetene finner du her.

Vi trenger også en avhengighet for tilpassede oppsettdialekt:

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

Den siste versjonen finner du på Maven Central Repository.

3. Dialogkonfigurasjon for Thymeleaf Layout

I denne delen vil vi diskutere hvordan du konfigurerer Thymeleaf til bruk Layoutdialekt. Hvis du vil ta et skritt tilbake og se hvordan du konfigurerer Thymeleaf 3.0 i webapprosjektet ditt, kan du sjekke denne veiledningen.

Når vi legger til Maven-avhengighet som en del av et prosjekt, må vi legge til Layoutdialekt til vår eksisterende Thymeleaf malmotor. Vi kan gjøre dette med Java-konfigurasjon:

SpringTemplateEngine engine = ny SpringTemplateEngine (); engine.addDialect (ny LayoutDialect ());

Eller ved å bruke XML-filkonfigurasjon:

Når du dekorerer delene av innholdet og layoutmalene, er standard oppførsel å plassere alle innholdselementene etter layoutene.

Noen ganger trenger vi en smartere sammenslåing av elementer, slik at vi kan gruppere lignende elementer sammen (js-skript sammen, stilark sammen osv.).

For å oppnå det, må vi legge til sorteringsstrategi i konfigurasjonen - i vårt tilfelle vil det være grupperingsstrategien:

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

eller i XML:

Standardstrategien er å legge til elementer. Med ovennevnte vil vi ha alt sortert og gruppert.

Hvis ingen av strategiene passer våre behov, kan vi implementere våre egne Sorteringstrategi og før den videre til dialekten som ovenfor.

4. Navnerom og attributtprosessorens funksjoner

En gang konfigurert kan vi begynne å bruke oppsett navneområde og fem nye attributtprosessorer: dekorere, tittelmønster, sett inn, erstatte, og fragment.

For å lage layoutmalen som vi vil bruke for HTML-filene våre, opprettet vi følgende fil, med navnet mal.html:

  ... 

Som vi kan se, endret vi navneområdet fra standarden xmlns: th = ”// www.thymeleaf.org” til xmlns: layout = ”// www.ultraq.net.nz/thymeleaf/layout”.

Nå kan vi begynne å jobbe med attributtprosessorer i HTML-filene.

4.1. layout: fragment

For å lage tilpassede seksjoner i oppsettet eller gjenbrukbare maler som kan erstattes av seksjoner som har samme navn, bruker vi fragment attributt inne i vår mal.html kropp:

Sideinnholdet ditt kommer hit
Min egendefinerte bunntekst
Din tilpassede bunntekst her

Legg merke til at det er to seksjoner som vil bli erstattet av vår tilpassede HTML - innhold og bunntekst.

Det er også viktig å skrive standard HTML som skal brukes hvis noen av fragmentene ikke blir funnet.

4.2. layout: dekorere

Neste trinn vi må gjøre er å lage en HTML-fil, som vil bli dekorert av oppsettet vårt:

   Layoutdialekteksempel 
Dette er et tilpasset innhold som du kan tilby
Dette er noe bunntekstinnhold som du kan endre

Som det er vist i 3. linje, bruker vi layout: dekorere og spesifiser dekoratørkilden. Alle fragmenter fra layoutfilen som samsvarer med fragmenter i en innholdsfil, blir erstattet av den tilpassede implementeringen.

4.3. layout: tittelmønster

Gitt at Oppsett dialekt automatisk overstyrer oppsettets tittel med den som finnes i innholdsmalen, kan det hende du kan bevare deler av tittelen som finnes i oppsettet.

For eksempel kan vi lage brødsmuler eller beholde navnet på nettstedet i sidetittelen. De layout: tittelmønster prosessor kommer med hjelp i et slikt tilfelle. Alt du trenger å spesifisere i layoutfilen din er:

Baeldung

Så det endelige resultatet for layout og innholdsfil presentert i forrige avsnitt vil se slik ut:

Baeldung - Eksempel på oppsettdialekt

4.4. layout: sett inn / layout: erstatt

Den første prosessoren, layout: sett inn, ligner på Thymeleafs original th: sett inn, men lar deg overføre hele HTML-fragmentene til den innsatte malen. Det er veldig nyttig hvis du har litt HTML du vil bruke på nytt, men hvis innhold er for komplisert til å bestemme eller konstruere med kontekstvariabler alene.

Den andre, layout: erstatt, ligner på den første, men med oppførselen til th: erstatt, som faktisk vil erstatte vertskoden med det definerte fragmentets kode.

5. Konklusjon

I denne artikkelen beskrev vi noen måter å implementere oppsett i Thymeleaf på.

Merk at eksemplene bruker Thymeleaf versjon 3.0; Hvis du vil lære hvordan du overfører prosjektet, kan du følge denne fremgangsmåten.

Den fulle implementeringen av denne veiledningen finner du i GitHub-prosjektet.

Hvordan teste? Vårt forslag er å spille med en nettleser først, og deretter sjekke de eksisterende JUnit-testene også.

Husk at du kan lage oppsett ved hjelp av ovennevnte Layoutdialekt eller du kan enkelt lage din egen løsning. Forhåpentligvis gir denne artikkelen deg litt mer innsikt i emnet, og du vil finne din foretrukne tilnærming avhengig av dine behov.