Menu
I'm a Thymeleaf beginner. I started with a common layout page:
fragments/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 a 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 render the page, the title is always from the template, not from the page. Is it possible in Thymeleaf to have metas, scripts and style in common (in the HEAD tag) but to have a per-page title?
571
In this case, you should use th:text . For example, Username: <p th:text=${account. username}>Username will be rendered here</p> . Note that, the text inside p tag won't be shown.
You can use th:utext attribute that stands for unescaped text (see documentation). Use this with caution and avoid user input in th:utext as it can cause security problems.
This is the default behaviour of the th:text attribute. If we want Thymeleaf to respect our XHTML tags and not escape them, we will have to use a different attribute: th:utext (for “unescaped text”): <p th:utext="#{home.welcome}">Welcome to our grocery store!</
I was also having this problem (Thank you nmy for referencing the documentation!) Here is what I noticed and how I solved it in my app:
Things to note from the documentation:
th:include and th:replace th:fragment this" option for finding selectorsWith these 3 things in mind, you can do the following:
fragments/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!
122
This is the best solution i found:
<th:block th:fragment="header"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" charset="UTF-8"/> <meta name="_csrf" th:content="${_csrf.token}"/> <meta name="_csrf_header" th:content="${_csrf.headerName}"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> <!-- Bootstrap Css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/> <!-- Fontawesome css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> <!-- JQuery --> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </th:block><head> <div th:replace="fragments/headerFragment :: header"></div> <title>Example</title> <script src="customStuff"></script> </head>So in the end you can have one fragment containing all the scripts and css you need in all your pages and just add it to your headers, while still being able to ad some custom css, scripts or what ever
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
