CODEWITHSUNDEEP
htmlthymeleaf
JohnPortella
JohnPortella

Reputation: 1821

Thymeleaf - Fragments with Layout

I'm doing my view based on a template, but there are some areas where I want to enter fragments.

Template : base.html

<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <head>
        <title>HELLO</title>             
    </head>
    <body>
        <div layout:fragment="content"></div>
        <footer>
            Year Template
        </footer>
    </body>
</html>

view: list.html

<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="base">
    <head th:replace="fragments/init :: head">
        <title>Title</title> 
    </head>
    <div  layout:fragment="content">
        <h1> <remove>List</remove> <small></small> </h1>       
    </div>
    <footer th:replace="fragments/init :: footer">
        Year List
    </footer>
</html>

Fragments : fragment/init.html

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head">
    <title>Title of Fragment</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
<body>
    <footer th:fragment="footer">
        2004 
    </footer>
</body>
</html>

With the head fragment, it works correctly. But in the footer, But in the footer, the code of the template is displayed.

Output:

<html lang="en"><head>
    <title>Title of Fragment</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
    <body screen_capture_injected="true">
        <div>
        <h1> <remove>List</remove> <small></small> </h1>        
    </div>
        <footer>
            Year Template
        </footer>
    </body>
</html>

I hope you can help me. Thanks in advance.

UPDATE

base.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
  <head>
    <title>Template title</title>    
  </head>
  <body>
    <header>
      <h1>Template Title</h1>
    </header>
    <section layout:fragment="content">
      <p>Text Template</p>
    </section>   
    <footer layout:fragment="footer">
        <p>Footer template</p>
    </footer>
  </body>
</html>

list.html

<!DOCTYPE html>
<html   xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorator="base">
  <head th:replace="fragments/init :: head">
    <title>Title List</title>    
  </head>
  <body>
    <section layout:fragment="content">
      <p>Content List page</p>        
    </section>    
    <footer layout:fragment="footer">
        <div layout:include="fragments/init :: extra" th:remove="tag">
            <p>Footer List page</p>
        </div>        
    </footer>  
  </body>
</html>

init.html

<!DOCTYPE html>
<html   xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <head layout:fragment="head">
        <title>Title of Fragment</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
    </head>
    <body>
         <div layout:fragment="extra">
             <p>Extra Content Fragment </p>             
         </div>    
    </body>
</html>

Output:

     <html xmlns="http://www.w3.org/1999/xhtml"><head>
        <title>Title of Fragment</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
</head>
  <body screen_capture_injected="true">
    <header>
      <h1>Template Title</h1>
    </header>
    <section>
      <p>Content List page</p>        
    </section>   
    <footer>

             <p>Extra Content Fragment </p>             

    </footer>

</body></html>

I managed to include the code fragment in the footer, but my goal is to replace it.

Solution:

<footer layout:fragment="footer" layout:include="fragments/init :: extra" th:remove="tag">
        <p>Footer List Page</p>
    </footer>

Upvotes: 5

Views: 29238

Answers (1)

Michiel Bijlsma
Michiel Bijlsma

Reputation: 583

The footer in your layout page doens't contain an fragment element, so the footer doesn't change.

The content page was 'decorated' by the elements of Layout.html, the result being a combination of the decorator page, plus the fragments of the content page (<head> elements from both pages with the <title> element from the content page taking place of the decorator's, all elements from the decorator, but replaced by all content page fragments where specified).

https://github.com/ultraq/thymeleaf-layout-dialect#decorators-and-fragments

Upvotes: 6

Related Questions