I'm using Thymeleaf 3 with a base layout (base.html) and a child template (index.html). The header and footer from the layout are showing up correctly, but the child content (hero section, etc.) is never injected into the final rendered page. In the browser’s actual HTML source (via F12 → View Page Source), I only see the base layout’s element remaining empty. The child blocks do not appear at all.
I’ve tried using th:replace="~{base :: layout}" on the child and th:fragment="content" in both files, ensuring the names match, and I’ve verified my target/classes/templates/index.html contains all the hero/section code. Still, the final merged HTML only includes header and footer.
How can I make Thymeleaf properly inject the child’s content into the base layout’s area? I've tried clearing caches, rebuilding the project, and verifying I have matching fragment names, but the child sections never appear.
+---src
| +---main
| | +---java
| | | \---com
| | | \---vaa
| | | | VaaApplication.java
| | | |
| | | +---config
| | | | AppConfig.java
| | | | SecurityConfig.java
| | | | WebConfig.java
| | | |
| | | +---controller
| | | | AdminController.java
| | | |
| | | +---converter
| | | | StringToCategoryConverter.java
| | | |
| | | +---model
| | | | ActivityLog.java
| | | | Category.java
| | | |
| | | +---repository
| | | | ActivityLogRepository.java
| | | |
| | | +---security
| | | | CustomAuthenticationFailureHandler.java
| | | |
| | | +---service
| | | | ActivityLogService.java
| | | | ActivityLogServiceImpl.java
| | | |
| | | \---util
| | | LogUtils.java
| | |
| | \---resources
| | | application.properties
| | |
| | +---static
| | | \---css
| | | custom.css
| | |
| | \---templates
| | | access-denied.html
| | | index.html
HomeController.java :
package com.vaa.controller;
import .springframework.stereotype.Controller;
import .springframework.ui.Model;
import .springframework.web.bind.annotation.GetMapping;
/**
* Ana sayfa denetleyicisi.
*/
@Controller
public class HomeController {
@GetMapping("/")
public String home(Model model) {
return "index";
}
}
base.html :
<!DOCTYPE html>
<html xmlns:th="" th:fragment="layout">
<head>
<meta charset="UTF-8">
<title th:fragment="title">Vaa</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
th:href="@{/[email protected]/dist/css/bootstrap.min.css}" />
<!-- Custom CSS -->
<link rel="stylesheet" th:href="@{/css/custom.css}" />
</head>
<body>
<!-- Ortak Navbar -->
<header th:replace="~{fragments/header :: header}"></header>
<!-- Çocuk şablon içerikleri buraya “enjekte” edilecek -->
<main th:fragment="content">
<!-- Varsayılan boş (fallback) içerik -->
</main>
<!-- Ortak Footer -->
<footer th:replace="~{fragments/footer :: footer}" class="mt-5"></footer>
<!-- Bootstrap JS -->
<script th:src="@{/[email protected]/dist/js/bootstrap.bundle.min.js}"></script>
</body>
</html>