커스텀 헤더 아이콘 업데이트: URL을 통해 게시 데이터 전송

개발
4

네, 사용자 이름이 포함된 외부 URL로 리다이렉트하는 것입니다.

새로운 API를 사용하여 이를 수행하는 기본적인 예시는 다음과 같습니다:

import { apiInitializer } from "discourse/lib/api";
import DButton from "discourse/components/d-button";

export default apiInitializer("1.8.0", (api) => {
  const currentUser = api.getCurrentUser();

  if (!currentUser) {
    return;
  }

  const url =
    "https://example.com/?u=" + encodeURIComponent(currentUser.username);

  const iconComponent = <template>
    <li class="calculator">
      <DButton
        @href={{url}}
        @icon="calculator"
        class="icon btn-flat"
        title="Calculator"
        target="_blank"
      />
    </li>
  </template>;

  api.headerIcons.add("calculator", iconComponent, { before: "search" });
});
  • calculator는 고유한 이름입니다.
  • iconComponent는 여기에서 볼 수 있듯이 인라인 glimmer <template>을 참조하지만, components 디렉터리에서 생성한 glimmer 클래스 컴포넌트를 참조할 수도 있습니다.
  • before 또는 after를 헤더 아이콘의 고유 이름 뒤에 사용하여 아이콘을 배치할 위치를 선택할 수 있습니다.

NVIDIA_Share_rvsjetCtUy

자유롭게 조정해 보세요!

참고:

  • UI를 사용하면 glimmer <template> 구문이 작동하지 않습니다.

    별도의 파일로 된 테마 컴포넌트를 생성해야 합니다. TC를 빠르게 생성하려면 Discourse CLI를 사용할 수 있으며, 코드 에디터로 매우 쉽게 개발할 수 있습니다. 강력히 권장합니다.

    Github의 템플릿도 사용할 수 있습니다: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes · GitHub.

    • glimmer 컴포넌트를 사용하려면 파일 확장자는 .gjs여야 합니다.

추가로 도움이 필요하시면 알려주세요!