# 如何添加新的标题图标

**URL:** https://meta.discourse.org/t/how-to-add-a-new-header-icon/180273
**Category:** Support
**Created:** [2021年二月18日 23:36 UTC](https://meta.discourse.org/t/how-to-add-a-new-header-icon/180273 "2021-02-18T23:36:49Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![AlexJC](https://avatars.discourse-cdn.com/v4/letter/a/eada6e/32.png) [@AlexJC](https://meta.discourse.org/u/AlexJC)
#### Post date: [2021年二月18日 23:36 UTC](https://meta.discourse.org/t/how-to-add-a-new-header-icon/180273/1 "2021-02-18T23:36:49Z")

</div>

你好，

我试图在页眉中添加一个新图标（用于浅色/深色主题切换器），并参考了这里的另一条评论，但效果不太理想。滚动帖子页面时图标会消失，有人能帮我让它始终显示吗？

非常感谢 😁

（我尝试添加了 `keep` 类，但它仍然消失了）

```html
<script type="text/discourse-plugin" version="0.8">
  var h = require('virtual-dom').h;
  var ajax = require('discourse/lib/ajax').ajax;
  var themeSelector = require('discourse/lib/theme-selector');
  var light = 94;
  var dark = 98;
  
  const { iconNode } = require("discourse-common/lib/icon-library");
  let icon = iconNode('adjust');

  api.createWidget("header-theme-selector", {
      tagName: "span.header-theme-selector",
      buildKey: attrs => `header-theme-selector`,
      click(event){
          let $target = $(event.target);
          let id = light;
          let user = api.getCurrentUser();
          if(user){
              console.log(themeSelector.currentThemeId());
            if (themeSelector.currentThemeId() == light) {
              id = dark;
            }
            user.findDetails().then(user => {
                  seq = user.get("user_option.theme_key_seq");
                  this.setTheme(id, seq);
              });
          }else{
              this.setTheme(id);
          };
          return true;
      },
      setTheme(themeId, seq = 0){
          themeSelector.setLocalTheme([themeId], seq);
          window.location.reload();
          this.scheduleRerender();
      },
      html(attrs, state){
            return [h('div', {attributes: {"class": "switcher keep"}}, icon)];
      }
  });
  
  api.decorateWidget('header-buttons:after', (helper)=>{
    const showExtraInfo = helper.attrs.topic;
    if(!showExtraInfo) {
        return [helper.widget.attach('header-theme-selector')];
      }
  });
</script>

```

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2021年二月18日 23:40 UTC](https://meta.discourse.org/t/how-to-add-a-new-header-icon/180273/2 "2021-02-18T23:40:00Z")

</div>

它会消失，因为代码通过 `!showExtraInfo` 指示它这样做（`showExtraInfo` 是标题的滚动状态）：

```js
  if(!showExtraInfo) {
        return [helper.widget.attach('header-theme-selector')];
      }

```

如果您将整个 `api.decorateWidget` 代码块修改为：

```js
api.decorateWidget('header-buttons:after', (helper)=>{
  return [helper.widget.attach('header-theme-selector')];  
});

```

那么即使滚动后，它也应该继续显示。

---

<div class="post-metadata">

### Author: ![AlexJC](https://avatars.discourse-cdn.com/v4/letter/a/eada6e/32.png) [@AlexJC](https://meta.discourse.org/u/AlexJC)
#### Post date: [2021年二月18日 23:41 UTC](https://meta.discourse.org/t/how-to-add-a-new-header-icon/180273/3 "2021-02-18T23:41:35Z")

</div>

哎呀，我现在觉得自己好笨，盯着那个看了太久。谁让我非要试着修改你的代码呢！非常感谢，祝你有美好的一天 😁