Composant de thème du bouton de déconnexion du menu supérieur

Dev
4

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" });
  }
});
  • L’emplacement du bouton peut être ajusté. Vous pouvez consulter la documentation :

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs#L1838-L1886

Faites-moi savoir si vous avez des questions. Je pourrai toujours créer une PR plus tard si vous avez besoin d’un exemple. :+1: