Menu
what I've done so far is this,But obviously it's not working. I want to use this header and footer in all the pages, how to make a shared layout and use it in other pages?? I have given the picture as well as the codes. Please help me with a sample code of an html page which is using the main_layout.html.
Since I'm very new to Thymeleaf there maybe stupid mistakes in the code.
Than you in advance.
HEADER.HTML
<header class="site-header" th:fragment="header">
<div class="container">
<a href="index.html" id="branding">
<img src="/dummy/logo.png" alt="Site Title">
<small class="site-description">Slogan goes
here</small>
</a> <!-- #branding -->
<nav class="main-navigation">
<button type="button" class="toggle-menu"><i class="fa
fa-bars"></i></button>
<ul class="menu">
<li class="menu-item"><a href="../views/index.html">Home</a></li>
<li class="menu-item"><a href="../views/about.html">About</a></li>
<li class="menu-item"><a href="../views/gallery.html">Gallery</a></li>
<li class="menu-item"><a href="../views/download.html">Download</a></li>
<li class="menu-item"><a href="../views/blog.html">Blog</a></li>
<li class="menu-item"><a href="../views/contact.html">Contact</a></li>
</ul> <!-- .menu -->
</nav> <!-- .main-navigation -->
<div class="mobile-menu"></div>
</div>
</header> <!-- .site-header -->
FOOTER.HTML
<footer class="site-footer" th:fragment="footer">
<div class="container">
<img src="dummy/logo-footer.png" alt="Site Name">
<address>
<p>495 Brainard St. Detroit, MI 48201 <br><a href="tel:354543543">(563) 429 234 890</a> <br> <a
href="mailto:[email protected]">[email protected]</a></p>
</address>
<form action="#" class="newsletter-form">
<input type="email" placeholder="Enter your email to
join newsletter...">
<input type="submit" class="button cut-corner" value="Subscribe">
</form> <!-- .newsletter-form -->
<div class="social-links">
<a href="#"><i class="fa fa-facebook-square"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
<a href="#"><i class="fa fa-pinterest"></i></a>
</div> <!-- .social-links -->
<p class="copy">Copyright 2014 Company Name. Designed by
Themezy. All right reserved</p>
</div>
</footer> <!-- .site-footer -->
MAIN_LAYOUT.HTML
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<!-- Loading third party fonts -->
<link href="http://fonts.googleapis.com/css?
family=Source+Sans+Pro:300,400,600,700,900" rel="stylesheet" type="text/css">
<link href="fonts/font-awesome.min.css" th:href="@{fonts/font-
awesome.min.css}" rel="stylesheet" type="text/css">
<!-- Loading main css file -->
<link rel="stylesheet" href="style.css">
<!--[if lt IE 9]>
<script src="js/ie-support/html5.js"></script>
<script src="js/ie-support/respond.js"></script>../../static/
<![endif]-->
</head>
<body class="header-collapse">
<div id="site-content">
<div th:replace="fragments/header::header"></div>
<div th:replace="fragments/footer::footer"></div>
</div> <!-- #site-content -->
<script th:src="@{js/jquery-1.11.1.min.js}"></script>
<script th:src="@{js/plugins.js}"></script>
<script th:src="@{js/app.js}"></script>
</body>
</html>
INDEX.HTML
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{fragments/main_layout}">
<head>
</head>
<body>
<div class="hero">
<div class="slider">
<ul class="slides">
<li class="lazy-bg" data-background="dummy/slide-1.jpg">
<div class="container">
<h2 class="slide-title">Header goes here</h2>
<h3 class="slide-subtitle">Less important text goes here</h3>
<p class="slide-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Fugiat
aliquid minus nemo sed est.</p>
<a href="#" class="button cut-corner">Read More</a>
</div>
</li>
<li class="lazy-bg" data-background="dummy/slide-2.jpg">
<div class="container">
<h2 class="slide-title">Header goes here</h2>
<h3 class="slide-subtitle">Less important text goes here</h3>
<p class="slide-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Fugiat
aliquid minus nemo sed est.</p>
<a href="#" class="button cut-corner">Read More</a>
</div>
</li>
<li class="lazy-bg" data-background="dummy/slide-3.jpg">
<div class="container">.........
Here is the Header, footer and the layout if anyone wants to edit and post.
The index is also given here , where i'm using the layout. but the output comes like as I'm showing in the 2nd image. And whatever I'm writing inside the index page as the content, nothing shows in the output.
521
You have missed to specify the place for page content, inside MAIN_LAYOUT.HTML:
<div id="site-content">
<div th:replace="fragments/header::header"></div>
<!-- ** div for content fragment - this was missed ** -->
<div layout:fragment="content"> Page content </div>
<div th:replace="fragments/footer::footer"></div>
</div> <!-- #site-content -->
Also, layout declared above should be included in INDEX.HTML so that thymeleaf can parse and place your content at this div.
<body>
<!-- ** layout container - this was missed **-->
<div layout:fragment="content">
<!-- your page content -->
</div
</body>
answered Dec 24 '25 17:12
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