类别横幅

[Discourse]

	摘要	类别横幅 利用现有的类别详细信息为您的类别页面创建横幅（如需查看标签，请访问 Discourse 标签横幅）。
	预览	在 Discourse 主题创建器中预览
	仓库链接	https://github.com/discourse/discourse-category-banners
	Discourse 主题新手？	使用 Discourse 主题的入门指南

安装此主题组件

由于这是由 Discourse 团队维护的 official 主题组件，因此 #support、#bug、ux 和 #feature 请求可以在 Meta 上的相应类别中提出，并打上相应的主题组件标签。点击下方链接即可开始。: +1:

 支持  Bug  用户体验  功能

功能

类别横幅 利用现有的类别详细信息为您的类别页面创建横幅。它使用类别名称、描述和颜色在相关类别页面的顶部生成横幅（如需查看标签，请访问 Discourse 标签横幅）。

类别描述由每个类别的“关于此类别的…主题”中的第一段定义。横幅背景/文本颜色由您的类别徽章设置定义。

默认情况下，这将在桌面端和移动端的各类别和子类别页面上显示，但如果您未为类别提供描述，则不会显示。

设置

此组件提供了一些选项以覆盖默认设置：

名称	描述
show description	显示“关于此类别”帖子中的描述
show mobile	在移动设备上显示横幅
show subcategory	为子类别显示横幅
hide if no description	如果未设置类别描述，则隐藏横幅
show category logo	显示类别徽标
align text	对齐文本
exceptions	横幅不会显示在这些类别名称中
categories	为其显示横幅的类别
plugin outlet	更改横幅在页面上的位置
show category icon	显示类别设置中的类别图标或表情符号 *
override category icon color	当使用类别图标时，启用此选项将使图标与横幅文本颜色匹配

• 请注意，此设置现在指的是 在类别设置中设置的类别图标或表情符号，而不是 类别图标 主题组件（该组件已弃用，推荐使用核心功能）。

自定义说明

如果您想使用一些额外的 CSS 进行自定义，可以通过以下结构针对特定的类别标题（example-category 是您的类别名称）：

.category-title-header {
  &.category-banner-example-category {
        background: url(example.jpg);
  }
}

此组件还会向 body 标签添加 category-header 类，作为额外的 CSS 目标。

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

[Pad_Pors]

thanks for this wonderful theme , it helps users to note the category description much easier.

currently if there’s a link or a bold/italic word in the category description, in the banner it’ll appear as simple text (e.x. p style instead of a style). isn’t it better if the text style is preserved in the banner as well?

[jimmymckinney (Jimmy)]

Hi, I absolutely love this component! Thanks for your work!

I’m wondering, how can I style the background so that it automatically pulls the category background image and makes it the background of the banner. The backgrounds are already hidden anyways, so I want it to simply display as the background to the banner, rather than the page. I’ve tried this, but it didn’t work and I think I might be targeting the wrong variable:

return h('div.category-title-header' + " ." + category.slug, {
                    "attributes" : {
                        "style" : "background-color: #" + category.color + "; color: #" + category.text_color + "; background-image: url(\'" + 
                        category.background_url + "\');"
                    }
                }

Also, I’m wondering, how can I make the banner thinner for a fixed width design. When I attempted, it continued to be left-justified.

[jrgong]

I think it’s great that the category banners now render content in HTML.

Is there any way to display emojis there? In my case, I added three important links: Anfänger - Forum | Cannabisanbauen.net

I want to display the emojis next to each link as well. The original about topic is here: Über die Kategorie Anfänger - Anfänger - Forum | Cannabisanbauen.net

[awesomerobot (Kris)]

Not prefixing the category name is a recipe for disaster, so I’ve added category-banner- before the class name (e.g., category-banner-meta). If you were targeting the category name in your CSS you’ll just have to add category-banner- before it.

@jrgong

Is there any way to display emoji’s there?

I’m not sure, I don’t think our default category descriptions support them either, but I can look into it…

[Hang]

I want to use the uploaded background image from the category to put it in the background of the banner. I’ve edited the code and everything looks great. I wonder is there anything I can do to make the image load faster or together with the rest of the page? I want to avoid the flickering of the background for a second before the image appears.
Compressing image is certainly an option, but I wonder if there are others. Can I grab the thumbnail of the uploaded background image in the code? Thanks for all leads!

[Vanecx]

您好，感谢您提供这个主题组件！

我刚刚尝试按照这篇教程（完全按照相同的步骤）安装这个分类横幅组件，但没有任何效果。所有分类中都没有显示横幅。请问我是否有什么操作不当导致无法生效？我目前能想到的唯一解释是，“bootstrap” 警告是否阻止了它的运行？

[simon]

@Vanecx

所有分类中都没有横幅。我是否做了某些操作导致其无法生效？

默认情况下，如果您未为某个分类设置分类描述，主题组件将不会显示该分类的横幅。您可以通过取消勾选“如果未设置分类描述则隐藏横幅”复选框来更改此设置。

分类描述是通过编辑 Discourse 为每个分类自动创建的“关于此分类”主题来设置的。如果您已添加分类描述，或禁用了“隐藏无描述分类横幅”的设置，但仍未看到分类横幅，请告诉我们。我们将调查具体原因。

[Vanecx]

感谢您的回复。我已检查并确认论坛的每个类别都有描述：https://liege.pirateparty.be/forum/。为了确保无误，我已取消勾选“隐藏横幅…

[downey (Michael Downey)]

除了我之外，还有其他人认为在群组列表页面（例如 /g/foo）上启用相同的样式设计会更好吗？不幸的是，CSS 并不完全相同，我猜这需要额外处理群组名称右侧的各种按钮，即：

<kbd>:bust_in_silhouette: 请求</kbd>
<kbd>:email: 消息</kbd>
<kbd>:garbage: 删除</kbd>

这将极大地提升整体界面的一致性，让群组在用户界面中更像是一个“一等公民”。（个人看法）

[jord8on (Jordan)]

我超喜欢这些分类横幅！感谢你们开发了这个主题组件！

我希望能在我们论坛主页上也能显示这样的横幅，根据当前选择显示：

• “最新”讨论，或
• “热门”讨论，或
• “分类”，或
• “关注”（如果你正在使用 Follow 插件 ）

有没有相对简单的方法，让当用户选择上述任一选项时，能根据所选内容动态显示对应的横幅呢？

[Rhidian (Rhidian Bramley)]

@awesomerobot，希望你不介意我在这里分享这个……

我创建了这个 discourse-category-banners 主题的一个分支，名为

discourse-category-banner-boxes
https://github.com/naidihr/discourse-category-banner-boxes

你可以在这里预览它：

https://theme-creator.discourse.org/theme/Rhidian/discourse-category-banner-boxes

它基本上实现了相同的功能，但进行了一些修改：

• 分类横幅框以内联方式显示在主标题上方，而不是在顶部全宽显示。这样可以在顶部显示其他横幅主题，例如 discourse-versatile-banner。

• 分类横幅框的样式与 Discourse 原生的子分类框一致，后者是 Discourse 的核心组件。这些子分类框是 Discourse 分类设置中的一个显示选项：在此分类中显示子分类列表。该选项会以行或框的形式在主题列表上方显示子分类的名称和描述，并使用分类背景色作为左侧边框。

• 如果该分类是子分类，则分类名称将以面包屑导航的形式显示，格式如下：父分类名称：子分类名称

以下是该主题横幅框在原生子分类框上方的演示截图：

以下是子分类的截图，显示了指向父分类的面包屑引用：

这是我第一次尝试修改主题。希望这能有所帮助！

更新

我已将此适配重构为一个独立的组件，并添加了许多新功能，包括在标题中使用分类徽标图像和背景图像。这个新组件有效地替换了标准的 Discourse 分类标题，与分类横幅不同，因此它是一个全新的组件。请参阅：

Discourse Category Headers theme component

This theme component provides a number of enhancements for the Discourse category header. The ‘standard’ Discourse category header is displayed at the top of each category page, above the navigation links and list of topics. It is normally only visible if a category logo image has been uploaded in the category settings. The header displays the logo and a short description of the category, taken from the first paragraph of the ‘About the.. category’ topic. This theme component provides the foll…

[nathank (Nathan Kershaw)]

@awesomerobot

例外：如果您不希望某个分类显示横幅，请将分类名称添加到这里

这对我们不起作用。我尝试了分类别名和分类 ID，但横幅依然顽固地显示在那里。其他人能正常使用这个功能吗？

[awesomerobot (Kris)]

我刚刚试了一下，对我这边是有效的，它在查找区分大小写的类别 name。现在回想起来，这并不是实现它的最佳方式……我大概可以改进这一点。

[nathank (Nathan Kershaw)]

啊——那种分类适合我！而且你确实在上面的指南里提到了“名称”，只是我没注意到。

“名称”这个词不太直观，因为我们实际上并不怎么用它。但它确实经常被显示出来。我觉得在设置中把它表述得更明确一些就可以了。

[AntiMetaman]

与其添加例外来规定哪些类别不会显示已上传的横幅，我们能否直接指定哪些类别应显示哪些横幅？

[awesomerobot (Kris)]

这取决于具体的网站和使用场景，我敢肯定。我最初的想法是，网站更可能希望将其在所有地方实施，如果有例外，也只是少数几个。

如果你只想为少数几个类别实施横幅，可能有更好的主题组件选项，它们专为非通用覆盖而设计，例如 https://meta.discourse.org/t/versatile-banner/109133，或者自定义以下链接中提供的选项：https://meta.discourse.org/t/banner-themes-and-instructions-for-customizing-them/82368。

[Idan]

如果能上传图片来替换文字就太好了。

[oca]

感谢这个非常有用的组件！

能否添加一个小功能？

• 当分类不是公开时，为 <span.discourse-category-banners> 或 <div.category-title-header> 元素添加 restricted 类，就像分类徽章那样处理。

这将有助于通过额外的 CSS 调整横幅，向用户表明该分类是特殊的。

目前虽然可以实现，但用 CSS 选择锁图标并进行操作相当复杂。由于 CSS 没有父选择器，我无法利用锁图标的存在来判断是否应修改横幅。

我还不太熟悉如何提交 PR，但如果你们愿意接受我的修改，这将是我学习的好机会。

[Drew-ART (Drew)]

这个功能能否在标签页上实现？我找到了 tag-banners 插件，但它无法添加文本或链接。