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

[pfaffman (Jay Pfaffman)]

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.

[anon48433008]

I’ll happily use what you come up with,

could you mimic the home button api function?

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

[pfaffman (Jay Pfaffman)]

I’ve got the button OK, it’s the logout API that I can’t find.

[anon48433008]

sorry, I do like the plan and hoped I could help, what does the $0 refer to and is it part of document.querySelector that may help?

[pfaffman (Jay Pfaffman)]

I got it! I won’t promise that it’ll work for you, but this might do it for you.

This is 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 = 'Log Out', // button text!
        logout_title = 'Log Out',
        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>

[anon48433008]

@pfaffman

won’t promise that it’ll work for you

WTH Jay,

I put that script in and got a

Summary

a working button!

I’ll need to tune the look a bit but it works, great job!

Thanks for sharing

[Yana_Nepyivoda]

Hello Jay,
your code works like a charm!
I have a custom menu below the standard header. How can I relocate this button there? Screenshot by Lightshot
in order to create my custom navigation, I added HTML to section common -> header

thanks in advance