# 如何添加像Discourse主页一样漂亮的横幅

**URL:** https://meta.discourse.org/t/how-to-add-beautiful-banner-like-discourse-home-page/206523
**Category:** Support
**Created:** [2021年十月20日 07:56 UTC](https://meta.discourse.org/t/how-to-add-beautiful-banner-like-discourse-home-page/206523 "2021-10-20T07:56:04Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![Phenix1997](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/phenix1997/32/237158_2.png) [@Phenix1997](https://meta.discourse.org/u/Phenix1997)
#### Post date: [2021年十月20日 07:56 UTC](https://meta.discourse.org/t/how-to-add-beautiful-banner-like-discourse-home-page/206523/1 "2021-10-20T07:56:04Z")

</div>

我想添加一些功能，允许放置横幅以欢迎访客，

 ![home](https://global.discourse-cdn.com/meta/original/3X/9/e/9e2b8d504246fec4c73aec09e6ae565035520db5.png)  
我检查了所有 **主题**  
以及任何 **插件** 或 **扩展**

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2021年十月20日 08:10 UTC](https://meta.discourse.org/t/how-to-add-beautiful-banner-like-discourse-home-page/206523/3 "2021-10-20T08:10:07Z")

</div>

你好 @Phenix1997，  
查看以下主题：⬇

> [@How do I create a welcome banner like the one on this site?](https://meta.discourse.org/t/how-to-set-a-banner-like-this/203374?u=dodesz):
>
> Hi, I want to set up such a homepage banner in my forum, but I don’t know how to do it. Can someone help me? I will be very grateful!

---

<div class="post-metadata">

### Author: ![Phenix1997](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/phenix1997/32/237158_2.png) [@Phenix1997](https://meta.discourse.org/u/Phenix1997)
#### Post date: [2021年十月20日 13:42 UTC](https://meta.discourse.org/t/how-to-add-beautiful-banner-like-discourse-home-page/206523/4 "2021-10-20T13:42:38Z")

</div>

您能帮忙修改链接吗！  
请查看

 ![links](https://global.discourse-cdn.com/meta/original/3X/7/e/7eeb3dc4a5cd993403736a9a5858017857840192.png)

---

<div class="post-metadata">

### Author: ![Zup](https://avatars.discourse-cdn.com/v4/letter/z/c37758/32.png) [@Zup](https://meta.discourse.org/u/Zup)
#### Post date: [2021年十月20日 19:32 UTC](https://meta.discourse.org/t/how-to-add-beautiful-banner-like-discourse-home-page/206523/5 "2021-10-20T19:32:51Z")

</div>

更改文本：

> <https://github.com/discourse/discourse-meta-banner/blob/main/locales/en.yml>

更改链接和图标：  
[https://github.com/discourse/discourse-meta-banner/blob/main/javascripts/discourse/templates/components/meta-banner.hbs](https://github.com/discourse/discourse-meta-banner/blob/main/javascripts/discourse/templates/components/meta-banner.hbs)

---

<div class="post-metadata">

### Author: ![Phenix1997](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/phenix1997/32/237158_2.png) [@Phenix1997](https://meta.discourse.org/u/Phenix1997)
#### Post date: [2021年十月21日 09:48 UTC](https://meta.discourse.org/t/how-to-add-beautiful-banner-like-discourse-home-page/206523/6 "2021-10-21T09:48:02Z")

</div>

有图标提供商吗？

---

<div class="post-metadata">

### Author: ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej)
#### Post date: [2021年十月21日 11:51 UTC](https://meta.discourse.org/t/how-to-add-beautiful-banner-like-discourse-home-page/206523/7 "2021-10-21T11:51:00Z")

</div>

如果这就是您的意思，Discourse 使用 [Version 5 Icons | Font Awesome](https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=regular,solid&m=free) 作为图标。

---

<div class="post-metadata">

### Author: ![Phenix1997](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/phenix1997/32/237158_2.png) [@Phenix1997](https://meta.discourse.org/u/Phenix1997)
#### Post date: [2021年十月21日 12:07 UTC](https://meta.discourse.org/t/how-to-add-beautiful-banner-like-discourse-home-page/206523/8 "2021-10-21T12:07:29Z")

</div>

我尝试用新图标替换旧图标并上传，但没有任何变化。  
查看

 ![icons](https://global.discourse-cdn.com/meta/original/3X/4/1/414c7c36f760fc99b1c8e9ddcd840f0c30414ebf.png)

```plaintext
{{#if (and shouldShow discoveryRoute)}}
  <div class="custom-homepage-wrapper">
    <div class="wrap custom-homepage">
      <div class="welcome-wrapper">
        <div class="welcome-content">
          <h2>{{theme-i18n "meta_banner.welcome"}}</h2>
          <p>{{theme-i18n "meta_banner.subtitle"}}</p>
        </div>
        <div class="featured-todo">
          <div>
            <a href="https://forum.ongurutips.com/search?expanded=true">
              <h3>{{d-icon "info-circle"}}
                {{theme-i18n "meta_banner.docs"}}</h3>
            </a>
          </div>
          <div>
            <a href="https://www.fiverr.com/phenix1997">
              <h3>{{d-icon "fab-discourse"}}
                {{theme-i18n "meta_banner.themes"}}</h3>
            </a>
          </div>
          <div>
            <a href="https://ongurutips.com">
              <h3>
                {{d-icon "fab-discourse"}}
                {{theme-i18n "meta_banner.hosting"}}</h3>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
{{/if}}

```

我的新图标！PNG 格式

 ![blogging](https://global.discourse-cdn.com/meta/original/3X/a/3/a37c4806211f1051c58482818b1226deba740dd9.png)

查看 [https://forum.ongurutips.com](https://forum.ongurutips.com)

---

<div class="post-metadata">

### Author: ![Banjo](https://avatars.discourse-cdn.com/v4/letter/b/7cd45c/32.png) [@Banjo](https://meta.discourse.org/u/Banjo)
#### Post date: [2021年十月22日 05:47 UTC](https://meta.discourse.org/t/how-to-add-beautiful-banner-like-discourse-home-page/206523/9 "2021-10-22T05:47:26Z")

</div>

我们如何更改横幅的 Font Awesome 图标？

~ 论坛 [ongurutips.com](http://ongurutips.com) 的管理员

---

<div class="post-metadata">

### Author: ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej)
#### Post date: [2021年十月22日 08:56 UTC](https://meta.discourse.org/t/how-to-add-beautiful-banner-like-discourse-home-page/206523/10 "2021-10-22T08:56:16Z")

</div>

只需将这些替换为您喜欢的图标

 ![sketch-1634892929852](https://global.discourse-cdn.com/meta/original/3X/e/f/ef97dd1ede1da5d9d0210b87c15332a977baae28.jpeg)

---

<div class="post-metadata">

### Author: ![Phenix1997](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/phenix1997/32/237158_2.png) [@Phenix1997](https://meta.discourse.org/u/Phenix1997)
#### Post date: [2021年十月22日 14:08 UTC](https://meta.discourse.org/t/how-to-add-beautiful-banner-like-discourse-home-page/206523/11 "2021-10-22T14:08:51Z")

</div>

我尝试过，但没有人能解决。您能建议其他方案吗？

---

<div class="post-metadata">

### Author: ![Critical\_DevX](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/critical_devx/32/269036_2.png) [@Critical\_DevX](https://meta.discourse.org/u/Critical_DevX)
#### Post date: [2023年一月26日 12:32 UTC](https://meta.discourse.org/t/how-to-add-beautiful-banner-like-discourse-home-page/206523/12 "2023-01-26T12:32:26Z")

</div>

兄弟，你是怎么用的，我这里显示不了。