streamalism.org

1. Introduktion

Thymeleaf er en Java-skabelonmotor til behandling og oprettelse af HTML, XML, JavaScript, CSS og almindelig tekst. For en introduktion til Thymeleaf og Spring, se på denne opskrivning.

I denne opskrivning vil vi fokusere på skabeloner - noget, som de mest rimeligt komplekse websteder har brug for at gøre på den ene eller anden måde. Kort sagt, sider skal dele almindelige sidekomponenter som sidehoved, sidefod, menu og potentielt meget mere.

Thymeleaf adresserer det med brugerdefinerede dialekter - du kan oprette layout ved hjælp af Thymeleaf Standard Layout System eller den Layoutdialekt - der bruger dekoratørmønsteret til at arbejde med layoutfilerne.

I denne artikel vil vi diskutere en håndfuld funktioner i Thymeleaf Layout Dialect - som kan findes her. For at være mere specifik vil vi diskutere dens funktioner som at oprette layouts, brugerdefinerede titler eller fletning af hovedelementer.

2. Maven-afhængigheder

Lad os først se den nødvendige konfiguration, der er nødvendig for at integrere Thymeleaf med Spring. Det thymeleaf-spring bibliotek kræves i vores afhængigheder:

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

Bemærk, at for et Spring 4-projekt, thymeleaf-spring4 biblioteket skal bruges i stedet for thymeleaf-spring5. Den seneste version af afhængighederne kan findes her.

Vi har også brug for en afhængighed af brugerdefinerede layoutdialekt:

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

Den seneste version kan findes i Maven Central Repository.

3. Thymeleaf Layout Dialect Configuration

I dette afsnit vil vi diskutere, hvordan du konfigurerer Thymeleaf til brug Layoutdialekt. Hvis du vil tage et skridt tilbage og se, hvordan du konfigurerer Thymeleaf 3.0 i dit webapp-projekt, skal du tjekke denne vejledning.

Når vi først har tilføjet Maven-afhængighed som en del af et projekt, skal vi tilføje Layoutdialekt til vores eksisterende Thymeleaf-skabelonmotor. Vi kan gøre dette med Java-konfiguration:

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

Eller ved hjælp af XML-filkonfiguration:

Når du udsmykker sektionerne i indholdet og layoutskabelonerne, er standardadfærden at placere alle indholdselementer efter layoutene.

Nogle gange har vi brug for en smartere sammensmeltning af elementer, der gør det muligt at gruppere lignende elementer sammen (js scripts sammen, stilark sammen osv.).

For at opnå det skal vi tilføje sorteringsstrategi til vores konfiguration - i vores tilfælde vil det være grupperingsstrategien:

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

eller i XML:

Standardstrategien er at tilføje elementer. Med ovennævnte vil vi have alt sorteret og grupperet.

Hvis ingen af ​​strategierne passer til vores behov, kan vi implementere vores egne Sorteringstrategi og send det videre til dialekten som ovenfor.

4. Navneområde og attributprocessorers funktioner

En gang konfigureret kan vi begynde at bruge layout navneområde og fem nye attributprocessorer: dekorere, titel-mønster, indsæt, erstatteog fragment.

For at oprette den layoutskabelon, som vi vil bruge til vores HTML-filer, oprettede vi følgende fil med navnet skabelon.html:

  ... 

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

Nu kan vi begynde at arbejde med attributprocessorer i vores HTML-filer.

4.1. layout: fragment

For at oprette brugerdefinerede sektioner i vores layout eller genanvendelige skabeloner, der kan erstattes af sektioner, der har samme navn, bruger vi fragment attribut inde i vores skabelon.html legeme:

Dit sideindhold går her
Min brugerdefinerede sidefod
Din brugerdefinerede sidefod her

Bemærk, at der er to sektioner, der erstattes af vores brugerdefinerede HTML - indhold og sidefod.

Det er også vigtigt at skrive den standard HTML, der skal bruges, hvis nogen af ​​fragmenterne ikke findes.

4.2. layout: dekorere

Næste trin, vi skal lave, er at oprette en HTML-fil, der vil blive dekoreret af vores layout:

   Eksempel på layoutdialekt 
Dette er et brugerdefineret indhold, som du kan levere
Dette er noget sidefodsindhold, som du kan ændre

Som det vises i 3. linje bruger vi layout: dekorere og angiv dekoratørkilden. Alle fragmenter fra layoutfilen, der matcher fragmenter i en indholdsfil, erstattes af dens tilpassede implementering.

4.3. layout: titel-mønster

I betragtning af at Layoutdialekt automatisk tilsidesætter layoutets titel med den, der findes i indholdsskabelonen, kan du muligvis bevare dele af titlen, der findes i layoutet.

For eksempel kan vi oprette brødkrummer eller beholde webstedets navn i sidetitlen. Det layout: titel-mønster processor kommer med hjælp i et sådant tilfælde. Alt hvad du skal angive i din layoutfil er:

Baeldung

Så det endelige resultat for layout og indholdsfil præsenteret i det foregående afsnit vil se sådan ud:

Baeldung - Eksempel på layoutdialekt

4.4. layout: indsæt / layout: udskift

Den første processor, layout: indsæt, svarer til Thymeleafs original th: indsæt, men giver mulighed for at videregive hele HTML-fragmenterne til den indsatte skabelon. Det er meget nyttigt, hvis du har nogle HTML, som du vil genbruge, men hvis indhold er for komplekst til at bestemme eller konstruere med kontekstvariabler alene.

Den anden, layout: udskift, ligner den første, men med adfærd af th: udskift, som faktisk erstatter værtsmærket med det definerede fragments kode.

5. Konklusion

I denne artikel beskrev vi et par måder at implementere layout i Thymeleaf på.

Bemærk, at eksemplerne bruger Thymeleaf version 3.0; hvis du vil lære at migrere dit projekt, skal du følge denne procedure.

Den fulde implementering af denne vejledning kan findes i GitHub-projektet.

Hvordan tester man? Vores forslag er først at spille med en browser og derefter kontrollere de eksisterende JUnit-test også.

Husk, du kan oprette layout ved hjælp af ovennævnte Layoutdialekt eller du kan nemt oprette din egen løsning. Forhåbentlig giver denne artikel dig mere indsigt i emnet, og du finder din foretrukne tilgang afhængigt af dine behov.