链接侧边栏按钮和脚本

开发
1

我想将其添加为侧边栏（汉堡菜单）中的按钮 → 更多，或添加到侧边栏底部，然后连接 JavaScript。我该如何访问 Discourse 侧边栏来实现此目的？

我尝试了以下方法，但没有成功。
我将其放在组件的 <body> 中。

<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

2 个赞
3 
api.addCommunitySectionLink({
  name: "unread",
  route: "discovery.unread",
  title: I18n.t("some.unread.title"),
  text: I18n.t("some.unread.text"),
  icon: "fa-envelope"
});

我把它放在组件的HTML body部分，但它似乎没有被添加到更多。不能这样做吗？

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:

1 个赞
5 

    api.addCommunitySectionLink({
      name: "install",
      route: "/install",
      title: "install",
      text: "install",
      icon: "download"
    });

我尝试将上面的代码添加到侧边栏视图中，但没有成功，所以我参考现有路径将其写成了下面的格式。但是，当按钮出现并按下时，脚本似乎无法正常工作。奇怪的是，当我按下“Topic”按钮而不是我创建的按钮时，脚本会起作用。要连接的脚本也放在了HTML的head中。


    api.addCommunitySectionLink({
      name: "install",
      route: "discovery.latest",
      title: "install",
      text: "install",
      icon: "download"
    });
1 个赞