如何添加分类横幅？

支持
1

我该如何实现类似的效果？

当我向我的分类添加图片时，它们都被缩小且看起来很丑。

是否有自定义插件或其他方法？

2

请查看 https://meta.discourse.org/t/discourse-category-banners/86241。这是一个主题组件，您可以将其安装到您的网站上，以便为分类添加横幅。主题底部的“额外 CSS 样式”部分详细介绍了如何为横幅设置背景图像。

3

看样子那似乎是分类的横幅，我需要的是能显示板块的横幅，让我解释得更清楚些……

这就是我想要的。

5

这需要一些定制工作。如果您想自己动手，请查看 主题指南；如果您想聘请他人代劳，请在 Marketplace 分类下创建一个主题。

6

这就是他们使用的，但我无法让它正常工作

discourse-misc-html-css (2).zip (2.5 KB)

7

CSS 和 Head 选项卡中都有许多链接和项需要编辑，您都处理了吗？

8

这就是 FiveM 目前使用的自定义 CSS，也是管理员团队发给我的内容，但我不知道如何让它生效。

discourse-misc-html-css (2).zip (2.5 KB)

9

所以，我已经为此工作了一段时间，现在它大概能用了

图片

1586×1904 808 KB

说实话，效果非常好

但在顶部，不知为何它重复了一些分类

1567×1821 748 KB

我该如何解决这个问题，避免分类重复？

这是我的配置文件
discourse-misc-html-css.zip|附件 (2.5 KB)

10

所以现在我至少已经为自己修复了这个问题

4d34f94999cfa96f6578d9b3d6d33707
4d34f94999cfa96f6578d9b3d6d337072284×1940 911 KB

首先，请下载这个文件
discourse-misc-html-css (2).zip (2.5 KB)

如果你不确定如何将此文件添加到你的网站，请先查看这份指南

接下来，进入 Misc/HTML+CSS 部分，然后在 CSS 中调整一些设置

首先，你需要复制这一行

        &.fivem > .category-list {
        &:before {
            content: 'FiveM';
        }
        
        background-image: url(https://i.imgur.com/1YZTip0.png);
    }

然后，将你想要显示的横幅名称进行修改

在我的示例中，我将使用 test1

        &.test1 > .category-list {
        &:before {
            content: 'test1';
        }
        
        background-image: url(https://i.imgur.com/1YZTip0.png);
    }

这样，CSS 部分的设置就完成了

接下来，进入 部分

向下滚动到

<script type='text/x-handlebars' data-template-name='components/categories-with-featured-topics'>

找到名为
<div class="category-thing fivem"> 的部分

然后复制

<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
                  latestTopicOnly=latestTopicOnly
                  showTopics=true}}
</div>

并将其修改为你自己的设置，在我的示例中我使用了 test1

所以我会在这里做同样的操作

<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
              latestTopicOnly=latestTopicOnly
              showTopics=true}}
</div>

接下来向下滚动到
<script type='text/x-handlebars' data-template-name='mobile/components/categories-with-featured-topics'>

然后找到

<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
              latestTopicOnly=latestTopicOnly
              showTopics=true}}
</div>

并将其修改为你自己的设置，在我的示例中，我将 fivem 改为 test1

<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
                  latestTopicOnly=latestTopicOnly
                  showTopics=true}}
</div>

然后继续向下滚动，找到包含以下内容的部分

registerUnbound('filter-core', (categories) => {
   return categories.filter(a => !a.slug.match(/^redm-/) && !a.name.match(/^fivem/i) && !a.read_restricted);
});

在这里，你需要添加我们之前创建的类别标志。添加它的原因是为了避免类别重复，就像我遇到的这个问题一样

所以，我将在示例中添加 test1

registerUnbound('filter-core', (categories) => {
   return categories.filter(a => !a.slug.match(/^redm-/) && !a.name.match(/^test1/i) && !a.name.match(/^fivem/i) && !a.read_restricted);
});

然后向下滚动，找到名为以下内容的部分

registerUnbound('filter-fivem', (categories) => {
   return categories.filter(a => a.name.match(/^fivem/i));
});

在这里，你需要将 fivem 替换为你想要的名称，所以在我的示例中，我将添加 test1

registerUnbound('filter-test1', (categories) => {
   return categories.filter(a => a.name.match(/^test1/i));
});

这样就完成了

接下来，你需要更改你的类别标识（Slug），以下是我的示例
2bf89bcdcb2f897364bb984c82d4e343

然后该类别将显示在 test1 横幅下

而其他所有类别将显示在核心 CFX.RE 横幅下（在此示例中）

顺便提一下，这是我目前在我的网站上使用的设置
discourse-misc-html-css.zip (2.5 KB)

如果你想查看效果，可以访问这里
https://forum.tgacommunity.com/

另外，你可以将此主题标记为已解决吗？

希望这能帮到大家，如果有任何问题，请随时在这里或私信问我。

11

大家好。@manuel 创建了一个主题组件，它扩展了这段代码，让人们更容易在自己的论坛上使用它。

但两种方法都有效，具体取决于您想如何操作。而且两种方法都能得到相同的结果。