# 如何添加分类横幅？

**URL:** https://meta.discourse.org/t/how-do-i-add-category-banners/136898
**Category:** Support
**Created:** [2019年十二月23日 15:51 UTC](https://meta.discourse.org/t/how-do-i-add-category-banners/136898 "2019-12-23T15:51:46Z")
**Posts on this page:** 1
**Showing post:** 10

<div class="post-metadata">

### Author: ![godgutten](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/godgutten/32/132077_2.png) [@godgutten](https://meta.discourse.org/u/godgutten)
#### Post date: [2020年七月28日 22:33 UTC](https://meta.discourse.org/t/how-do-i-add-category-banners/136898/10 "2020-07-28T22:33:37Z")

</div>

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

 ![4d34f94999cfa96f6578d9b3d6d33707](https://global.discourse-cdn.com/meta/original/3X/6/f/6fd5cf341719df4cf28c71d537949b885a7ffc62.jpeg)

首先，请下载这个文件  
[discourse-misc-html-css (2).zip](https://meta.discourse.org/uploads/short-url/nyEFxTT01syXreTir6NaY9FQKai.zip) (2.5 KB)

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

> [@Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966):
>
> This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Let’s start with themes. Themes In general, themes are not supposed to be compatible …

* * *

接下来，进入 **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);
});

```

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

> [@godgutten](#):
>
> 但是在顶部，不知道为什么有些类别重复显示了
> 
> ![](https://global.discourse-cdn.com/meta/original/3X/a/7/a71b4f2634dbba379a5074a3f88f45b22c12b04a.jpeg)

所以，我将在示例中添加 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](https://global.discourse-cdn.com/meta/original/3X/5/a/5ad9e335a6d1bfd2ed434baa87083c2aa5fa0763.png)

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

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

顺便提一下，这是我目前在我的网站上使用的设置  
[discourse-misc-html-css.zip](https://meta.discourse.org/uploads/short-url/7Cq0c5BbT6BNto3aTe1W90omXIl.zip) (2.5 KB)

* * *

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

* * *

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

* * *

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

---

_[View the full topic](https://meta.discourse.org/t/how-do-i-add-category-banners/136898)._