右侧边栏区块

Discourse · 2022 年6 月 25 日 02:55


	摘要	右侧边栏区块在主题列表右侧显示一个侧边栏，其中包含可配置的区块列表。
	预览	在 Discourse 主题创建器中预览
	仓库链接	https://github.com/discourse/discourse-right-sidebar-blocks
	初次接触 Discourse 主题？	Discourse 主题使用入门指南

安装此主题组件

功能

该组件包含几个可在侧边栏中显示的区块：

popular-tags
top-contributors
recent-replies
category-topics
custom-html
category-list
subcategory-list
upcoming-events-list*
minimal-gamification-leaderboard**

必须启用用户目录，才能填充“顶级贡献者”列表。如果您的列表为空，请在管理员设置中搜索“启用用户目录”以确保其已启用。

仅在使用日历插件时可用。
** 仅在使用游戏化插件时可用。

您还可以使用其他 Ember 组件作为区块，只需使用正确的名称即可。例如，核心组件中包含一个 signup-cta Ember 组件，您可以直接在侧边栏中使用它。请注意，您不能使用需要一组参数的组件，但您可以在单独的主题中构建自己的 Ember 组件，并在侧边栏的 blocks 设置中仅通过其名称进行引用。

您可以通过参数控制所提供区块的一些功能。

名称	描述	默认值	值	适用对象
`count`	限制结果数量	各不相同	数字	除 custom-html 外的所有区块
`excerptLimit`	限制每个回复摘要的长度	150	数字	recent-replies
`id`	分类 ID		分类 ID（category-list 使用逗号分隔）	category-topics, category-list
`content`	要显示的内容		HTML	custom-html
`scopeToCategory`	仅在分类或子分类 X 中显示		分类 ID	popular-tags
`excludedTags`	排除的标签列表		标签名称	popular-tags
`displayInSpecificCategories`	显示该小部件的分类列表	全部	逗号分隔的数字	popular-tags
`id`	排行榜 ID		数字	minimal-gamification-leaderboard
`tag`	要显示的标签		标签名称	tag-topics
`period`	热门主题的时间周期	每周	全部、每年、每季度、每月、每周、每天	top-topics
`title`	区块标题	各不相同	字符串	tag-topics, category-list, top-contributors
`excludedGroupNames`	排除指定群组		群组名称	top-contributors
`order`	贡献者排序		字符串（likes_received 或 likes_given）	top-contributors
`period`	顶级贡献者的时间周期	每年	全部、每年、每季度、每月、每周、每天	top-contributors
`upcomingDays`	在指定值之前开始的活动	180	数字	upcoming-events-list
`timeFormat`	活动日期/时间格式	LT	momentjs 格式	upcoming-events-list

设置

名称	描述
blocks
show in routes	仅限高级用户：将侧边栏限制在选定的路由。示例：discovery.latest, discovery.unread, discovery.new, discovery.top, tag.show, “c/category-slug”（用于分类）, “tag/sample-tag”（用于标签）。当为空时，侧边栏将显示在所有列表路由上。

blocks：选择要显示的区块并调整其顺序

show_in_routes：决定在哪些主题列表路由上显示侧边栏。默认情况下，它将在除 /categories 之外的所有发现路由上显示。

翻译	默认值
top_contributors.heading	顶级贡献者
top_contributors.view_all	查看全部
popular_tags.heading	热门标签
popular_tags.view_all	查看全部
recent_replies.heading	最近回复
subcategory_list.heading	子分类
top_topics.heading	热门主题
category_list.heading	分类

截图

请注意，该组件仅提供非常基本的样式，假设使用该组件的管理员将在其自己的主题中添加自定义样式。

交互

当与 Discourse 日历插件配合使用时，您可以为即将举行的活动添加一个侧边栏区块。区块名称为 upcoming-events-list，日期格式可以按照此语法进行自定义（例如，MMMM D, YYYY）。

由我们托管？ 主题组件可在我们的专业版、商业版和企业版计划中使用。

Alaa · 2022 年7 月 17 日 01:29

如果使用 custom-html，应该在“name”参数中添加什么？

nathank · 2022 年7 月 18 日 17:30

很高兴看到这是一个#官方主题组件！它确实开启了一个新的自定义世界。

我有 2 个问题：

在侧边栏中，我想像 category-topics 那样显示 /latest 主题列表。这可能吗？recent-replies 几乎可以做到（尤其是隐藏摘要时），但我真的想包含没有回复的主题。
是否可以只在某些类别中显示侧边栏块？我的意思是，只显示类别主题列表路由，并且只显示我指定的类别。

pmusaraj · 2022 年7 月 19 日 14:54

抱歉，此处的文档有所欠缺（我现在就会更新）。custom-html 的参数名为 content。

我们没有现成的用于完整 /latest 列表的功能，但您可以自行构建并使用其名称将其添加到配置中。它应该与类别/标签列表非常相似，只是没有过滤器。

目前不行，您不能仅在特定类别中显示它。但是，您可以在 show in routes 设置中使用 discovery.category，这样侧边栏将仅在类别路由中显示（但会在所有类别中显示，而不是子集）。

Alaa · 2022 年7 月 20 日 06:12

谢谢，是否可以也为每个主题包含侧边栏？

albert_vu · 2022 年7 月 22 日 09:03

我刚刚注意到该组件的一个限制，特别是当涉及到 category-topics 和 subcategory-list 块时，那就是添加这两种类型的多个块，并且具有不同的 id，总是导致它们在启动编辑器中（我猜）显示最上面的块的主题/子类别。

我现在遇到的一个 bug 是，在玩弄 subcategory-list 块大约 10-12 次后，它在我们暂存站点上完全停止显示（请参阅下面的视频）。

pmusaraj · 2022 年7 月 25 日 14:09

subcategory-list 块根本不接受参数。使用时，它会显示当前类别下的子类别，具体取决于您导航到的当前类别……因此，将该块使用一次以上是没有意义的。

这也是为什么 subcategory-list 在您的视频中没有显示。如果您处于非类别路由上，该块将不会显示。

对于 category-topics，在您的视频中，我看到使用了两次相同的 ID：7。我进行了本地测试，使用不同的 ID 会显示不同的主题（即，我无法重现报告的错误）。

Helga_Razinkova · 2022 年7 月 26 日 09:10

您好，非常感谢您提供如此出色的插件！

我有一个关于 subcategory-list 侧边栏的问题：是否有选项可以仅针对特定类别显示它？

我们的开发人员已经查看过，似乎 subcategory-list 不支持参数 ID，您是否可以添加此功能？

Helga_Razinkova · 2022 年7 月 26 日 09:55

关于 top-contributors 块：是否可以获取一周的结果？

pmusaraj · 2022 年7 月 26 日 14:28

目前没有，这个选项不存在。添加它是有意义的，尽管我想象它应该支持多个 ID，这样你就可以为一系列类别（例如 A、B 和 C）显示该块。如果你的开发人员认为他们可以添加这个，我很乐意审查存储库中的 PR。（否则，我可以将其添加到主题组件的“希望拥有”列表中。）

你的意思是 a) 获取结果并缓存一周，还是 b) 每次加载时获取过去一周的顶级贡献者？后者应该很容易添加，缓存有点棘手。

miss · 2022 年7 月 27 日 03:31

@pmusaraj，你能为 popular-tags 添加

padding: 3px 4px 3px 4px

吗？

谢谢。

Helga_Razinkova · 2022 年7 月 27 日 06:22

您好 @pmusaraj，非常感谢您的回复！

我们的开发人员已在此处分享了 PR，请您查看：Implement the `displayInCategories` parameter which allows to specify a list of categories where the `subcategories-list` block is displayed by d521bb85 · Pull Request #10 · discourse/discourse-right-sidebar-blocks · GitHub

第二个选项就完美了！我们确实需要显示过去一周的顶级贡献者列表。非常感谢您！

pmusaraj · 2022 年7 月 27 日 17:32

该组件故意提供很少的样式，以便用户可以在自己的主题/主题组件中添加自己的样式。

谢谢，那个 PR 很棒，现在已经合并了！

我也会尽快着手为 top contributors 块添加可配置性（或者如果有人更快，我很乐意审查 PR）。

nathank · 2022 年7 月 28 日 04:18

我不确定在哪里可以找到代码 - 您能指引我一下吗？我想修改 category-topics，这样当没有 ID 时，它会显示所有类别（从而有效地成为 /latest 列表）

如果所有区块都有这个功能那就太好了！

Helga_Razinkova · 2022 年7 月 28 日 06:35

@pmusaraj 太棒了！非常感谢您的帮助，期待使用“顶级贡献者”块

Kuro22 · 2022 年8 月 14 日 05:29

您好！我不确定这个组件是否导致了错误。但禁用它之后，就没有再看到错误了。有人能帮我看看这个问题吗？非常感谢。

启用它后，在桌面端访问某个主题，点击顶部栏的网站 Logo 试图返回主页时，会进入一个永不消失的加载屏幕，并在浏览器控制台中出现错误（如下所示）。在 mysite/logs 路径下没有看到相关的错误日志。

d6ca234baf8d2d5e65f414f31e198fe956d9a939.js?__ws=www.bfsu.cafe:98 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'findFiltered')
    at new CategoryTopics (d6ca234baf8d2d5e65f414f31e198fe956d9a939.js?__ws=www.bfsu.cafe:98:18)
    at h.createComponent (base-component-manager.js:37:1)
    at h.createComponent (ember-component-manager.js:54:1)
    at C.create (manager.js:558:1)
    at Object.evaluate (runtime.js:3301:1)
    at Object.evaluate (runtime.js:1312:1)
    at Dt.evaluateSyscall (runtime.js:5232:1)
    at Dt.evaluateInner (runtime.js:5188:1)
    at Dt.evaluateOuter (runtime.js:5180:1)
    at Wt.next (runtime.js:6191:1)
    at Wt._execute (runtime.js:6175:1)
    at Wt.execute (runtime.js:6166:1)
    at qt.handleException (runtime.js:5369:1)
    at Kt.handleException (runtime.js:5605:1)
    at Lt.throw (runtime.js:5302:1)
    at Be.evaluate (runtime.js:2580:1)
    at Lt._execute (runtime.js:5285:1)
    at Lt.execute (runtime.js:5266:1)
    at Ht.rerender (runtime.js:5634:1)
    at Er.render (index.js:7578:1)
    at index.js:7896:1)
    at It (runtime.js:5074:1)
    at Rr._renderRoots (index.js:7876:1)
    at Rr._renderRootsTransaction (index.js:7928:1)
    at Rr._revalidate (index.js:7970:1)
    at invoke (backburner.js:351:1)
    at p.flush (backburner.js:241:1)
    at h.flush (backburner.js:447:1)
    at q._end (backburner.js:999:1)
    at _boundAutorunEnd (backburner.js:648:1)
CategoryTopics @ d6ca234baf8d2d5e65f414f31e198fe956d9a939.js?__ws=www.bfsu.cafe:98
createComponent @ base-component-manager.js:37
createComponent @ ember-component-manager.js:54
create @ manager.js:558
（匿名） @ runtime.js:3301
evaluate @ runtime.js:1312
evaluateSyscall @ runtime.js:5232
evaluateInner @ runtime.js:5188
evaluateOuter @ runtime.js:5180
next @ runtime.js:6191
_execute @ runtime.js:6175
execute @ runtime.js:6166
handleException @ runtime.js:5369
handleException @ runtime.js:5605
throw @ runtime.js:5302
evaluate @ runtime.js:2580
_execute @ runtime.js:5285
execute @ runtime.js:5266
rerender @ runtime.js:5634
render @ index.js:7578
（匿名） @ index.js:7896
It @ runtime.js:5074
_renderRoots @ index.js:7876
_renderRootsTransaction @ index.js:7928
_revalidate @ index.js:7970
invoke @ backburner.js:351
flush @ backburner.js:241
flush @ backburner.js:447
_end @ backburner.js:999
_boundAutorunEnd @ backburner.js:648
Promise.then（异步）
n @ backburner.js:28
flush @ index.js:46
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
_boundAutorunEnd @ backburner.js:648
Promise.then（异步）
n @ backburner.js:28
flush @ index.js:46
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
_boundAutorunEnd @ backburner.js:648
Promise.then（异步）
n @ backburner.js:28
flush @ index.js:46
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
_boundAutorunEnd @ backburner.js:648
Promise.then（异步）
n @ backburner.js:28
flush @ index.js:46
_scheduleAutorun @ backburner.js:1218
_ensureInstance @ backburner.js:1206
scheduleOnce @ backburner.js:845
k @ index.js:522
queueRerender @ mount-widget.js:124
scheduleRerender @ widget.js:319
rerenderResult @ widget.js:365
F @ hooks.js:207
（匿名） @ hooks.js:247
dispatch @ jquery.js:5430
_.handle @ jquery.js:5234
frame:251 您已关闭该标志，但您的浏览器禁用了第三方 Cookie，因此下次访问页面时该标志将重新出现。

我在上面错误日志第一行提到的 JS 文件中看到了关于此组件的信息。

// line 96-103 of d6ca234baf8d2d5e65f414f31e198fe956d9a939.js?__ws=www.bfsu.cafe
      const filter = "c/" + categoryId;
      this.category = _category.default.findById(categoryId);
      this.store.findFiltered("topicList", {
        filter
      }).then(result => {
        const results = result.topic_list.topics;
        results.forEach(topic => {
          topic.url = "".concat((0, _getUrl.default)("/t/")).concat(topic.slug, "/").concat(topic.id);

pmusaraj · 2022 年8 月 15 日 18:23

啊，是的，抱歉。现在应该已修复，你只需要拉取主题组件的最新更新。

Kuro22 · 2022 年8 月 16 日 05:49

太好了！现在运行得很棒。

Helga_Razinkova · 2022 年8 月 22 日 06:55

嗨 @pmusaraj，抱歉如果我显得很强硬——只是想知道这个实现是否有任何预计的完成时间。

这将是一个很棒的补充

非常感谢！

carson · 2022 年10 月 19 日 16:09

感谢您提供这个出色的组件！

我注意到，启用此功能时，我的整个页眉和页脚都会全局消失（我header.html和footer.html中的所有内容）。这是故意的吗？但是，为了解决这个问题，我必须使用PluginAPI手动添加页眉/页脚。

话题		回复	浏览量
Topic List Sidebars Theme component official , topic-list-sidebars	23	14168	2026 年2 月 24 日
Discourse Bars :beers: :cocktail: (a sidebar framework) Theme component	68	4846	2026 年2 月 22 日
Discourse Popular Tag Sidebar Theme component	26	7450	2023 年1 月 9 日
Showcased Categories Theme component official , showcased-categories	71	10321	2025 年4 月 8 日
Looking for the perfect theme Community Building	6	417	2024 年9 月 19 日

右侧边栏区块

功能

设置

截图

交互

相关话题