상단 메뉴 로그아웃 버튼 테마 구성 요소

개발
4

위젯 사용을 권장하지 않습니다. 코어 현대화 작업의 일환으로 결국 사라질 예정이기 때문입니다.

api.addToHeaderIcons도 마찬가지입니다. 이제 api.headerIcons.add를 사용하는 것으로 대체되었습니다.

다음과 같은 몇 가지 제안을 드립니다:

  • 테마 컴포넌트를 만들 때 https://github.com/discourse/discourse-theme-skeleton을 참고하도록 권장합니다. 최신 설정 파일이 포함되어 있으며, 코드 린팅/포맷팅에 도움이 되고 표준적인 구조를 갖추는 데 좋은 관행입니다.

  • <template> 문법을 사용할 경우 파일 이름을 .gjs(glimmer JS)로 변경해야 합니다. 그렇지 않으면 작동하지 않을 수 있습니다.

  • 제 예시에서는 템플릿을 해당 파일로 이동할 수 있습니다. 예를 들어:
    /javascripts/discourse/components/logout-header-button.gjs

import DButton from "discourse/components/d-button";
import routeAction from "discourse/helpers/route-action";

const LogoutHeaderButton = <template>
  <li class="logout">
    <DButton
      @action={{routeAction "logout"}}
      class="btn-flat icon"
      @icon="sign-out-alt"
      @title="user.log_out"
      @label="user.log_out"
    />
  </li>
</template>;

export default LogoutHeaderButton;

그 후, 초기화 프로그램(initializer)에서 컴포넌트를 가져와 headerIcons의 매개변수로 사용합니다:

import LogoutHeaderButton from "../components/logout-header-button";

export default apiInitializer("1.28.0", (api) => {
  if (api.getCurrentUser()) {
    api.headerIcons.add("logout", LogoutHeaderButton, { before: "auth" });
  }
});
  • 버튼의 위치는 조정할 수 있습니다. 문서를 읽어보실 수 있습니다:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs#L1838-L1886

질문이 있으시면 말씀해 주세요. 예시가 필요하시면 나중에 PR을 보내 드릴 수 있습니다. :+1: