我通过以下方式创建了一个自定义主页：
a) 将类名 .custom-homepage 添加到登录页面。我用它来简单地定位我想在特定页面上隐藏/调整的内容，通过我的自定义 CSS。
b) 将任何新组件直接添加到我的默认主题自定义 HTML 的 head 文件中。
它看起来是这样的：
<script type="text/discourse-plugin" version="0.8">
api.registerConnectorClass("above-main-container", "custom-homepage", {
setupComponent(args, component) {
var topMenuRoutes =
component.siteSettings.top_menu.split('|')
.map(function(route) {return '/' + route});
// 'top_menu' 设置中列出的第一个页面是您的主页
var homeRoute = topMenuRoutes[0];
// 每当页面更改时，它都会调用我们的代码
api.onPageChange((url) => {
// 检查我们是否在主页上
if (url === "/" || url === homeRoute ){
// 如果是主页，则将 'custom-homepage' 类添加到 HTML 标签
// 并将 'displayCustomHomepage' 设置为 true
document.querySelector("html").classList.add("custom-homepage");
component.set("displayCustomHomepage", true);
} else {
// 如果我们不在主页上，则删除该类
// 并将 `displayCustomHomepage` 设置为 false
document.querySelector("html").classList.remove("custom-homepage");
component.set("displayCustomHomepage", false);
}
});
}
});
</script>
<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/custom-homepage">
{{#if displayCustomHomepage}}
<div class="custom-homepage-wrapper mask-polygon">
<div class="custom-welcome-banner">
<h1 class="welcome-header-text">欢迎来到瑞典的合作建房运动</h1>
<p>在这里，您可以查看已完成和计划中的项目，查找知识，获得建议 - 并与全国各地正在一起建造和居住的其他人建立联系。</p>
</div>
</div>
{{whos-online}}
{{search-menu}}
<div class="two-column-layout">
<div>
（我自己的地图图像代码在这里，我将省略它）
</div>
<WANTED DIV>
（这是我想放置我的信息流的地方，也许是像 {{categories-topic- list topics=latest filter=“latest” limit=“10” … }} 这样的东西）
</WANTED DIV>
</div>
{{/if}}
</script>
到目前为止一切顺利。页面看起来像这样：
问题是**我无法控制当前的信息流。**它只是默认的信息流，我通过自定义 CSS 中的 .custom-homepage + class 大致调整了它的宽度和位置，以便为左侧的地图腾出空间。例如，它目前是无限滚动的。我需要它只显示最新的 10 篇文章。
我的问题是：
- 我应该隐藏哪个类来隐藏当前的信息流？
- 在我自己的代码中添加我的最新帖子，正确的语法是什么？请参阅上面代码中的“WANTED DIV”部分。
非常感谢您的帮助。