Spring Boot+Thymeleaf网页头部、Logo及导航栏不显示求助

问题现象 #

页面主体内容可正常显示，但头部标题、Logo图片以及顶部导航栏均未加载显示，代码无语法错误，怀疑模板引用或资源路径配置存在问题。

common.html 文件内容 #

<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <div th:fragment="header">
        <h1>Welcome to my CST-339 Spring Boot Activity Application</h1>
    </div>
    <div class="bs-example">
        <nav class="navbar navbar-default">
            <div class="navbar-header">
                <button type="button" data-target="navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">GCU</a>
            </div>
            <div id="navbarCollapse" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="https://www.gcu.edu" target="_blank">Home</a>
                    </li>
                    <li>
                        <a href="https://www.lopeshops.edu" target="_blank">Shop</a>
                    </li>
                    <li>
                        <a href="https://www.news.edu" target="_blank">News and Events</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/">Start Page</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <h2 th:text="${title}">Default Message Text</h2><br />
    <img th:src="@{/static/images/gcu-logo.jpg}" /><br /><br />
<div th:fragment="footer">
    <h5 style="color:purple; text-align: center; position: fixed; bottom: 0; width: 100%;">Copyright 2020 Grand Canyon University</h5>  
</div>
</html>

defaultTemplate.html 文件内容 #

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title> CST-339 Spring Boot Activity Application</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css.bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css.bootstrap-theme.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.0/css/responsive.dataTables.css">
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="//cdn.datatables.net/responsive/2.2.0/js/dataTables.responsive.js"></script>
        <style type="text/css">.bs-example {margin: 20px; }</style>
    </head>
    
    <body>
        <div align="center">
            <div th:replace="~{layouts/common :: header}">My Header</div>
            <section layout:fragment="content">
                <p>My Body Contents</p>
            </section>
            <div th:replace="~{layouts/common :: footer}">My Footer</div>
        </div>
    </body>
</html>

问题根源及修复方案 #

1. 模板片段范围不全：common.html中的导航栏、h2标题、Logo图片都不在header或footer片段内，而defaultTemplate仅引用了这两个片段，导致这些元素无法被渲染到页面。

   • 修复：将导航栏、h2、Logo移入header片段，或者新增独立片段并在defaultTemplate中添加引用。

2. Bootstrap资源路径错误：defaultTemplate中Bootstrap CSS的链接路径存在语法错误，css.bootstrap.min.css应为css/bootstrap.min.css，两个Bootstrap CSS链接均存在此问题，导致样式无法加载，导航栏可能因无样式而显示异常。

   • 修复：修正Bootstrap CSS的链接路径，将.改为/。

3. 静态资源路径错误：Spring Boot中Thymeleaf的静态资源默认映射路径为/static/，使用@{}语法时无需额外添加static，当前Logo路径@{/static/images/gcu-logo.jpg}会导致资源找不到。

   • 修复：将Logo路径改为@{/images/gcu-logo.jpg}。

内容的提问来源于stack exchange，提问作者Mitchell