Spring thymeleaf header and footer dynamic includes

Question

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

Can you paste the error you get when you include footer?

Iwo Kucharski
– Iwo Kucharski

2016-04-17 16:21:31 +00:00
Commented Apr 17, 2016 at 16:21 — Iwo Kucharski
– Iwo Kucharski, Commented Apr 17, 2016 at 16:21

VK321 · Accepted Answer · 2018-03-18 08:16:44Z

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>

I had to mention paths like this : <div th:replace="/layouts/fragments/footer :: footer"></div> to make it work for me

Joostje123 · Accepted Answer · 2016-04-22 12:39:40Z

I solved this like this:

Controller directs to index.html and gives the attribute of the "content page"

@RequestMapping(value={"/"}) public String root(Locale locale, ModelMap model) { model.addAttribute("content", "helloWorldView"); return "index"; }

This is my index.html:

<!DOCTYPE html> <html lang="en"> <head lang="en" th:replace="fragments/header :: header"> </head> <body> <div class="container"> <div th:replace="@{'views/' + ${content}} :: ${content}"></div> </div> <div lang="en" th:replace="fragments/footer :: footer"> </div> </body> </html>

So i have a folder fragments with header and footer:

fragments/header.html

<head th:fragment="header"> //css includes etc title </head>

fragments/footer.html

<div th:fragment="footer"> //scripts includes </div>

And in my folder views i got all the views with content views/helloWorldView.html:

<div th:fragment="helloWorldView"> //Content </div>

Hi @Joostje thanks for answer but i am not looking for this way. In index I only want content and in header I want <!DOCTYPE html> <html lang="en"> etc.
How can you extend this so that the content view changes depending on which menu item you click?

Collectives™ on Stack Overflow

Spring thymeleaf header and footer dynamic includes

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related