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

따라서 이것이 버그인지, 혹은 다른 접근 방식이 있는지 궁금합니다.

2

아쉽게도 불가능합니다.

3

모든 컴포넌트 또는 플러그인 업데이트 시 변경 사항이 되돌려지나요?

그러면 기본 링크를 아예 추가하지 않는 것이 최선인 것 같습니다.

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,
    );
  }
});
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");
      }
    }
  });
});