-
How to extend the layout.
-
I want to replace this line
<code><div th:replace="${content}"></div></code><code><div th:replace="${content}"></div> </code><div th:replace="${content}"></div>
with the code of main.html.
My admin.html file
<code><!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Page</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<style>
/* Sidebar custom styling */
.sidebar {
background-color: #f8f9fa;
padding: 20px;
height: 100vh;
}
.sidebar a {
color: #000;
text-decoration: none;
display: block;
padding: 10px 0;
}
.sidebar a:hover {
background-color: #e2e6ea;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-3 col-lg-2 sidebar">
<ul class="list-unstyled">
<li><a href="/">Main</a></li>
<li><a href="home">Home</a></li>
<li><a href="aboutus">About Us</a></li>
</ul>
</div>
<!-- Main Content -->
<div class="col-md-9 col-lg-10">
<div th:fragment="content">
<div th:replace="${content}"></div>
</div>
</div>
</div>
</div>
</body>
</html>
</code>
<code><!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Page</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<style>
/* Sidebar custom styling */
.sidebar {
background-color: #f8f9fa;
padding: 20px;
height: 100vh;
}
.sidebar a {
color: #000;
text-decoration: none;
display: block;
padding: 10px 0;
}
.sidebar a:hover {
background-color: #e2e6ea;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-3 col-lg-2 sidebar">
<ul class="list-unstyled">
<li><a href="/">Main</a></li>
<li><a href="home">Home</a></li>
<li><a href="aboutus">About Us</a></li>
</ul>
</div>
<!-- Main Content -->
<div class="col-md-9 col-lg-10">
<div th:fragment="content">
<div th:replace="${content}"></div>
</div>
</div>
</div>
</div>
</body>
</html>
</code>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Page</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<style>
/* Sidebar custom styling */
.sidebar {
background-color: #f8f9fa;
padding: 20px;
height: 100vh;
}
.sidebar a {
color: #000;
text-decoration: none;
display: block;
padding: 10px 0;
}
.sidebar a:hover {
background-color: #e2e6ea;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-3 col-lg-2 sidebar">
<ul class="list-unstyled">
<li><a href="/">Main</a></li>
<li><a href="home">Home</a></li>
<li><a href="aboutus">About Us</a></li>
</ul>
</div>
<!-- Main Content -->
<div class="col-md-9 col-lg-10">
<div th:fragment="content">
<div th:replace="${content}"></div>
</div>
</div>
</div>
</div>
</body>
</html>
and main.html file is
<code><!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<!-- Extend the layout.html and inject the home-content -->
<div th:replace="layouts/admin :: content">
<div th:fragment="homecontent">
<div class="container">
<h1>Welcome to the Main Page</h1>
<p>This is the Main Page content area. You can place your website's content here.</p>
</div>
</div>
</div>
</body>
</html>
</code>
<code><!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<!-- Extend the layout.html and inject the home-content -->
<div th:replace="layouts/admin :: content">
<div th:fragment="homecontent">
<div class="container">
<h1>Welcome to the Main Page</h1>
<p>This is the Main Page content area. You can place your website's content here.</p>
</div>
</div>
</div>
</body>
</html>
</code>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<!-- Extend the layout.html and inject the home-content -->
<div th:replace="layouts/admin :: content">
<div th:fragment="homecontent">
<div class="container">
<h1>Welcome to the Main Page</h1>
<p>This is the Main Page content area. You can place your website's content here.</p>
</div>
</div>
</div>
</body>
</html>
If I go to main route like http://localhost:8080/
<code>
package com.groceryhub.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("")
public String getMethodName() {
return "admin/main/main";
}
@GetMapping("home")
public String home() {
return "admin/home/home";
}
}
</code>
<code>
package com.groceryhub.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("")
public String getMethodName() {
return "admin/main/main";
}
@GetMapping("home")
public String home() {
return "admin/home/home";
}
}
</code>
package com.groceryhub.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("")
public String getMethodName() {
return "admin/main/main";
}
@GetMapping("home")
public String home() {
return "admin/home/home";
}
}
I am getting the below error:
Caused by: org.thymeleaf.exceptions TemplateInputException: Error resolving fragment: “${content}”: template or fragment could not be resolved (template: “layouts/admin” – line 44, col 26)