안녕하세요 @digitaldominica! 다음 업데이트를 곧 출시할 예정이라서 잠시 동안 스레드를 확인하지 못해 죄송합니다. 모든 분들이 매우 가치 있는 피드백을 주시는데, 제가 시선을 돌리지 않으면 현재 작업 목록에 추가하는 습관이 생기기 때문에 업데이트 이후를 위해 남겨두려 합니다. 
@Arkshine 님이 말씀하신 대로, 이는 테마의 제약 사항 내에서 작동하는 꽤 해킹적인(hacky) 방법입니다 (Central의 대부분은 제가 개발자보다 디자이너가 우선이므로 프로토타이핑 단계에 불과합니다).
Central에서 거친 프로토타입을 어떻게 구현했는지 단계별 가이드를 드리겠습니다. 다만 주의할 점은, 사용자 메뉴에 대한 코어 업데이트가 이루어질 경우 이 솔루션이 미래에 적합하지 않을 수 있으며, 이 컴포넌트를 만드는 더 최적화된 방법이 있을 수 있다는 것입니다.
1단계: 사용자 정의 사용자 메뉴 컴포넌트 생성
다음 파일들을 생성하세요—
/javascripts/discourse/components/header-user-new.js
/javascripts/discourse/components/header-user-new.hbs
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
import { inject as service } from "@ember/service";
export default class HeaderUserNew extends Component {
@service currentUser;
@tracked isActive = false;
constructor() {
super(...arguments);
this.handleDocumentClick = this.handleDocumentClick.bind(this);
}
@action
toggleDropdown() {
this.isActive = !this.isActive;
if (this.isActive) {
setTimeout(() => {
document.addEventListener("click", this.handleDocumentClick);
}, 0);
} else {
document.removeEventListener("click", this.handleDocumentClick);
}
}
handleDocumentClick(event) {
const dropdown = document.querySelector(".header-user-new__menu");
const isClickInside = dropdown.contains(event.target);
if (!isClickInside) {
this.isActive = false;
document.removeEventListener("click", this.handleDocumentClick);
}
}
willDestroy() {
super.willDestroy();
document.removeEventListener("click", this.handleDocumentClick);
}
}
<div class={{concatClass "header-user-new" (if isActive "active")}}>
<button class="header-user-new__button" type="button" {{on "click" this.toggleDropdown}}>
{{avatar currentUser}}
</button>
<div class="header-user-new__menu">
<LinkTo class="header-user-new__profile" @route="user.summary" @model={{this.currentUser}}>
{{avatar currentUser}}
<div class="header-user-new__profile-info">
<span class="header-user-new__profile-name">
{{#if currentUser.name}}
{{currentUser.name}}
{{else}}
{{currentUser.username}}
{{/if}}
</span>
<span class="header-user-new__profile-view">
프로필 보기
</span>
</div>
</LinkTo>
<ul>
<li>
<LinkTo @route="userActivity.bookmarks" @model={{this.currentUser}}>
{{d-icon "bookmark"}}
<span>
{{i18n "js.user.bookmarks"}}
</span>
</LinkTo>
</li>
<li>
<LinkTo @route="preferences" @model={{this.currentUser}}>
{{d-icon "cog"}}
<span>
{{i18n "user.preferences"}}
</span>
</LinkTo>
</li>
<li>
<DButton @action={{route-action "logout"}}>
{{d-icon "sign-out-alt"}}
<span>
{{i18n "user.log_out"}}
</span>
</DButton>
</li>
</ul>
</div>
</div>
지금은 CSS 스타일링은 여러분이 직접 하시기로 하겠습니다만, 토글 효과를 위해 이 부분은 포함하는 것이 중요합니다—
.header-user-new {
&.active {
.header-user-new__menu {
display: flex;
}
}
.header-user-new__menu {
display: none;
}
}
2단계: 컴포넌트를 위젯으로 등록
다음 파일을 생성하세요—
/javascripts/discourse/widgets/header-user-new.js
import { hbs } from "ember-cli-htmlbars";
import RenderGlimmer from "discourse/widgets/render-glimmer";
import { createWidget } from "discourse/widgets/widget";
export default createWidget("header-user-new", {
tagName: "li.header-dropdown-toggle.header-user-new",
html() {
return [new RenderGlimmer(this, "div", hbs`<HeaderUserNew />`)];
},
});
3단계: 헤더에 위젯 추가, 기존 사용자 아이콘을 알림 벨 아이콘으로 교체
다음 파일을 생성하세요—
/javascripts/discourse/initializers/header-edit.js
import { h } from "virtual-dom";
import { withPluginApi } from "discourse/lib/plugin-api";
import { iconNode } from "discourse-common/lib/icon-library";
import I18n from "discourse-i18n";
export default {
initialize() {
withPluginApi("0.8", (api) => {
api.reopenWidget("header-notifications", {
html(attrs) {
const { user } = attrs;
let avatarAttrs = {
template: user.get("avatar_template"),
username: user.get("username"),
};
if (this.siteSettings.enable_names) {
avatarAttrs.name = user.get("name");
}
const contents = [h("div", iconNode("bell"))];
if (this.currentUser.status) {
contents.push(
this.attach("user-status-bubble", this.currentUser.status)
);
}
if (user.isInDoNotDisturb()) {
contents.push(h("div.do-not-disturb-background", iconNode("moon")));
} else {
if (user.new_personal_messages_notifications_count) {
contents.push(
this.attach("link", {
action: attrs.action,
className: "badge-notification with-icon new-pms",
icon: "envelope",
omitSpan: true,
title: "notifications.tooltip.new_message_notification",
titleOptions: {
count: user.new_personal_messages_notifications_count,
},
attributes: {
"aria-label": I18n.t(
"notifications.tooltip.new_message_notification",
{
count: user.new_personal_messages_notifications_count,
}
),
},
})
);
} else if (user.unseen_reviewable_count) {
contents.push(
this.attach("link", {
action: attrs.action,
className: "badge-notification with-icon new-reviewables",
icon: "flag",
omitSpan: true,
title: "notifications.tooltip.new_reviewable",
titleOptions: { count: user.unseen_reviewable_count },
attributes: {
"aria-label": I18n.t(
"notifications.tooltip.new_reviewable",
{
count: user.unseen_reviewable_count,
}
),
},
})
);
} else if (user.all_unread_notifications_count) {
contents.push(
this.attach("link", {
action: attrs.action,
className: "badge-notification unread-notifications",
rawLabel: user.all_unread_notifications_count,
omitSpan: true,
title: "notifications.tooltip.regular",
titleOptions: { count: user.all_unread_notifications_count },
attributes: {
"aria-label": I18n.t("user.notifications"),
},
})
);
}
}
return contents;
},
});
const currentUser = api.container.lookup("service:current-user");
if (currentUser !== null) {
api.addToHeaderIcons("header-user-new");
}
});
},
};
주요 변경 사항은 기존 header-notifications 위젯을 수정(또는 “재개” reopen)하여 사용자 아바타 대신 알림 아이콘을 사용하도록 avatarImg(…)를 iconNode로 교체한 것입니다.
참고용 기존 header-notifications 코드: discourse/app/assets/javascripts/discourse/app/widgets/header.js at 9bc78625af1d54693bc4f1bad3eaa9161ae030b6 · discourse/discourse · GitHub
그리고 @Arkshine 님이 언급하신 대로 CSS를 사용하여 알림 메뉴의 사용자 섹션을 숨겼습니다.
.d-header .panel {
.user-menu.revamped .bottom-tabs, #user-menu-button-profile {
display: none;
}
}