如何添加分类横幅？

支持
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/

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

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

4 个赞