Fügen Sie einen Logout-Button zum oberen Menü hinzu

Entwickler
1

Ich habe einen Kunden mit einer Community, deren Mitglieder häufig öffentliche Computer nutzen. Bei ihren Tests stellen sie fest, dass viele Benutzer Schwierigkeiten haben, den Abmeldelink im Hamburger-Menü zu finden. Leider glaube ich nicht, dass es einen guten Weg gibt, allen das Drücken von ZZ beizubringen.

Daher versuche ich, einen Abmelden-Button in das obere Menü zu integrieren.

Es scheint, als könnte ich die Anleitung unter (Superseded) Add a "+ New Topic" button on every page verwenden, um statt eines neuen Themas einfach abzumelden. Ich nehme an, es sollte „einfach" sein, dieses createTopic in logout zu ändern, und dann wäre die Aufgabe erledigt.

https://github.com/discourse/discourse-new-topic-button-theme-component/blob/master/common/header.html#L39

Ich habe eine Stunde oder so herumprobiert, aber ich kann das nicht ganz herausfinden.

2

Ich werde gerne das verwenden, was du dir ausdenkst.

Könntest du die API-Funktion für den Home-Button nachahmen?

image

<script type="text/discourse-plugin" version="0.4">
  api.changeWidgetSetting('home-logo', 'href', 'xxx')
</script>
3

Ich habe den Button OK, aber die Logout-API kann ich nicht finden.

4

Entschuldigung, mir gefällt der Plan und ich hatte gehofft, helfen zu können. Was bedeutet die 0, und ist sie Teil von document.querySelector, was vielleicht weiterhilft?

image
image371×113 3.78 KB

5

Ich habe es verstanden! Ich verspreche nicht, dass es bei dir funktioniert, aber das könnte es für dich erledigen.

Dies ist common/header.html

<script type="text/discourse-plugin" version="0.8">    
    const { iconNode } = require("discourse-common/lib/icon-library");
    const { logout } = require("discourse/lib/logout");

    api.decorateWidget("header-buttons:before", helper => {
        if (!Discourse.User.current()) return;
        currentUser = Discourse.User.current();


        let container = api.container,
        logout_text = 'Abmelden', // Button-Text!
        logout_title = 'Abmelden',
        logout_icon = 'sign-out-alt',
        logout_button_class = "btn btn-default btn btn-icon-text",
        logout_button_helper = "button#logout",
        logout_label_helper = "span.d-button-label",
        composerModal = require("discourse/models/composer").default,
        composerController = container.lookup("controller:composer");

        const myLogout = function () {
            if (currentUser) {
                currentUser.destroySession();
            }
        };
 

        let currentUser = Discourse.User.current();
        let currentUsername = Discourse.User.current().username;
        return helper.h("span.header-links", [

        helper.h(
            logout_button_helper,
            {
              className: logout_button_class,
              title: logout_title,
              onclick: myLogout
            },
            [iconNode(logout_icon), helper.h(logout_label_helper, logout_text)]
          )        
      ])
    });
    </script>
6

WTF Jay,

Ich habe das Skript eingefügt und habe

Zusammenfassung

einen funktionierenden Button erhalten!
image

image
image870×335 53.2 KB

Ich muss das Erscheinungsbild noch etwas anpassen, aber es funktioniert. Tolle Arbeit!

Danke für den Beitrag :sunglasses:

8

Hallo Jay,
dein Code funktioniert einwandfrei!
Ich habe ein benutzerdefiniertes Menü unter dem Standard-Header. Wie kann ich diese Schaltfläche dorthin verschieben? Screenshot by Lightshot
Um meine benutzerdefinierte Navigation zu erstellen, habe ich HTML im Bereich Allgemein > Header hinzugefügt.

Vielen Dank im Voraus.