то, что я сделал до сих пор, так это, но, очевидно, это не работает. Я хочу использовать этот верхний и нижний колонтитулы на всех страницах, как сделать общий макет и использовать его на других страницах ?? Я дал картинку, а также коды. Пожалуйста, помогите мне с примером кода страницы html, которая использует main_layout. html.
Поскольку я новичок в Thymeleaf, в коде могут быть глупые ошибки.
Чем вы заранее.
ЗАГОЛОВОК. 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:info@bandname.com">info@bandname.com</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">.........
Вот Верхний колонтитул, нижний колонтитул и макет, если кто-то хочет редактировать и публиковать. Здесь также указан индекс, где я использую макет. но результат выглядит так, как показано на втором изображении. И что бы я ни писал внутри страницы индекса в качестве содержимого, в выводе ничего не отображается.