我如何编辑使用 api.addCommunitySectionLink 添加的侧边栏链接？

开发
1

我想添加一个带有组件的新侧边栏链接。我正在使用此代码：

      api.addCommunitySectionLink({
        name: "custom-homepage",
        route: "discovery.custom",
        title: "Home",
        text: "Home",
        icon: "house",
      });

这会添加链接，但在自定义模态框中它不会显示。因此，我无法编辑默认链接或将其拖到其他位置。

我看到日历插件添加的链接也是如此。这是链接：

image
image246×227 6.21 KB

但在自定义模态框中，链接不会显示：

This image depicts a screenshot of a user interface for editing a custom section, showing icons and names for different custom links such as "Topics," "My Posts," "Review," and "Admin," along with corresponding URLs. (Captioned by AI)
This image depicts a screenshot of a user interface for editing a custom section, showing icons and names for different custom links such as "Topics," "My Posts," "Review," and "Admin," along with corresponding URLs. (Captioned by AI)593×466 18.2 KB

所以我想知道这是一个错误。或者是否有其他方法？

3 个赞
2

抱歉，您无法直接进行操作。

5 个赞
3

每次组件或插件更新都会撤销更改吗？

我想到的方法是根本不添加默认链接。

2 个赞
4

只有当您直接覆盖组件/插件时才会。如果您想更改现有部分中的顺序，最简单的方法可能是使用 CSS 重新排序

#sidebar-section-content-community {
  display: flex;
  flex-direction: column;
  
  li {
    order: 2
  }
  
  [data-list-item-name="upcoming-events"] {
    order: 1
  }
}

如果您想将项目移至“更多”抽屉，请隐藏原始项目并在单独的组件中复制它：

#sidebar-section-content-community {
  [data-list-item-name="upcoming-events"] {
    display: none;
  }
}

import { apiInitializer } from "discourse/lib/api";
import { i18n } from "discourse-i18n";

export default apiInitializer((api) => {
  const siteSettings = api.container.lookup("service:site-settings");
  if (
    siteSettings.discourse_post_event_enabled &&
    siteSettings.sidebar_show_upcoming_events
  ) {
    api.addCommunitySectionLink(
      {
        name: "custom-upcoming-events",
        route: "discourse-post-event-upcoming-events",
        text: i18n("discourse_post_event.upcoming_events.title"),
        title: i18n("discourse_post_event.upcoming_events.title"),
        icon: "calendar-days",
      },
      true,
    );
  }
});
2 个赞
5

如果无法在自定义模态框中修改新链接，我想我暂时会放弃添加它们的想法。在自定义模态框中添加一个难以捉摸的链接似乎会令人困惑。

但是，我希望（如果手动添加了）链接在相关路由上时能够高亮显示，所以我现在将添加这个：

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("0.8", (api) => {
  const router = api.container.lookup("service:router");

  api.onPageChange(() => {
    const currentRoute = router.currentRoute.name;
    const customHomepageLink = document.querySelector(
      '.sidebar-section-link[href="/custom"]'
    );

    if (currentRoute === "discovery.custom") {
      if (customHomepageLink) {
        customHomepageLink.classList.add("active");
      }
    } else {
      if (customHomepageLink) {
        customHomepageLink.classList.remove("active");
      }
    }
  });
});
1 个赞