Thymeleaf 模板片段复用实践

少了一层，样式全乱

抽片段

新建 templates/fragments/site-footer.html：

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">
<body>
<footer th:fragment="site-footer" class="ui inverted vertical segment">
    <div class="ui container">
        <p>© 2020-2026 一颗星的博客</p>
        <p>
            <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener nofollow">
                蜀ICP备2021032163号-2
            </a>
        </p>
    </div>
</footer>
</body>
</html>

页面里引用：

<div th:replace="~{fragments/site-footer :: site-footer}"></div>

以后改备案号，只动这一个文件。

带参数的片段

导航需要在不同页面高亮不同的菜单项，片段就要带参数：

<nav th:fragment="site-nav(active, hidden)" class="gird-header"
     th:id="${hidden} ? 'nav' : null"
     th:style="${hidden} ? 'display:none' : null">
    <a th:href="@{/}" th:classappend="${active == 'index'} ? 'active'">首页</a>
    <a th:href="@{/archives}" th:classappend="${active == 'archives'} ? 'active'">时间轴</a>
</nav>

调用：

<nav th:replace="~{fragments/site-nav :: site-nav(active='index', hidden=false)}"></nav>

th:id="${hidden} ? 'nav' : null" 这个写法很实用：表达式返回 null 时，Thymeleaf 会把这个属性整个去掉，而不是渲染成 id="null"。

几个坑

片段文件里也要写 xmlns:th，否则编辑器不认 th:* 属性。

th:replace 会替换掉整个宿主标签，th:insert 才是插到标签内部。前者适合