Componenti del tema del pulsante di logout del menu superiore

Sviluppatore
4

Sconsiglio l’uso di un widget; alla fine scomparirà come parte della modernizzazione principale.

Lo stesso vale per api.addToHeaderIcons; ora è deprecato a favore di api.headerIcons.add.

Ecco alcuni suggerimenti:

  • Ti incoraggio a usare GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes come riferimento quando crei un componente tema. Contiene i file di configurazione più recenti. È utile per il linting/prettifying del codice ed è una buona pratica avere una struttura standard.

  • Quando usi la sintassi \u003ctemplate\u003e, rinomina il file con .gjs (glimmer JS); altrimenti, potrebbe non funzionare.

  • Nel mio esempio, potresti spostare il template nel suo file, ad esempio:
    /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;

Quindi, nell’initializer, importi il componente e lo usi come parametro in 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" });
  }
});
  • La posizione del pulsante può essere regolata. Puoi leggere la documentazione:

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

Fammi sapere se hai domande. Posso sempre fare un PR più tardi se hai bisogno di un esempio. :+1: