누군가 여기에 있는 @pfaffman의 코드를 어떻게 업데이트해야 하는지 알려주신다면, 상단 메뉴에 로그아웃 버튼을 추가하기 위한 테마 컴포넌트를 GitHub에 올릴 예정입니다…
(현재 해당 지침을 따르고 컴포넌트를 활성화하면 상단 메뉴 전체가 사라집니다 
)
이런 식으로 구현할 수 있습니다. 필요에 맞게 자유롭게 수정해 보세요.
import DButton from "discourse/components/d-button";
import routeAction from "discourse/helpers/route-action";
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer("1.28.0", (api) => {
if (api.getCurrentUser()) {
api.headerIcons.add(
"logout",
<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>,
{ before: "auth" }
);
}
});
.d-header-icons .logout {
margin-left: 1em;
button.icon {
width: auto;
padding-left: 0.5em;
padding-right: 0.5em;
svg {
margin-right: 0.2em;
width: 1em;
}
}
}
OK, 롤백은 했지만 Meta에 제출하기 전에 테스트를 해 주시면 감사하겠습니다…
(결국 Carson의 https://meta.discourse.org/t/central-theme-header-user-icons/291526/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" });
}
});
- 버튼의 위치는 조정할 수 있습니다. 문서를 읽어보실 수 있습니다:
질문이 있으시면 말씀해 주세요. 예시가 필요하시면 나중에 PR을 보내 드릴 수 있습니다. 
정말 너무 좋아요. 시간을 내어 도와주셔서 정말 감사합니다!