复杂的 JavaScript 主题可以拆分成多个文件，以保持良好的组织性。
要使用此功能，只需将文件添加到主题目录中的 /javascripts 文件夹即可。这些文件无法从 Discourse UI 中编辑，因此您必须使用 Theme CLI 或 从 git 源码化主题。
JavaScript 文件与核心/插件中的处理方式完全相同，因此您应遵循相同的文件/文件夹结构。主题文件在核心/插件之后加载，因此如果文件名匹配，主题版本将优先。
例如，您现在可以通过向主题中添加单个文件来实现 https://meta.discourse.org/t/adding-to-plugin-outlets-using-a-theme/32727：
/javascripts/my-theme/connectors/discovery-list-container-top/add-header-message.gjs
import Component from "@glimmer/component"; import { service } from
"@ember/service"; export default class HeaderMessage extends Component {
@service currentUser;
<template>
Welcome
{{this.currentUser.username}}
</template>
}
要使用 JS API，请创建一个初始化器：
/javascripts/discourse/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
// 您的代码
});
如果您需要一个完全不同的 .js 资源（例如用于 Web Worker），请查看 此主题。
本文档已版本控制 - 请在 github 上建议更改。
27 个赞
假设我不知道 core/plugins 的文件层级结构，因为我只是来创建一个新的主题组件。我应该在哪里查找信息？目录和其中的文件的命名约定是什么？
仅仅查看各种主题/组件，会发现各种不同的嵌套方案和子目录。我一直没能找出规律，也找不到任何文档。（例如，/initializers、/api-initializers 和 /pre-initializers 之间有什么区别？ 
）
1 个赞
这里的文件使用API。老实说，我也疑惑了很久，为什么我不能把 api-initializers 文件放在 initializers 里？
pfaffman
(Jay Pfaffman)
34
是的。这很难理解。我宁愿不去想我花了 3 个小时做某件事，结果却发现我给某样东西命名错误或放错了位置，或者有时，忘记以看似有许多方法中的一种来包含它（在 plugin.rb 中，在 js 文件中的 include 中——什么路径？我需要扩展名吗？）
最好的方法是使用 安装 Discourse 主题 CLI 控制台应用程序来帮助您构建主题，并让它为您创建一个主题骨架。它还使调试变得非常容易，因为它会自动将其上传到您的服务器（一个普通的生产服务器），并且（通常）会自动重新加载您的浏览器。
不知道有什么区别，或者是否有区别（我认为没有？但我不太清楚）。我会使用主题骨架中的那个。
有一个名为 all-the-themes 的仓库。您可以获取它并搜索其中的示例。并且始终使用最近更改过的那个。
3 个赞
EmberJS（以及 Rails）在很大程度上依赖于约定。大多数时候这都很棒，但当你犯了哪怕是很小的错误时，例如命名，它也会变得_极其_令人沮丧。
3 个赞
FWIW，我在这里找到了对 api-initializers/ 的解释：
（然后它连接到 Ember 文档，然后就开始有意义了。）
仍然希望有一个文档能对目录结构的可能性进行基本的枚举/解释。（例如，我知道 connectors/ 是一个东西……还有更多吗？）
另外，FWIW：主题 CLI 应用程序从以下位置拉取骨架：
它只提到了 api-initializers/。
（事实上，我正在使用主题 CLI 应用程序，但在我开始制作主题组件后才开始使用它，所以我跳过了骨架步骤。）
2 个赞