作为主题开发者，您会遇到的一个非常常见的情况是需要创建仅在社区主页上显示的内容。
您可能会将一些 HTML 添加到主题的“页眉之后”部分，这样它就会出现在每个页面上。您可以尝试通过 CSS 绕过一些障碍来隐藏它，但只在主页上显示……不如让我们使用 Discourse 主题来创建一个仅在您的主页上可见内容的组件。
如果您不熟悉 Discourse 主题，请查看 Beginner's guide to using Discourse Themes 和 Structure of themes and theme components
在您的 Discourse 主题中，您需要设置以下目录结构：
javascripts/discourse/components/
javascripts/discourse/connectors/
从这里开始，我们将创建一个 Ember 组件。您可以从其文档中了解更多关于 Ember 组件的信息：Ember.js Guides - Guides and Tutorials - Ember Guides
但目前这将是一个简单的组件。该组件将由两个文件组成，一个包含逻辑，另一个包含模板。
javascripts/discourse/components/custom-homepage-content.js
import Component from "@glimmer/component";
import { service } from "@ember/service";
import { defaultHomepage } from "discourse/lib/utilities";
export default class CustomHomepageContent extends Component {
@service router;
get isHomepage() {
const { currentRouteName } = this.router;
return currentRouteName === `discovery.${defaultHomepage()}`;
}
}
这会创建一个 isHomepage getter，它会检查路由服务（router service）的 currentRouteName——如果路由名称与您的主页（由站点设置决定）匹配，它将返回 true
现在我们需要模板
javascripts/discourse/components/custom-homepage-content.hbs
{{#if this.isHomepage}}
<h1>This is my homepage HTML content</h1>
{{/if}}
模板会检查 isHomepage getter，如果为 true 则会显示您的内容。您可以在 {{#if}} 块之间添加任何您想要的 HTML。
现在我们的组件已创建，我们需要将其添加到 Discourse 的某个位置。对于这一步，您需要决定使用哪个插件插口（plugin outlet）。这些是 Discourse 中我们添加了一些代码供开发人员挂钩的区域。您可以在 Github 上搜索这些内容，或通过 (deprecated) Plugin outlet locations theme component 进行浏览。
对于自定义主页，above-main-container 是一个常见的选择，所以我们使用它。
我们需要在正确的目录中创建连接器文件：
javascripts/discourse/connectors/above-main-container/custom-homepage-connector.hbs
<CustomHomepageContent />
就这样，只需要一行代码来调用您的组件 
此文档是版本控制的 - 在 github 上 建议更改。