ヘッダー ロケール セレクター

|||
| — | — | — |
| :information_source: | 概要 | Header Locale Selector は、サイトヘッダーに言語セレクターを追加します。|
|:eyeglasses:| プレビュー | Preview on theme-creator.discourse.org |
|:hammer_and_wrench:| リポジトリリンク | https://github.com/Ahmedgagan/header-locale-selector|
|:open_book:| Discourseテーマ初心者の方へ | Beginner’s guide to using Discourse Themes |

このテーマコンポーネントをインストール

このテーマコンポーネントは、サイトヘッダーに利用可能な言語のドロップダウンを追加します。デフォルトのサイト言語に慣れていないユーザーにとって非常に役立ちます。

注意: この機能はログインユーザーのみ利用可能です。

スポンサー

このコンポーネントをスポンサーしてくださった @Richard_Millington さんに感謝いたします。

「いいね!」 13

多言語フォーラムのユーザーにとって、これをより目立たせ、フラグを含めることは非常に役立つでしょう。

エコシステムへの素晴らしい追加です。:+1:

「いいね!」 5

これは素晴らしい機能です!コアにプリインストールされたテーマコンポーネントとして、チームがこれを検討することを強くお勧めします!

これをリリースしていただき、誠にありがとうございます!
:vulcan_salute::star_struck::+1:

「いいね!」 2

小さな機能リクエストがあります。

ドロップダウンリンクをモバイルで調整できるようにしていただけますか?

チャットプラグインを有効にすると、非常に混雑します。以前のWindowsのように、デスクトップではフラグを使用し、モバイルでは2文字を使用するように設定可能にすることもできるかもしれません。しばらくぶりです。笑

虫眼鏡の検索と同様のサイズにスケーリングすることもできるかもしれません。

メンバーからのフィードバックです。

素晴らしいコンポーネントです。

国旗による言語選択は素晴らしいですが、残念ながらいくつかのエラーが含まれています。クロアチアの国旗がありません。
カタルーニャはスペインの一部です。


モバイルで国旗のサイズを縮小するためのコードを共有していただけますか?

国コードを使用するオプションはありますか?それとも、Windowsのキーボード言語のように、フラグの代わりに国コードを使用しますか?

ie en esなど。フラグはモバイルでは非常に大きいです。または、フラグのサイズを縮小するオプション。

CSSの上書きでも便利です。ありがとうございます。

「いいね!」 1

はい、このスイッチは一般的なディスコースのスタイルに合わせるために変更する必要があります。彼は今ひどいです。

「いいね!」 1

参考用の現在の外観のスクリーンショット:

デスクトップ:

モバイル:

このコンポーネントは私には機能しません。オンにしてテンプレートを選択する以外に何かすることはありますか?

少なくとも部分的な rework が必要です。誰かが貢献して、さまざまな問題を修正するための PR を送信したい場合は、歓迎します :slight_smile:

「いいね!」 1

broken として現在タグ付けされています

コンポーネントが壊れていますが、最新バージョンとの互換性があると表示されています

@volanar それは同じコンポーネントではありません。

「いいね!」 1

broken タグを削除します。

そもそも、コンポーネントは壊れていませんでした!
Volanar が壊れていると報告した別の Discourse テーマコンポーネントに関する誤解がありました。

コンポーネントをテストしたところ、最新の Discourse バージョンでも動作しました。
ただし、最新の Discourse バージョンでうまく動作するように、最新化、非推奨の解決、および軽微な問題の修正のためにいくつかの更新が必要です。

@Richard_Millington 様のご支援により、PR を作成しました :+1:

「いいね!」 6

PRはマージされました。ありがとうございます、アーメドさん。:+1:

「いいね!」 4

2つまたは3つの言語を使用し、他の言語を削除するにはどうすればよいですか?
ちなみに、locale-selector.js のコードを最適化しました。

import Component from "@ember/component";
import { action } from "@ember/object";
import { inject as service } from "@ember/service";
import { ajax } from "discourse/lib/ajax";
import { userPath } from "discourse/lib/url";
import { isTesting } from "discourse-common/config/environment";

export default class LocaleSelector extends Component {
  @service currentUser;

  get availableLocales() {
    // パフォーマンス最適化のためにフィルタリングされたロケールをキャッシュする
    if (!this._filteredLocales) {
      const allLocales = JSON.parse(this.siteSettings.available_locales);
      this._filteredLocales = allLocales.filter(locale => ['en', 'ar'].includes(locale));
    }
    return this._filteredLocales;
  }

  @action
  onChangeLocale(value) {
    this.set("currentUser.locale", value);
    ajax(userPath(`${this.currentUser.username_lower}.json`), {
      data: { locale: this.currentUser.locale },
      type: "PUT",
    }).then(() => {
      if (!isTesting()) {
        location.reload();
      }
    });
  }

  defaultItem() {
    const currentUserLocale = document.documentElement
      .getAttribute("lang")
      ?.replaceAll("-", "_");

    return (
      this.content.find((val) => val.value === currentUserLocale) ||
      this.content.find((val) => val.value === this.siteSettings.default_locale)
    );
  }
}

テスト後、Discourse がフリーズし続けます。
何かアイデアはありますか?

available_locales はこの構造になっています。

[
  {
    name: "English (US)",
    value: "en"
  },
  ...
]

したがって、コードでは locale.value を使用する必要があります。:+1:

@Ahmed_Gagan このテーマコンポーネントに新しい問題が発生しているようです。

ここで、このテーマコンポーネントは不要になり、上記サイト設定のコアによってサポートされていることに注意してください。(ドキュメント