Discourse类别标题主题组件

此主题组件为 Discourse 分类标题提供了多项增强功能。

“标准”Discourse 分类标题显示在每个分类页面的顶部,位于导航链接和主题列表之上。通常,只有在分类设置中上传了分类徽标图像后,该标题才会显示。标题会显示徽标以及从“关于该分类”主题的第一段中提取的分类简短描述。

此主题组件提供以下增强功能

现在默认显示所有分类的分类标题。除了徽标(如果已设置)和分类描述外,标题现在还包括分类名称。它还可以包含徽标背景图像,并可通过分类颜色设置将其样式设置为“框”或“横幅”。主题设置中提供了大量可配置选项。

主题设置

  • 显示分类名称: 在标题中显示分类名称
  • 显示分类描述: 显示分类描述文本(“关于此分类”主题的第一段)
  • 描述文本大小: 分类描述中文本的大小
  • 文本对齐: 分类标题中文本的对齐方式
  • 显示子分类标题: 显示子分类的标题
  • 显示父分类名称: 在子分类标题前添加父分类名称(这将作为指向父分类页面的面包屑链接)
  • 显示锁定图标: 在受权限保护的分类上显示锁定图标
  • 显示分类徽标: 在标题中显示分类徽标图像
  • 显示父分类徽标: 如果未设置子分类徽标,则显示父分类徽标
  • 显示站点徽标: 如果未设置分类徽标,则显示小型站点徽标
  • 徽标位置: 徽标在框内的位置
    – “左”和“右”使徽标与文本并排显示。
    – “顶部”使徽标显示在文本上方并对齐。
  • 徽标大小: 徽标在标题中的大小。
    – 小:高度为 50 像素,类似于子分类框徽标。
    – 标准:高度为 150 像素。
    – 原始:上传图像的实际大小
  • 标题样式: 将标题样式设置为以下之一:
    – 框:分类标题的样式与标准 Discourse 框相同
    – 横幅:将标题背景设置为分类背景色,文本设置为前景色
    – 无:无边框或背景样式
  • 标题背景图像: 如果已上传分类背景图像,则适用
    – “包含”、“覆盖”和“调整大小”会在标题内显示背景。
    – “外部”是 Discourse 的默认设置,将背景显示在标题之外,覆盖整个页面。
  • 在移动设备上显示: 在移动设备上显示分类标题
  • 强制移动对齐: 强制将徽标和文本在移动设备上对齐到标题的顶部中央
  • 如果没有分类描述则隐藏: 如果未设置分类描述,则隐藏标题
  • 隐藏分类例外: 这些分类将不显示标题

安装主题组件

:hammer_and_wrench: Git 仓库:https://github.com/naidihr/discourse-category-headers

:thinking: 如何安装主题或主题组件?

致谢

感谢 @Johani 提供的出色的 Discourse 主题开发者指南
此主题组件的灵感来源于其他主题,尤其是 @awesomerobotDiscourse 分类横幅 主题。

示例

框样式:分类标题的样式与子分类框相同

子分类,请注意子分类没有徽标,但设置为继承父分类徽标。父分类名称也设置为作为面包屑链接显示。

如果子分类有自己的徽标,则会显示它。

移动视图,显示不同的文本和图标对齐方式。

文本大小设置。



对齐选项示例:文本居中,徽标靠右。

横幅样式:使用分类背景和前景颜色

背景图像:使用分类背景图像

82 个赞

丰富的选项让这非常灵活,看起来很棒!

21 个赞

这工作太棒了!:clinking_beer_mugs::smiling_face_with_sunglasses::+1:

5 个赞

这个看起来很棒。

3 个赞

Rhidian,能否分享一下您的配置设置,以便在网格视图中显示分类(如下面链接所示)?

我已安装此主题组件,但只能在每个分类页面的顶部看到“方框”标题。谢谢!

3 个赞

实际上,我想我已经弄明白了。:slight_smile: 我在 设置 下漏掉了以下内容:

Screen Shot 2020-07-08 at 1.23.35 PM

5 个赞

太棒了 @labrumfield :grin:。也谢谢你分享答案——我猜这对其他人也会很有用。希望主题组件能顺利运行。

1 个赞

请问是否有一种方法可以在不发布新主题的情况下预览“带子类别的方框”设置?

我不太明白您说的“预览”是什么意思?您可以在自定义管理设置下预览主题和主题组件。

理想情况下,我希望在不发布的情况下预览“带子类别的区块”设置。或者,如果有一种方法可以将此设置仅与您的主题组件关联,而不适用于其他主题或主题组件,那也很好。

我认为目前没有这样的方法,所以我只是想看看是否有人有什么想法。谢谢!

带有子类别设置的复选框不属于此组件。它是 Discourse 类别设置。

您无法“预览”该设置,但可以临时启用它以查看效果。类别设置用于以行或方框形式显示子类别。

2 个赞

你好,

我刚更改了一个分类设置,导致分类标题有些混乱。(见图片)

我更改的设置是将“子分类列表样式”从“方框”改为“带精选主题的方框”。我想其他设置应该没有变动。你知道如何让横幅恢复为横跨顶部,而不是显示在左上角的方框中吗?

另外,当我把设置改回“方框”时,它仍然没有恢复正常。

非常感谢。这真是一个非常非常非常棒的组件。

我碰运气尝试插入一个 YouTube 视频和一个 SoundCloud 播客,但不幸的是,它们没有显示在分类框中。

如果能在图片、视频和音频之间进行选择,那将是一个绝佳的展示方式,让人们快速了解每个分类的主题。与其只用图片,不如为每个分类制作简短的视频介绍。这样,潜在会员可以通过简短的文字概览,然后观看介绍该分类的视频,或者如果偏好音频,也可以收听对应的声音版本或播客介绍。

但还是要非常感谢您的辛勤工作和贡献。

1 个赞

制作响应式横幅的最佳尺寸和选项是什么?我是否需要检查其他组件?

我认为用出色的设计来展示分类信息会非常棒。

感谢这个模块,它太棒了。

1 个赞

横幅采用标准的 Discourse 响应式模板,因此会自动调整以适应您的设备。

1 个赞

我发现自动修复的配置在桌面端和移动端的横幅全宽显示上效果不佳。

您有相关的示例吗?也许我可以通过 CSS 配合一些媒体查询来实现,但这可能对所有人都有用。或者,也许我的配置中遗漏了某些内容。

感谢您的回复,Rhidian。

您好,

我正在使用您出色的主题组件,但无论我如何调整设置,布局都没有任何变化。描述信息没有显示,将徽标移动到顶部、左侧或右侧时,效果也未体现。

请问我遗漏了什么?

还有人关注这个主题吗?还是这个主题组件已经不再维护了?

该组件未发生任何变更。在这种情况下,很可能是另一个与其交互的组件导致的问题。建议您逐个禁用组件,以排查具体原因。如果找到问题所在,请告知我们。

2 个赞

由于 component.css 中的 CSS 规则 a,a:visited {color: inherit;},我分类描述中的链接样式显示为普通代码。

这是预期的结果吗?