带有横幅的类别列表

此组件为默认的类别页面样式仅类别带精选主题的类别添加可选横幅:

您可以在组件设置中通过定义横幅正下方的类别、横幅颜色和标题文本来添加横幅。还有一个选项可以隐藏默认的彩色边框:

要添加样式,您可以选择通用类,以及按类别 ID 指定的特定横幅:

.category list .category-list-banner {
  &.category-5 { [样式化特定横幅] }
  &:after { [样式化标题] }
}

例如,您可以为类别设置颜色编码:

或者添加背景图像:

:warning: 此组件仅为类别页面添加布局元素。因此,您无法在站点的其他地方引用这些标题。另一个注意事项:移动设备上没有默认的仅类别页面样式。它将始终显示精选主题。

:+1: 鸣谢:此组件的灵感来源于 Cfx.re 社区 的外观,以及 @godgutten如何添加类别横幅? 中分享的实现该外观的原始解决方案。

28 个赞

感谢 Nolo,非常棒!你们的组件提升了我们的社区。

1 个赞

Nolo,我发现切换论坛样式到夜间模式时还有另一个问题。如果你能修复它,那就完美了!

这看起来是预期行为。颜色槽接受任何可用作 CSS 中 background-color 的值。因此,当你提供十六进制值时,它在不同模式和主题下将保持相同颜色。

如果你实际上不想要背景色,应指定 nonetransparent

如果你想要一个随模式变化的背景色,则需要使用 CSS 自定义属性:你可以使用 Discourse 预定义的一个,例如 var(--secondary-high)。或者按照以下链接中的说明自行定义:

3 个赞

Nolo,谢谢,这很有帮助!

2 个赞

你好,我很高兴看到你创造出来的东西。但是,你是否也应该给我一些署名,而不是仅仅剽窃我的作品……

很高兴你喜欢这个组件!我不确定你为什么指责我剽窃你的作品……?

制作这个组件的灵感来自于这个话题:

我曾将发帖人引荐到你的解决方案,但随后我对此产生了兴趣,想知道如何不硬编码模板,而是通过解析 SCSS 中的设置列表来解构值。所以组件代码本质上就是关于这个解决方案的:
https://meta.discourse.org/t/how-to-add-settings-to-your-discourse-theme/82557/52?u=nolo

但无论如何:如果你觉得我使用了你的部分作品而我没有注明出处,请告诉我,我会更新第一篇帖子 :ok_hand:

1 个赞

是的,请务必至少给我一些署名。不过,这取决于你。除此之外,它看起来不错,我将在我的帖子里推荐这个主题组件,因为它让新用户更容易上手。

2 个赞

@ Nolo
是否有办法在 TC 中,或者在主题中使用 CSS 将标题文本左对齐,就像你的第二个示例一样)。

另外,是否有办法(如果不使用横幅图像)将标题的大小调整为仅与一行文本的厚度相同。
如果可以,能否调整文本大小,使其不那么大?

2 个赞

当然可以,您可以使用这些类来设置横幅样式:

如果您想覆盖通用类上的现有声明,则需要使用 !important 属性。例如,对于您提到的样式:

.category-list .category-list-banner {
    justify-content: flex-start !important;
    min-height: unset !important;
    &:after {
        font-size: var(--font-up-3) !important;
    }
}

这是因为样式实际上是在特定横幅上声明的。我想我可以在组件上改进这一点,但目前您需要使用 important 来覆盖。

3 个赞

非常感谢您提供的这个组件!!我正在开发一个政治论坛,能够应用这种分隔至关重要。
虽然这已经大大改善了我的论坛,但如果标题可以通过 URL 引用,那将是天壤之别,因为这将允许在论坛顶部创建按钮,用户可以轻松地在同一页面中导航。如果论坛(希望如此)变得大很多,这将是一个极其敏捷的功能。目前有可能实现吗?

1 个赞

感谢 @lisandro_iaffar 的建议。不过,这个组件只是提供了一个不更改 html 模板的轻量级解决方案。如果你想引用这些部分,你需要使用 GitHub - discourse/discourse-minimal-category-boxes 提供的类似方法。

2 个赞

感谢您的回答和提供的指导 :slight_smile:
再次感谢您提供的这个组件,它极大地改善了我的论坛布局 :smiley:

2 个赞

我很高兴尝试这个,因为我创建了太多的类别,能够将它们组织成组将非常有帮助。

我尝试后就会知道,这也可以成为将旧的、使用较少的类别从主页上移除的方法,对吗?它们仍然可以通过新的侧边栏访问。

1 个赞

是的,当然 :+1: 实际上,我几乎总是在不同的页面元素(侧边栏、页眉、导航栏、类别页面等)上选择类别。这就像一个网站的站点结构。它需要组织良好,但这并不需要决定你的 UI 呈现。

您好 @manuel,我想知道这个很棒的组件在经过语音更新后是否仍然有效,我安装了它但它对我不起作用,提前谢谢您。

如何添加背景图片?

您好,欢迎 :wave:

您可以在主题或单独的主题组件中添加 CSS:

例如,假设您想为类别 ID 4 添加图片,您可以这样做:

.category-list .category-list-banner {
    &.category-4 {
        background-image: url(https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg);
        background-size: cover;
    }
}

这只是一个示例。有关更多信息,您可以查看 background CSS 属性。

还有一些有用的链接 :+1: :

2 个赞

一个帖子被拆分到一个新主题:在分类框中添加额外信息