トップメニューにログアウトボタンを追加

クライアントには、メンバーが公共のコンピューターをよく利用しているコミュニティがあります。テストの結果、多くのユーザーがハンバーガーメニュー内のログアウトリンクを見つけるのに苦労していることが判明しました。残念ながら、全員に ZZ の使い方を教える良い方法はないと思います。

そのため、トップメニューに logout ボタンを追加しようとしています。

(Superseded) Add a "+ New Topic" button on every page を参考にして、新しいトピックを作成する代わりにログアウトを行うように変更できればと考えています。この createTopiclogout に変更するだけで「簡単」に実現できるはずです。

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

約1時間ほど試行錯誤しましたが、うまくいきません。

「いいね!」 4

あなたが考案してくれたものは喜んで使います。

ホームボタンの API 関数を模倣していただけますか?

image

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

OKボタンは見つかりましたが、ログアウトAPIが見つかりません。

「いいね!」 3

申し訳ありませんが、このプランは気に入っていますし、お手伝いできればと思っていました。$0 は何を指しているのでしょうか?また、document.querySelector の一部であれば、それがヒントになるかもしれません。

「いいね!」 1

わかりました!あなたにも必ずうまくいくとは限りませんが、これで解決するかもしれません。

これは 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 = 'ログアウト', // ボタンのテキスト!
        logout_title = 'ログアウト',
        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>
「いいね!」 14

なんてこった Jay、

そのスクリプトを入れてみると、

要約

動くボタンができたよ!
image

見た目を少し調整する必要があるけど、ちゃんと動くね。よくやった!

共有ありがとう :sunglasses:

「いいね!」 4

こんにちは、Jay さん。
あなたのコードは完璧に動作しています!
標準ヘッダーの下にカスタムメニューがあります。このボタンをそこに移動させるにはどうすればよいでしょうか?Screenshot by Lightshot
カスタムナビゲーションを作成するために、セクション「common」→「header」に HTML を追加しました。

あらかじめありがとうございます。

「いいね!」 1

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.