如何在Discourse中添加外部JavaScript文件？是否需插件或修改源码？

嘿，我来帮你理清楚在Discourse里加自定义JS文件的几种可行方式，不用犯愁～

首先明确：你完全不需要一定要创建插件，Discourse提供了更灵活的主题组件方式，当然也可以通过插件或者源码修改来实现，但源码修改非常不推荐，下面详细拆解每种方法：

方法一：使用主题组件（首推，无需改源码/写插件） #

这是Discourse官方最推荐的方式，适合快速添加自定义脚本，而且不会因为Discourse版本更新丢失你的修改：

• 登录你的Discourse后台，进入「自定义」→「主题」→「组件」
• 点击「新建组件」，给组件起个好记的名字（比如“我的自定义JS脚本”）
• 进入组件的「编辑CSS/HTML」页面，切换到「</> JavaScript」标签页
• 你可以直接把JS代码粘贴到这里；如果是外部JS文件，也可以用动态引入的方式，比如：

  import("https://你的CDN地址/你的脚本文件.js").then(() => {
    // 脚本加载完成后可以加一些初始化逻辑
  }).catch(err => console.error("加载自定义脚本失败：", err));
  

• 保存后，回到「组件」页面，把这个组件添加到你正在使用的主题中（点击组件卡片的「添加到主题」按钮，选好目标主题就行）
• 刷新前端页面，你的JS脚本就生效啦

方法二：创建Discourse插件（适合复杂功能场景） #

如果你的JS需要和Discourse核心功能深度集成（比如修改核心钩子、添加专属API接口等），那创建插件会更合适：

1. 先安装Discourse插件脚手架工具：

   gem install discourse_plugin_generator
   

2. 生成插件模板：

   discourse_plugin_generator generate 你的插件名称
   

3. 进入生成的插件目录，找到assets/javascripts/discourse/initializers/文件夹——这是插件初始化脚本的默认位置
4. 新建一个初始化文件（比如custom-script-loader.js），写好你的逻辑，示例：

   import { withPluginApi } from "discourse/lib/plugin-api";
   
   export default {
     name: "custom-script-loader",
     initialize() {
       withPluginApi("0.8.30", api => {
         // 方式1：动态创建script标签引入外部文件
         const script = document.createElement('script');
         script.src = 'https://你的CDN地址/你的脚本文件.js';
         script.async = true;
         document.head.appendChild(script);
   
         // 方式2：直接写内联逻辑，比如监听页面切换
         api.onPageChange(() => {
           console.log("页面切换啦，执行我的自定义逻辑～");
         });
       });
     }
   };
   

5. 把整个插件文件夹放到Discourse服务器的plugins/目录下
6. 重启Discourse服务，插件就会被自动加载，你的JS也会跟着生效

方法三：直接修改Discourse源码（非常不推荐） #

真的不建议直接改核心源码，因为每次Discourse版本更新时，你的修改会被完全覆盖，后续维护成本超高。如果实在要尝试：

• 找到Discourse源码里的app/assets/javascripts/目录，把你的JS文件放到合适的子文件夹里
• 在app/assets/javascripts/application.js中添加引入语句：

  import "./你的脚本所在路径/你的脚本文件.js";
  

• 重新编译前端资源：

  bundle exec rake assets:precompile
  

• 最后重启Discourse服务

总结下：优先用主题组件，简单又安全；复杂功能再考虑写插件；源码修改能避就避～

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