새로운 헤더 아이콘 추가하는 방법

제품 지원
1

안녕하세요,

헤더에 새 아이콘(라이트/다크 테마 전환기용)을 추가하려고 하고 있습니다. 여기 다른 댓글에서 영감을 받아 시도해 보았지만, 예상대로 작동하지 않습니다. 게시글 페이지를 아래로 스크롤하면 아이콘이 사라지는데, 항상 표시되도록 도와주실 수 있을까요?

감사합니다 :grin:

(keep 클래스를 추가해 보았지만 여전히 사라졌습니다)

<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>
2

!showExtraInfo로 코드가 그렇게 지시하기 때문에 사라집니다 (showExtraInfo는 헤더의 스크롤 상태입니다):

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

해당 api.decorateWidget 블록 전체를 다음과 같이 변경하면:

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

스크롤해도 계속 표시되도록 할 수 있습니다.

3

아, 이제 좀 멍청한 것 같아. 그거 너무 오래 들여다봤거든. 네 코드를 좀 손보려다 이렇게 됐네! 고마워, 좋은 하루 보내 :grin: