我不建议使用小部件；它最终会作为核心现代化的一部分而被淘汰。
api.addToHeaderIcons 也是如此；它现在已弃用，取而代之的是 api.headerIcons.add。
以下是一些建议：
-
我鼓励您在创建主题组件时，参考 https://github.com/discourse/discourse-theme-skeleton。它包含最新的配置文件。它有助于代码的语法检查/美化，并养成标准结构的良好实践。
-
使用
\u003ctemplate\u003e语法时，请将文件重命名为.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 = \u003ctemplate\u003e
\u003cli class="logout"\u003e
\u003cDButton
@action={{routeAction "logout"}}
class="btn-flat icon"
@icon="sign-out-alt"
@title="user.log_out"
@label="user.log_out"
/\u003e
\u003c/li\u003e
\u003c/template\u003e;
export default LogoutHeaderButton;
然后在初始化器中，导入组件并在 headerIcons 中将其用作参数：
import LogoutHeaderButton from "../components/logout-header-button";
export default apiInitializer("1.28.0", (api) =\u003e {
if (api.getCurrentUser()) {
api.headerIcons.add("logout", LogoutHeaderButton, { before: "auth" });
}
});
- 按钮的位置可以调整。您可以阅读文档：
如果您有任何问题，请告诉我。如果需要示例，我可以稍后提交 PR。 