如何使用 Thymeleaf 集成共享布局并在项目的所有 html 页面中使用该布局？答案

【问题标题】：how to integrate a shared layout using Thymeleaf and use that layout in all the html pages in the project?如何使用 Thymeleaf 集成共享布局并在项目的所有 html 页面中使用该布局？
【发布时间】：2020-08-23 14:59:04
【问题描述】：

到目前为止我所做的就是这样，但显然它不起作用。我想在所有页面中使用此页眉和页脚，如何制作共享布局并在其他页面中使用？我已经给出了图片和代码。请帮助我提供使用 main_layout.html 的 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>

索引.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">.........

如果有人想编辑和发布，这里是页眉、页脚和布局。这里也给出了索引，我正在使用布局。但输出就像我在第二张图片中显示的那样。无论我在索引页中作为内容写什么，输出中都不会显示任何内容。

【问题讨论】：

标签： java spring-boot spring-mvc thymeleaf template-engine

【解决方案1】：

您错过了在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 -->

此外，上面声明的layout 应包含在INDEX.HTML 中，以便thymeleaf 可以解析并将您的内容放置在此div 中。

<body> 
<!-- ** layout container - this was missed **-->
    <div layout:fragment="content">
    <!-- your page content -->
    </div
</body>

【讨论】：

它给出了错误。如果我保留这些片段，我的页面正在运行但以分散的方式显示。
感谢您的回答帮助。还有一个问题。 HEADER.HTML 中的那些链接不起作用。
@Souma ：检查此答案是否链接在 header.html 中不起作用 - stackoverflow.com/a/61700852/7505731