Discourse는 최근 api.decorateWidget를 비추천(deprecated) 처리했습니다. 저는 이 API를 사용하여 커스텀 헤더 아이콘을 삽입하고 URL을 통해 현재 사용자의 사용자 이름을 게시하는 데 사용했습니다.
새로운 headerIcons API를 통해 HTTP로 현재 사용자의 사용자 이름을 게시하는 방법을 알고 싶습니다. 이를 구현하는 방법에 대한 문서나 예제를 찾을 수 없었습니다. Customer Header Link 플러그인을 통해 이를 수행하는 방법도 찾을 수 없었습니다.
도와주시면 감사하겠습니다. 아래는 decorateWidget API를 사용하여 사용자 이름을 게시하는 저의 현재 코드입니다:
<script type="text/discourse-plugin" version="0.12">
const { iconNode } = require("discourse-common/lib/icon-library");
let icon = iconNode('calculator');
var currentUser = api.getCurrentUser();
var username = currentUser.username;
api.decorateWidget('header-icons:before', helper => {
const showExtraInfo = helper.attrs.minimized;
if(!showExtraInfo) {
return helper.h('li#calculator', [
helper.h('form#header-calculator.icon', {
action:'https://example.com/',
method:'post'
}, [
helper.h('button', {name:'u', value: username},[
iconNode('calculator'),
])
])
]);
}
});
</script>
안녕하세요,
도와드릴 수 있지만, 그 전에 어떤 것을 하려는 건지 설명해 주시겠어요?
메뉴 안에 폼을 표시하는 건가요?
예를 들어 이런 식으로요:
아니면, 사용자 이름이 라벨인 버튼이 URL로 리디렉션되는 건가요?
헤더 아이콘을 클릭하면 사용자의 사용자명이 지정된 URL로 전송됩니다.
실제로 폼은 표시되지 않습니다. 헤더 아이콘만 표시됩니다. 전송 동작은 백그라운드에서 수행됩니다. 혼동을 드려 죄송합니다. 게시글 제목에서 "form"을 삭제하겠습니다.
네, 사용자 이름이 포함된 외부 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를 헤더 아이콘의 고유 이름 뒤에 사용하여 아이콘을 배치할 위치를 선택할 수 있습니다.
자유롭게 조정해 보세요!
참고:
추가로 도움이 필요하시면 알려주세요!
@Arkshine 님, 안녕하세요,
상세한 설명을 올려주셔서 정말 감사합니다. <head>에 코드를 주입해 보았지만 아이콘이 표시되지 않습니다. 제가 뭘 잘못한 걸까요?
<script type="text/discourse-plugin">
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);
console.log("url: " + url)
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" });
});
</script>
@littleviolette 안녕하세요, 여기 관리자 UI에서는 실행할 수 없습니다.
Theme CLI를 사용하면 컴퓨터에서 테마 컴포넌트를 쉽게 생성할 수 있습니다.
그 후, 원하는 텍스트 에디터(vscode 등)로 파일을 편집하여 이니셜라이저에 코드를 추가합니다. /javascripts/discourse/api-initializers/my-header-icon.gjs 위치에 파일을 만들고 코드를 붙여넣으면 됩니다. about.json에서 기본값도 변경할 수 있습니다.
컴포넌트를 프로덕션 포럼에 설치하는 다음 단계:
- 컴포넌트를 Github에 올리고, 관리자 UI에서 저장소 링크를 사용하여 설치하거나;
- 컴퓨터에서 디렉토리를 zip으로 압축한 후, 관리자 UI에서 디바이스에서 설치할 수 있습니다.
한 번 시도해 보고 문제가 있으면 알려주세요!
