사이드바 버튼과 스크립트 연결

개발
1

사이드바(햄버거 메뉴)의 ‘더 보기’ 항목 또는 사이드바 하단에 버튼 형태로 추가하고, 이후 JavaScript를 연결하고 싶습니다. 이를 위해 Discourse 사이드바에 어떻게 접근해야 하나요?

아래와 같이 시도했지만 작동하지 않았습니다.
컴포넌트의 에 삽입했습니다.

<div class="sidebar-custom-sections">
  <ul class="sidebar-more-section-links-details-content-main">
    <li data-list-item-name="Install" class="sidebar-section-link-wrapper" id="sidebar_install_wrapper">
      <a href="#" rel="noopener noreferrer" target="_self" data-link-name="Install" class="sidebar-section-link sidebar-row" id="sidebar_install_button">
        <span class="sidebar-section-link-prefix icon">
          <svg class="fa d-icon d-icon-download svg-icon prefix-icon svg-string" xmlns="http://www.w3.org/2000/svg">
            <use href="#download"></use>
          </svg>
        </span>
        <span class="sidebar-section-link-content-text">
          Install
        </span>
      </a>
    </li>
  </ul>
</div>
2

여기에 새 링크를 추가하는 것을 의미하신다면:

image
image299×413 5.44 KB

addCommunitySectionLink API를 사용할 수 있습니다. 주석에 예시가 있습니다.

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs#L2414-L2471

3 
<script>
api.addCommunitySectionLink({
  name: "unread",
  route: "discovery.unread",
  title: I18n.t("some.unread.title"),
  text: I18n.t("some.unread.text"),
  icon: "fa-envelope"
});
</script>

컴포넌트의 HTML body 섹션에 이렇게 넣었는데, '더 보기(More)'에 추가되지 않는 것 같습니다. 이런 방식으로 하는 것이 불가능한가요?

4

Head에는 다음 코드를 사용해야 합니다:

<script type="text/discourse-plugin" version="0.8">
    api.addCommunitySectionLink({
      name: "unread",
      route: "discovery.unread",
      title: I18n.t("some.unread.title"),
      text: I18n.t("some.unread.text"),
      icon: "fa-envelope"
    });
</script>

API를 사용하려는 경우 <script type="text/discourse-plugin" version="0.8">는 중요합니다.

이렇게 하면 더 잘 작동할 것입니다. :+1:

5 
<script type="text/discourse-plugin" version="0.8">
    api.addCommunitySectionLink({
      name: "install",
      route: "/install",
      title: "install",
      text: "install",
      icon: "download"
    });
</script>

위 코드를 사이드바의 뷰에 추가하려고 했으나 작동하지 않아, 기존 경로를 참고하여 아래 형식으로 작성했습니다. 그러나 버튼이 표시되고 클릭해도 스크립트가 제대로 작동하지 않는 것 같습니다. 이상하게도, 내가 만든 버튼 대신 ‘Topic’ 버튼을 누르면 스크립트가 정상적으로 작동합니다. 연결하려는 스크립트는 HTML의 head 부분에 배치했습니다.

<script type="text/discourse-plugin" version="0.8">
    api.addCommunitySectionLink({
      name: "install",
      route: "discovery.latest",
      title: "install",
      text: "install",
      icon: "download"
    });
</script>