如果有人能告诉我如何更新 @pfaffman 的代码，我将在 GitHub 上发布一个主题组件来为顶部菜单添加一个注销按钮……
（目前按照那些说明操作并启用该组件只会导致整个顶部菜单消失 
）
1 个赞
差不多就是这样。您可以根据需要进行调整。
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;
}
}
}
3 个赞
好的，我已经把它滚动了，但我很想在提交给 Meta 之前进行任何测试……
（我最终以 Carson 的 Central Theme Header User Icons - #4 by carson 为起点）
2 个赞
我不建议使用小部件；它最终会作为核心现代化的一部分而被淘汰。
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。 
3 个赞
太棒了。非常感谢您花时间指导我！
1 个赞
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.