如何在Thymeleaf布局装饰器中添加页面专属script标签？

嘿，我来帮你搞定这个问题！针对你用Thymeleaf Layout Dialect搭建的模板布局场景，有两种实用的方式给特定页面添加专属的script标签，我给你详细说说：

方法一：直接在页面的内容Fragment中嵌入脚本 #

这种方式最简单直接，适合脚本逻辑和当前页面内容紧密关联的场景。你只需要在index.html的custom-content片段里直接添加script标签就行：

<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="template">
  <body>
    <section layout:fragment="custom-content">
      PAGE SPECIFIC CONTENT ...
      
      <!-- 这里就是index页面专属的脚本 -->
      <script>
        // 写你需要的页面专属逻辑
        console.log('这是index页面独有的脚本输出！');
        document.querySelector('.some-element').addEventListener('click', function() {
          // 你的点击事件逻辑
        });
      </script>
    </section>
  </body>
</html>

渲染完成后，这段脚本会被插入到模板中custom-content对应的位置，完全属于当前页面。

方法二：新增专门的脚本Fragment（更优雅的方案） #

如果希望脚本和内容分离，或者想统一控制所有页面脚本的加载位置（比如放在body末尾优化性能），可以给模板新增一个专门的脚本片段：

第一步：修改template.html，添加脚本Fragment #

<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
  <body>
    ...
    <section layout:fragment="custom-content"> DEFAULT CONTENT GOES HERE </section>
    
    <!-- 新增一个用于放置页面专属脚本的Fragment，默认可以是空的，也能放全局脚本 -->
    <section layout:fragment="page-specific-scripts">
      <!-- 这里可以放所有页面都需要的全局脚本，比如jQuery、全局工具类 -->
      <script src="/js/global-utils.js"></script>
    </section>
  </body>
</html>

第二步：在index.html中实现这个脚本Fragment #

<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="template">
  <body>
    <section layout:fragment="custom-content">
      PAGE SPECIFIC CONTENT ...
    </section>
    
    <!-- 实现专属脚本的Fragment，会覆盖模板中的对应部分（如果需要保留全局脚本，也可以直接复用） -->
    <section layout:fragment="page-specific-scripts">
      <!-- 先保留全局脚本，再添加页面专属的 -->
      <script src="/js/global-utils.js"></script>
      <!-- 可以是外部脚本文件 -->
      <script src="/js/index-page-scripts.js"></script>
      <!-- 也可以是内嵌脚本 -->
      <script>
        document.addEventListener('DOMContentLoaded', function() {
          // index页面专属的初始化逻辑
        });
      </script>
    </section>
  </body>
</html>

这种方式的优势在于结构更清晰，脚本位置统一可控，而且能方便地区分全局脚本和页面专属脚本，后期维护起来更省心。

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