Geek Answers Handbook

Head and title in Timeleaf

I'm starting a timelapse. I started with a general layout page:

snippets /layout.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>

And the content page:

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>

When I create a page, the title is always from the template, not from the page. Is it possible that Thymeleaf has metas, scripts, and style in common (in the HEAD tag), but for the title of each page?

+6
source share
5 answers

I also had this problem (Thanks nmy for the documentation link!) Here is what I noticed and how I solved it in my application:

What should be noted in the documentation:

  • Differences between th:include and th:replace
  • Linking to fragments using domselector instead of th:fragment
  • Thymeleaf provides the " this " option to select selectors

With these three things in mind, you can do the following:

snippets / layout.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>

Hope this helps!

+10
source

Discard parameterizable signature fragments .

Basically, in your snippet:

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

Then where you use it:

 <!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>
+6
source

You can even combine them;) On the template page, use the following.

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

In your case, this will resolve in:

 <title>Template title - Page Title</title>
+4
source

This work is for me ..

layout

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

page

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

on my controller

 m.addAttribute("pageTitle", "Dashboard Page");
+1
source

According to the documentation, th: include includes the contents of the fragment in the including div. This way you get the name of the template. You can use the attribute for the page title as follows and set its value in each controller.

 <head th:fragment="headerFragment"> <title>${pagetitle}</title> <!-- metas, link and scripts --> </head>

Alternatively, you can use mock dialects to achieve the same as described here. Thimeleaf and th layout layout dialog: replacing in the head causes the title to be empty

0
source

More articles:


All Articles