トップメニュー ログアウトボタン テーマコンポーネント

開発
1

GitHubにテーマコンポーネントをロールアップして投稿します。トップメニューにログアウトボタンを追加するため、どなたか@pfaffmanのコードをここで更新する方法を教えていただけないでしょうか…

:pray: :pray: :pray:

（現時点では、これらの指示に従ってコンポーネントを有効にしても、トップメニュー全体が消えてしまうだけです :crying_cat_face: ）

「いいね！」 1
2

そのようなものです。必要に応じて調整してください。

import DButton from "discourse/components/d-button";
import routeAction from "discourse/helpers/route-action";
import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("1.28.0", (api) => {
  if (api.getCurrentUser()) {
    api.headerIcons.add(
      "logout",
      `
        <li class="logout">
          <DButton
            @action={{routeAction "logout"}}
            class="btn-flat icon"
            @icon="sign-out-alt"
            @title="user.log_out"
            @label="user.log_out"
          />
        </li>
      `,
      { before: "auth" }
    );
  }
});

.d-header-icons .logout {
  margin-left: 1em;

  button.icon {
    width: auto;

    padding-left: 0.5em;
    padding-right: 0.5em;

    svg {
      margin-right: 0.2em;
      width: 1em;
    }
  }
}

image

「いいね！」 3
3

承知いたしました。テストしていただけると幸いです。Metaに提出する前に、どなたかテストしていただけますでしょうか。

（最終的に、Carsonさんの Central Theme Header User Icons - #4 by carson を出発点として使用しました）

discourse-header-logout-button
discourse-header-logout-button3792×1850 317 KB

「いいね！」 2
4

ウィジェットの使用は推奨しません。コアの近代化の一環として、最終的には廃止される予定です。

api.addToHeaderIconsについても同様で、api.headerIcons.addに置き換えられ、現在は非推奨となっています。

以下にいくつかの提案をします。

  • テーマコンポーネントを作成する際は、GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes を参考にすることをお勧めします。最新の設定ファイルが含まれており、コードのリンティング/整形に役立ち、標準的な構造を持つ良い習慣です。

  • \u003ctemplate\u003e 構文を使用する場合は、ファイル名を .gjs (glimmer JS) に変更してください。そうしないと、正しく機能しない可能性があります。

  • 私の例では、テンプレートをファイルに移動させることができます。例えば、次のようになります。
    /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;

    次に、イニシャライザでコンポーネントをインポートし、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" });
  }
});

  • ボタンの配置は調整可能です。ドキュメントを参照してください。

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

    ご不明な点がございましたらお知らせください。必要であれば、後でPRを作成して例を示すことも可能です。:+1:

「いいね！」 3
5

本当に素晴らしいです。ガイドしてくださり、本当にありがとうございます！

「いいね！」 1
6

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