All geek questions in one place

Thimeleaf and th layout layout dialog: replacing in the head causes the title to be empty

I follow this guide: http://www.thymeleaf.org/doc/layouts.html (got into the timeline dialect section). There you can find an example:

<!DOCTYPE html> <html> <head> <!--/* Each token will be replaced by their respective titles in the resulting page. */--> <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">Task List</title> ... </head> <body> <!--/* Standard layout can be mixed with Layout Dialect */--> <div th:replace="fragments/header :: header"> ... </div> <div class="container"> <div layout:fragment="content"> ... </div> <div th:replace="fragments/footer :: footer">&copy; 2014 The Static Templates</div> </div> </body> </html>

The footer and header are replaced with the th:replace tag in the above example, and the <head> has the <title> in the layout file.

Basically, I want to replace the <head> tag with the whole th:replace tag. Therefore, I have:

My layout file:

 <!DOCTYPE html> <html> <head th:replace="/html/components/head :: head"> </head> <body> <div layout:fragment="content"> </div> ... <div th:replace="/html/components/footer :: footer" /> </body> <html>

My content file:

 <!DOCTYPE html> <html layout:decorator="/html/layouts/layout"> <head> <title>My content title</title> </head> <body> <div layout:fragment="content"> ... </div> </body> </html>

And finally my file /html/components/head.htm:

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head th:fragment="head"> <meta charset="utf-8" /> <title layout:title-pattern="$CONTENT_TITLE">Layout Title should be replaced by Content Title!</title> ... </head> <body> </body> </html>

Content is OK. The footer and head are included (replaced) from the files as expected, but the page title is empty!

I get:

 <!DOCTYPE html> <head> <meta charset="utf-8" /> <title></title> ...

What's wrong?

+6
source share
3 answers

Finally, I found a way to achieve what I wanted.

The tag should remain in the <title> layout file. All the other tags that I grouped with the <object> and annotated it like this:

 <head> <title layout:title-pattern="$CONTENT_TITLE">Layout Title will be replaced by Page Title!</title> <object th:include="/html/components/head :: head" th:remove="tag" /> </head>

In my html / components / head.htm file, I had to remove the <title> tag so that it would not be duplicated after inclusion.

 <head th:fragment="head"> <meta charset="utf-8" /> <!-- NO TITLE TAG HERE --> ... </head>

This head fragment is included in the <object> , and thanks to the th:remove="tag" <object> tag, the tag is removed, and my last HTML output is:

 <head> <title>My content title</title> <meta charset="utf-8" /> <!-- NO TITLE TAG HERE --> ... </head>

Obviously, I deleted the message NO TITLE TAG HERE as soon as I earned it.

+25
source

I think I found a slightly less accurate way to use th:replace and th:fragment together, for example. including the shared <head> metadata and the static resource included in your pages.

Put th:remove="tag" in the fragment definition, so you do not need to repeat th:remove="tag" every time, including it.

fragment_head.html

 <thymeleaf xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" th:fragment="head" th:remove="tag"> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" th:href="@{/css/vendor/bootstrap.min.css}"/> </thymeleaf>

mypage.html

 <head> <thymeleaf th:replace="fragment_head :: head" /> </head>
+6
source

You can replace the entire tag.

 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head lang="pl" th:replace="fragments/head :: head"> </head> <body> ... </body> </html>

resources / templates / snippets / head.html:

  <head lang="pl"> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.5/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/3.3.5/css/bootstrap.min.css}" rel="stylesheet" media="screen" /> <script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.min.js" th:src="@{/webjars/jquery/2.1.4/jquery.min.js}"></script> <link href="../static/css/mycss.css" th:href="@{css/mycss.css}" rel="stylesheet" media="screen"/> </head>
+1
source

Source: https://habr.com/ru/post/977427/

More articles:


All Articles