Je vais créer et publier un composant thématique sur GitHub pour ajouter un bouton de déconnexion au menu supérieur si quelqu’un pouvait me dire comment mettre à jour le code de @pfaffman ici…
(Pour le moment, suivre ces instructions et activer le composant ne fait que faire disparaître tout le menu supérieur 
)
Quelque chose comme ça. N’hésitez pas à l’adapter à vos besoins.
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, je l’ai déployé, mais j’apprécierais tout test avant de le soumettre à Meta…
(J’ai fini par utiliser le lien de Carson Central Theme Header User Icons - #4 by carson comme point de départ)
Je ne recommanderais pas d’utiliser un widget ; il finira par disparaître dans le cadre de la modernisation principale.
Il en va de même pour api.addToHeaderIcons ; il est maintenant déprécié au profit de api.headerIcons.add.
Voici quelques suggestions :
Je vous encourage à utiliser GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes comme référence lors de la création d’un composant de thème. Il contient les derniers fichiers de configuration. Il est utile pour le linting/prettifying du code et une bonne pratique d’avoir une structure standard.
Lorsque vous utilisez la syntaxe \u003ctemplate\u003e, renommez le fichier avec .gjs (glimmer JS) ; sinon, cela pourrait ne pas fonctionner.
Dans mon exemple, vous pourriez déplacer le template dans son propre fichier, par exemple :
/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;
Ensuite, dans l’initialiseur, vous importez le composant et l’utilisez comme paramètre dans 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" });
}
});
Faites-moi savoir si vous avez des questions. Je pourrai toujours créer une PR plus tard si vous avez besoin d’un exemple. 
Absolument génial. Merci beaucoup d’avoir pris le temps de me guider !
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.