Menu
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>
955
There are three basic ways to include content from a fragment: insert – inserts content inside the tag. replace – replaces the current tag with the tag defining the fragment. include – this is deprecated but it may still appear in a legacy code.
The Thymeleaf Layout Dialect adds the ability to decorate templates - automatically for the <head> section of an HTML template, and explicitly through extension points that developers can add to their templates. This all adds up to create layouts that can be extended in a manner similar to classical inheritence.
Thymeleaf is way better in my opinion because it have good underlying priciples and exploits natural behaviour of browsers. Jsp makes html hard to read, it becomes weird mixture of html and java code which makes a lot of problems in comunication between designer - developer.
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
107
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
