springBoot + Thymeleaf:包含片段

问题描述 投票:0回答:1

我有这个片段:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:fragment="common-header-imports">

    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport"

    <!-- Other meta tags -->

    <meta content="" name="ZRTHEMES"/>


    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&amp;family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&amp;family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&amp;display=swap"
          rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&amp;display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&amp;display=swap" rel="stylesheet">
    <!-- Vendor CSS Files -->
    <link href="assets/vendor/aos/aos.css" rel="stylesheet">
    <link href="assets/stylesheets/font-awesome.min.css" rel="stylesheet">
    <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
    <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
    <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <!-- Main CSS File -->
    <link href="assets/stylesheets/styles.css" rel="stylesheet">

    <link rel="stylesheet" th:href="@{/css/style-links.css}"/>
    <link rel="stylesheet" th:href="@{/css/responsive.css}"/>

</head>


</html>

还有这个:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<header th:fragment="common-header" id="header" class="header d-flex align-items-center sticked stikcy-menu">
    <div class="container-fluid container-xl d-flex align-items-center justify-content-between">
        <a href="index.html" class="logo d-flex align-items-center">
            <img src="assets/images/logo.png" alt="logo">
        </a>
        <nav id="navbar" class="navbar">
            <ul>
                <li><a href="/" class="">Home</a></li>
                <!--li><a href="services.html" class="">Services</a></li>
                <li><a href="portfolio.html" class="">Portfolio</a></li>
                <li><a href="testimonials.html" class="">Testimonials</a></li>
                <li><a href="team.html" class="">Team</a></li>
                <li class="dropdown"><a href="#"><span>Menu</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
                    <ul>
                        <li><a href="about.html">About</a></li>
                        <li><a href="packages.html">Pricing</a></li>
                        <li><a href="faqs.html">FAQs</a></li>
                        <li><a href="privacy-policy.html">Terms &amp; Conditions</a></li>
                        <li><a href="privacy-policy.html">Privacy Policy</a></li>
                        <li><a href="blogs.html">Blogs</a></li>
                        <li><a href="blog-details.html">Blog Detail Page</a></li>
                    </ul>
                </li-->
                <li><a href="/blogs">News</a></li>
            </ul>
        </nav><!-- .navbar -->
        <!--a href="contact.html" class="btn-get-started hide-on-mobile">Get Quotes</a-->
        <button id="darkmode-button"><i class="bi bi-moon-fill"></i></button>
        <i class="mobile-nav-toggle mobile-nav-show bi bi-list"></i>
        <i class="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
    </div>
</header>


</html>

还有这个:

<!DOCTYPE html>
<html lang="zxx">


<head th:replace="~{common/headerImports :: common-header-imports}">
    <title>title</title>
</head>


<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-RZXQZB1MDJ"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-RWXQZB9MDJ');
</script>

<body>
<header th:replace="~{common/header :: common-header}">
....
</html>

但我只看到一个白色页面,没有加载任何内容

html spring-boot spring-mvc thymeleaf spring-thymeleaf
1个回答
0
投票

每当您遇到此类问题时,从浏览器检查页面源并查看实际生成的内容以及请求的响应以查看从服务器接收到的内容非常有意义。

确保您的脚本位于

head
body
内,因此移动此:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-RZXQZB1MDJ"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-RWXQZB9MDJ');
</script>

进入 Google 指示您移动的位置,大概位于

head
标签的末尾(在其内部)。根据您共享的内容,您似乎已将
html
嵌入到另一个
html
中,并且您已将内容放在
head
body
之外。解决这些问题。

此外,很可能发生了一些服务器端错误,因此您需要检查请求的状态以及可能的服务器日志。您也可以检查客户端控制台是否存在客户端问题。

并确保正确嵌入片段。

如果以上所有内容都经过仔细检查并修复,那么它应该可以工作。

© www.soinside.com 2019 - 2024. All rights reserved.