api.addCommunitySectionLinkを使って追加されたサイドバーのリンクをどう編集できますか？

開発
1

コンポーネントを使用して新しいサイドバーリンクを追加したいと思います。このコードを使用しています。

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

これによりリンクは追加されますが、カスタマイズモーダルに表示されません。そのため、デフォルトのリンクを編集したり、別の位置にドラッグしたりすることができません。

Calendarプラグインによって追加されたリンクも同様です。以下がそのリンクです。

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