Top-Menü Abmelden-Schaltflächen-Theme-Komponente

Entwickler
4

Ich würde nicht empfehlen, ein Widget zu verwenden; es wird schließlich als Teil der Kernmodernisierung verschwinden.

Dasselbe gilt für api.addToHeaderIcons; es ist jetzt zugunsten von api.headerIcons.add veraltet.

Hier sind einige Vorschläge:

  • Ich ermutige Sie, GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes als Referenz bei der Erstellung einer Theme-Komponente zu verwenden. Es enthält die neuesten Konfigurationsdateien. Es ist hilfreich für das Linting/Prettifying von Code und eine gute Praxis, eine Standardstruktur zu haben.

  • Bei der Verwendung der \u003ctemplate\u003e-Syntax benennen Sie die Datei mit .gjs (glimmer JS) um; andernfalls funktioniert sie möglicherweise nicht.

  • In meinem Beispiel könnten Sie die Vorlage in ihre eigene Datei verschieben, zum Beispiel:
    /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;

Dann importieren Sie im Initializer die Komponente und verwenden sie als Parameter 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" });
  }
});
  • Die Position des Buttons kann angepasst werden. Sie können die Dokumentation lesen:

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

Lassen Sie mich wissen, wenn Sie Fragen haben. Ich kann später immer noch einen PR erstellen, wenn Sie ein Beispiel benötigen. :+1: