Menu
I recently started working with thymeleaf template engine in spring. What I want to achieve is - If my controller is this
@RequestMapping(value="/", method=RequestMethod.GET)
public String index() {
return "homePage";
}
Then I want write HTML code in homePage.html without complete HTML definition like head, title, body etc.
<div>This is home page content</div>
Dont want to write in homePage.html like this.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
<title>Spring MVC Example</title>
</head>
<body>
<div th:include="fragments/header::head"></div>
<div>This is home page content</div>
<div th:include="fragments/footer::foot"></div>
</body>
I prefer to take head part for header fragment, content from controller and footer from footer fragment.
So in total - How I can achieve this:
/fragment/header.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
<title>Spring MVC Example</title>
</head>
<body>
/home.html
<div>This is home page content</div>
(this throw error)
/fragment/footer.html
</body>
</html>
Note: I already seen these examples
710
Creating a layout You can also notice, that header and footer are included using Standard Thymeleaf Layout System. Content of this task/list view will be decorated by the elements of task/layout view. Please note layout:decorate="~{task/layout}" attribute in <html> element.
It provides full integration with Spring Framework. It applies a set of transformations to template files in order to display data or text produced by the application. It is appropriate for serving XHTML/HTML5 in web applications. The goal of Thymeleaf is to provide a stylish and well-formed way of creating templates.
While Thymeleaf is more of a template engine for server-side application development. But Thymeleaf's popularity is on a steady rise. The developer community is slowly moving away from 'once a common' MVC framework for Javascript-based development.
Thymeleaf is a great templating engine which replaces JSP, and you can easily use it in any Spring MVC or Spring Boot application. Unlike JSP it's a pleasure to use.
This is how I achieved it.
Step 1: Create default layout file
resources/templates/layouts/default.html
<!DOCTYPE html>
<html>
<head th:replace="fragments/header :: head"></head>
<body>
<div class="container">
<div layout:fragment="content"></div>
<div th:replace="fragments/footer :: footer"></div>
</div>
</body>
</html>
Step 2: Create your header and footer fragments.
/resources/templates/fragments/header.html
<head th:fragment="head">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta content="ie=edge" http-equiv="x-ua-compatible" />
<title th:text="${metaTitle} ? ${metaTitle} : 'default title'"></title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
<link rel="stylesheet" href="/css/style.css"/>
</head>
/resources/templates/fragments/footer.html
<div class="footer text-center" th:fragment="footer">
<p> <a href="#"> Terms of Use</a> | <a href="#">What's New</a> | <a href="#">Help</a> </p>
<!-- javascripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js">
</script>
</div>
Step 3: Create your home page
/resources/templates/home.html
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layouts/default">
<body>
<div id="page" layout:fragment="content">
<div>This is home page content</div>
</div>
</body>
</html>
Step 4 (Spring Boot 2): Add dependency to pom.xml
/pom.xml
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
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