Docusaurus 2：如何为每个页面运行自定义脚本

没问题！完全可以不用组件或者把所有文档转成MDX就能实现每个页面自动执行自定义脚本，我给你分享几个通用的方案，适用于大多数静态文档站点：

方案1：全局脚本文件注入 #

这是最通用的做法，适合几乎所有支持自定义脚本配置的站点生成工具：

• 第一步：在你的项目里创建一个自定义JS文件，比如 src/custom-scripts.js，写入你要执行的代码：

  // 等待页面DOM完全加载后执行，避免操作未渲染的元素
  document.addEventListener('DOMContentLoaded', () => {
    alert(1);
    // 这里可以添加更多你需要在每个页面运行的逻辑
  });
  

• 第二步：找到站点的配置文件（比如Docusaurus的docusaurus.config.js、VuePress的config.js等），在scripts配置项中引入这个文件：

  // 以Docusaurus为例的配置示例
  module.exports = {
    // ...其他配置内容
    scripts: [
      {
        src: '/custom-scripts.js',
        defer: true, // 可选：延迟加载，不阻塞页面渲染
      },
    ],
  };
  

  配置完成后，这个脚本会自动在每个页面加载时执行。

方案2：修改全局布局模板 #

如果你的站点支持修改全局HTML布局模板，可以直接把脚本嵌入模板中：

• 找到项目中的全局布局模板文件（比如很多工具会放在src/templates/html.js、.vuepress/public/index.html这类路径下）
• 在模板的<body>标签末尾添加你的脚本代码：

  <body>
    <!-- 页面内容的占位符，不同工具的写法可能略有差异 -->
    {{{ pageContent }}}
    
    <!-- 自定义全局脚本 -->
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        alert(1);
      });
    </script>
  </body>
  

  这种方式不需要额外的JS文件，修改后所有页面都会自动包含这段脚本。

注意事项 #

• 如果用的是Next.js、Gatsby这类框架做文档站，思路类似：可以在_app.js（Next.js）或gatsby-browser.js（Gatsby）这类全局入口文件中添加脚本逻辑。
• 建议用DOMContentLoaded事件包裹代码，确保页面元素已经渲染完成再执行脚本，避免出现找不到元素的问题。
• 如果不需要等待DOM，也可以直接写裸脚本，但可能会影响页面加载体验，谨慎使用。

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