Discourse Bars 🍻 🍸（一个侧边栏框架）

主题组件
1

:eyeglasses: 概述

一个主题组件，允许您在顶部和侧边栏中布局组件[^1]。

  • 为路由和位置指定一组“小部件”。
  • 支持以下各项的设置：发现[^2]、主题、标签[^3]、类别[^3] 或 标签交叉[^4]。
  • “侧边栏”可以是：顶部、左侧、右侧或替代右侧位置。
  • 每个侧边栏都可以折叠或关闭（刷新浏览器可重置关闭）。它们可以默认最小化。
  • 处理官方侧边栏，但如果您打算使用左侧侧边栏，建议使用官方侧边栏的下拉菜单模式。
  • 它附带现有的示例设置，显示了一些大字母，部分是为了演示，部分是为了让您看到示例设置。删除这些并替换为您自己的组件名称。
  • 附带一个组件：bars-custom-html（请参阅预填充的示例设置）- 但许多现有主题组件和插件的组件兼容。
  • 移动端支持尚未实现。

[^1]：此主题组件支持 Glimmer 组件，这些组件必须“自包含”，即自行获取数据（因此它们保持完全模块化，并且可以在任何路由上使用）。

[^2]：术语“发现”（路由）指的是主主题列表页面（例如，“最新”、“新建”），这些页面允许您在点击并进入特定主题之前浏览可用主题。

[^3]：技术上也是一个“发现”路由，但我们将其分解为不同的名称，以便您可以根据需要进行区分。

[^4]：请参阅 标签交叉插件。

:link: 快速链接
:octopus: 获取代码 https://github.com/merefield/discourse-tc-bars
:eyes: 查看代码 GitHub - merefield/discourse-tc-bars: A Theme Component that allows you to lay out Components ("widgets") on top and side bars
:question: 安装指南 Installing a theme or theme component

喜欢这个主题组件吗？请在 GitHub 上 :star: 它！ :pray:

免费示例：

image
image1555×998 137 KB

首次加载时：

image
image1131×850 48.1 KB

:warning: 关于此主题组件的一些重要注意事项！

  • 此主题组件主要面向具有一定主题开发技术理解能力的技术人员和管理员。如果您技术能力不足，并且需要有关使用侧边栏实现侧边栏的帮助，您可以在 Marketplace 中聘请我或开发人员。

  • 此主题组件旨在为支持侧边栏提供一个框架。它不提供最终的视觉效果，您需要使用其他 CSS 在主题中添加这些效果。但是，它为您做了很多工作，让您需要考虑的事情更少，甚至可能让您能够做以前无法做到的事情…… :sweat_smile:

组件注意事项

为什么

  • 随着 Discourse 核心更新到 Ember 5，Pavilion 的插件布局提供的用于操作 Discourse 布局的技巧不再有效。现在没有简单的方法可以通过相对简单的最终用户界面在主题路由上显示侧边栏。

  • 此外，Ember 推出了 Glimmer 组件，这些组件使用起来更方便。（布局使用了小部件 API，该 API 已被弃用，取而代之的是 Glimmer 组件）。

  • 最后，Discourse 核心团队提供了一个新的主题组件设置 JSON 编辑器，这使得部署更复杂的设置成为可能 :+1: :rocket:

  • 与其修复布局插件（布局时代还没有主题组件），不如将其重建为主题组件，因为我们可以在前端实现大部分所需的功能。

  • 隆重推出“侧边栏” :beers: :cocktail: 干杯！！

已知问题

  • 顶部侧边栏不固定（如果无法解决，我可能会删除相应的设置）。

致谢

[^1]：术语“发现”（路由）指的是主主题列表页面（例如，“最新”、“新建”），这些页面允许您在点击并进入特定主题之前浏览可用主题。
[^2]：技术上也是一个“发现”路由，但我们将其分解为不同的名称，以便您可以根据需要进行区分。
[^3]：请 在此处查看更多详细信息。为了使其保持可选（并非所有 Bars 的安装者都想要自定义主页），Bars 不会在 about.json 中添加必需的修改器，因此您必须在父主题或其他主题组件中添加此修改器才能激活它。

47 个赞
2

哇，这太酷了！Robert，干得漂亮。:rocket: 感谢你完成这项工作并使其可用！:slight_smile:

已分叉！

11 个赞
3

我刚开始学习如何添加自定义小部件，但是：我希望有一个选项可以在移动视图中将小部件添加到非滚动页脚。
这个组件的未来版本是否可能实现这个功能？

4 个赞
4

目前没有计划添加额外的“栏”，但也许等事情稳定下来，TC 明确稳定后……

……也欢迎 PR 或赞助 :+1:

5 个赞
5

这看起来太棒了——谢谢！您能否提供一个示例，说明将“标签列表小部件”包含在其中一个侧边栏中的设置是什么样的？

例如，根据说明，这似乎应该有效……

Screenshot 2024-03-06 115217
Screenshot 2024-03-06 1152171012×1417 41.5 KB

但是左侧边栏仍然只显示大 A……

Screenshot 2024-03-06 115301
Screenshot 2024-03-06 1153012755×1740 386 KB

3 个赞
6

有两件事：

首先，这是 StarZen 中类似的设置：

image
image366×622 6.1 KB

组件名称实际上与组件中的文件名相同（我会在 OP 中添加这一点）

https://starzen.space

其次，这真的很愚蠢，但你必须先按保存，然后再按勾号。

这是双重保存！:man_facepalming:

这是核心当前主题设置的性质，而不是栏。我可能会在 OP 中添加一个关于此的注释。

5 个赞
7

是的，我做了双重保存 :slight_smile:

不过，我一定遗漏了什么，因为结果是一样的。我还能提供什么来帮忙吗？

1 个赞
8

分享您的设置 json（TC 底部的按钮）。

3 个赞
9 
[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list-widget\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-d\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-e\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-f\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-c\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-d\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-e\",\"route\":\"topic\",\"position\":\"top\"},{\"component_name\":\"big-a\",\"route\":\"categories\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"category\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"tag\",\"position\":\"right\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]
10

您的 component_name 仍然是错误的，请看我的示例，您可能需要删除其余部分。

11

嗯……好的，我删除了除第一个之外的所有内容，并将名称更改为与您的匹配（尽管组件名称来自 TC GitHub - merefield/discourse-tc-bars-tag-list-component: The Tag List Widget allows you to display tags from Discourse in a sidebar using Pavilion's Custom Layouts Plugin. - 我在哪里可以找到正确的组件名称是 layouts-tag-list？）

但是，在模态框中更改组件名称似乎并未在设置 JSON 中更改它，也没有删除其余的项目，即使在双重保存之后……

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list-widget\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-d\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-e\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-f\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-c\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-d\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-e\",\"route\":\"topic\",\"position\":\"top\"},{\"component_name\":\"big-a\",\"route\":\"categories\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"category\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"tag\",\"position\":\"right\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]
12

正如我在上面解释的（并且现在在 OP 中已详细说明），组件名称不是主题组件的名称（它可能包含许多 Ember Glimmer 组件），而是实际 Ember 组件的名称：

image
image659×364 12.3 KB

所以是 layouts-tag-list

这是一个有用的误解，我将在 OP 中使用此示例进一步说明。

不确定为什么您的设置会粘滞 :man_shrugging:

尝试删除主题组件并重新添加，然后执行相同的过程。

或者只是刷新您的浏览器？

13

感谢 @merefield 的工作！

除了位置不一定只能在右侧之外，Discourse Bars 在功能上与带有自定义 HTML 的右侧边栏块有何不同？

14

Bars 是 Pavilions Layouts 的精神继承者，而 Layouts 是 RSB 的前身。

但与 RSB 相比，Bars 主要支持多路由和多位置（Bar 的目标是重现 Layouts 的实用性和灵活性），关键的补充是支持主题路由。另外，我目前不支持 params……我还没有遇到过用例。我也不捆绑任何组件，除了演示的大字母——这是故意的，它旨在成为一个更偏向管理员/开发者的框架（就像 Layouts 一样）。

路线图也可能更具雄心——如果我获得资助，我可能会添加 Layouts 曾经拥有的移动功能——任何人都可以联系我赞助这项工作。

2 个赞
15

好的，我已删除并重新安装了 bars TC 和 layouts-tag-list TC（我尝试过单独和一起移除和重新添加它们），但结果都一样。而且我每次都像以前一样刷新了。我还清除了浏览器缓存。:face_with_monocle:

16

我无法重现您遇到的设置卡死问题。我刚刚添加并删除了一个左侧边栏。

我很想了解其他是否有遇到相同问题的报告。

17

感谢您花费时间尝试——我今天晚些时候将在我的其他 Discourse 实例上尝试，并再次汇报。

1 个赞
18

我也已移除所有插件，并重新构建（且没有安装其他 TC 或主题），这是昨晚的全新安装。

以防万一有帮助，我发现，在与上述相同的设置下，虽然左侧边栏在其他任何地方都没有出现，但在 /latest 路由上却显示了（尽管只显示了“Tags”标题，而没有显示任何标签）。

Screenshot 2024-03-06 131047
Screenshot 2024-03-06 1310471920×953 103 KB

Screenshot 2024-03-06 131113
Screenshot 2024-03-06 1311133505×1827 363 KB

这是设置 JSON…

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list\",\"route\":\"discovery\",\"position\":\"left\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]
19

您需要自己调试一下——检查您的控制台、主题 CSS 等。

对我来说是有效的：

image
image1410×926 127 KB

我不记得布局标签列表是否需要标签组……可能需要！

4 个赞
20

是的，在设置中启用标签组（然后创建一些标签组）确实使标签出现了。

但是，将组件项的路由设置为discovery后，在**/latest、/new 和 /top**列表中仍然只显示左侧栏。

您能否好心指出可在此处使用的所有可用“路由”的列表？

再次感谢！

2 个赞