Change Web Page Title Dynamically - Thymeleaf Examples

Hi Guys,

Welcome To Java Inspires 😀

In this post, we will see how to change html page title dynamically using thymeleaf th:text.

Here we create two html pages index.html and home.html, we set these page titles from the controller using model attribute.

First Create a simple spring boot application from https://start.spring.io/ by adding web and thymleaf starter.

Project Structure:

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.3.4.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.javainspires</groupId>
	<artifactId>thymeleaf-title-change</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>thymeleaf-title-change</name>
	<description>Demo project for Spring Boot + Thymeleaf</description>

	<properties>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
			<exclusions>
				<exclusion>
					<groupId>org.junit.vintage</groupId>
					<artifactId>junit-vintage-engine</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

#Thymeleaf Configuration
spring.thymeleaf.prefix= classpath:/pages/
spring.thymeleaf.suffix= .html

<!-- #JavaInspires -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title th:text="${title}"></title>
</head>
<body>
	<div align="center">
		<h1>check page title</h1>
	</div>
</body>
</html>

<!-- #JavaInspires -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title th:text="${title}"></title>
</head>
<body>
	<div align="center">
		<h1>check page title</h1>
	</div>
</body>
</html>

package com.javainspires.thymeleaftitlechange;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

/**
 * 
 * @author #JavaInspires
 *
 */
@Controller
public class PageController {

	@GetMapping(path = "/")
	public String getIndexPage(Model model) {

		model.addAttribute("title", "Index Page");
		return "index";
	}

	@GetMapping(path = "/home")
	public String getHomePage(Model model) {

		model.addAttribute("title", "Home Page");
		return "home";
	}
}

package com.javainspires.thymeleaftitlechange;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
/**
 * 
 * @author #JavaInspires
 *
 */
@SpringBootApplication
public class ThymeleafTitleChangeApplication {

	public static void main(String[] args) {
		SpringApplication.run(ThymeleafTitleChangeApplication.class, args);
	}

}

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v2.3.4.RELEASE)

2020-09-20 09:31:50.641  INFO 4320 --- [           main] c.j.t.ThymeleafTitleChangeApplication    : Starting ThymeleafTitleChangeApplication on DESKTOP-9LT6E5T with PID 4320 (C:\Users\#JavaInspires\Desktop\thymeleaf-title-change\thymeleaf-title-change\target\classes started by #JavaInspires in C:\Users\#JavaInspires\Desktop\thymeleaf-title-change\thymeleaf-title-change)
2020-09-20 09:31:50.648  INFO 4320 --- [           main] c.j.t.ThymeleafTitleChangeApplication    : No active profile set, falling back to default profiles: default
2020-09-20 09:31:54.275  INFO 4320 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 8080 (http)
2020-09-20 09:31:54.297  INFO 4320 --- [           main] o.apache.catalina.core.StandardService   : Starting service [Tomcat]
2020-09-20 09:31:54.297  INFO 4320 --- [           main] org.apache.catalina.core.StandardEngine  : Starting Servlet engine: [Apache Tomcat/9.0.38]
2020-09-20 09:31:54.439  INFO 4320 --- [           main] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring embedded WebApplicationContext
2020-09-20 09:31:54.439  INFO 4320 --- [           main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 3688 ms
2020-09-20 09:31:54.695  INFO 4320 --- [           main] o.s.s.concurrent.ThreadPoolTaskExecutor  : Initializing ExecutorService 'applicationTaskExecutor'
2020-09-20 09:31:54.789  INFO 4320 --- [           main] o.s.b.a.w.s.WelcomePageHandlerMapping    : Adding welcome page template: index
2020-09-20 09:31:55.015  INFO 4320 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 8080 (http) with context path ''
2020-09-20 09:31:55.037  INFO 4320 --- [           main] c.j.t.ThymeleafTitleChangeApplication    : Started ThymeleafTitleChangeApplication in 5.065 seconds (JVM running for 6.728)

Screenshots:

SS1

SS2

THANK YOU 😀

Change Web Page Title Dynamically - Thymeleaf Examples | Java Inspires

Post a Comment

Contact Form