Search code examples
layoutthymeleafdialect

Thymeleaf layout dialect and th:replace in head causes title to be blank


I'm following this tutorial: http://www.thymeleaf.org/doc/layouts.html (got to Thymeleaf Layout Dialect section). In 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>

Footer and header are replaced by th:replace tag in above example, while <head> has <title> tag in layout file.

Basically, I want to replace whole <head> tag with th:replace. 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 /html/components/head.htm file:

<!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 alright. Footer and head are included (replaced) from files as expected but page title is blank!

I get:

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

What's wrong?


Solution

  • Finally, I've found a way to achieve what I wanted.

    In layout file <title> tag must stay. All other tags I grouped with <object> tag and annotated it as follows:

    <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 <title> tag so it won't be duplicated after include.

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

    This way head fragment is included in <object> tag and thanks to th:remove="tag" <object> tag gets removed and my final HTML output is:

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

    Obviously, I removed NO TITLE TAG HERE message too, once I got it working.