テーマとテーマコンポーネントにローカライズ可能な文字列を追加

[Discourse]

Discourse テーマやテーマコンポーネントにカスタム言語や翻訳を追加したい場合、ローカライズされた文字列を含めることができるようになり、これらは UI コンポーネントで使用可能になります。翻訳はコア/プラグインの翻訳と同じ形式で保存され、ほぼ同じ方法で使用できます。

テーマは /locales/{locale}.yml のような形式で翻訳ファイルを提供できます。これらのファイルは有効な YAML である必要があり、定義されているロケールと等しい単一のトップレベルキーを持つ必要があります。これらは discourse_theme CLI を使用して定義したり、.tar.gz をインポートしたり、GIT リポジトリからインストールしたり、theme-creator.discourse.org のエディタ経由で定義したりできます。

ロケールファイルの例は次のようになります。

en:
  theme_metadata:
    description: "This is a description for my theme"
    settings:
      theme_setting_name: "This is a description for the setting `theme_setting_name`"
      another_theme_setting_name:
        description: "This is a description for the setting `another_theme_setting_name`"
  sidebar:
    welcome: "Welcome"
    back: "back,"
    welcome_subhead: "We're glad you're here!"
    likes_header: "Share the Love"
    badges_header: "Your Top Badges"
    full_profile: "View your full profile"

管理者は、/admin/customize/themes ユーザーインターフェースでテーマごとに個々のキーを上書きできます。フォールバックはコアと同じ方法で処理されるため、英語以外の言語の翻訳が不完全であっても、英語のキーが使用されるため問題ありません。

バックグラウンドでは、これらの翻訳はテーマ固有のネームスペースの下でコアの翻訳と並行して保存されます。たとえば次のようになります。

theme_translation.{theme_id}.sidebar.welcome

テーマコードに theme_id をハードコーディングすることは決して避けるべきなので、翻訳にアクセスできるようにするためのいくつかの方法があります。

.hbs ファイルでは、専用のヘルパーを使用できます。

{{theme-i18n "my_translation_key"}}

または、翻訳キーを別のコンポーネントに渡す必要がある場合は、theme-prefix ヘルパーを使用できます。

<DButton @label={{theme-prefix "my_translation_key"}} />

Javascript、または .gjs ファイルでは、themePrefix 関数を使用できます。これは自動的にインジェクトされ、インポートする必要はありません。

const result = I18n.t(themePrefix("my_translation_key"));

<template>{{i18n (themePrefix "blah")}}</template>

テーマで翻訳を使用する完全な例については、@awesomerobot の Fakebook テーマを参照してください: GitHub - discourse/Fakebook

---

このドキュメントはバージョン管理されています - 変更の提案はgithubで行ってください。

[evantill (Eric Vantillard)]

Howto use theme translations in CSS ? I know we can use theme parameters but I need theme translations.

[david (David Taylor)]

You can’t, they’re only available in templates and javascript. That’s the same as core/plugin translations.

Ideally, refactor things so that the string is set in a template. But if you really need a customisable string in a css file, you could use theme settings: Developer’s guide to Discourse Themes

[evantill (Eric Vantillard)]

And if I use theme setting, is it possible to translate it ?

[david (David Taylor)]

No, not in to multiple languages, but it would allow admins to customize it for their site.

[Mikhail_Tyuftyaev]

Hello everyone.
I’m redefining the template upload-selector.hbs
I want to add a translatable phrase.
I created a new variable upload_selector.upload_images
For example

Please tell me what to do next?

[Theudebart (Marcel Patzsch)]

Hello,

when i try this technic in the discourse theme creator (see here) everything works fine and as explained here in the post.

However if I import the very same theme on my own server only " [en.theme_translations.12.blog]" appears. Also in the theme settings page there is no “Theme Translations” section like on the theme creator.

I really don’t know where to search for this error anymore. Has anybody a hint for me?

[Edit]
I’m using discourse 2.6.7 ( [f73cdbbd2f ] ) in an docker environment.

[IAmGav (Gavin Perch)]

@Theudebart

I’m using discourse 2.6.7 ( [f73cdbbd2f ] ) in an docker environment.

can you update discourse ?

you are using an old version

[Theudebart (Marcel Patzsch)]

@IAmGav

can you update discourse ?

you are using an old version

Yeah i’m trying that, that is another thing i need help with but, I don’t want to post it here, that’s another topic.

Anyway I thought that shouldn’t be problem as the translation feature was included in version 2.2.0.beta9, see commit.

[Jerome_Hordies]

こんにちは、初心者の質問ですみません。
HTMLとCSSだけでヘッダーを作成しました。

        <div>
         <span><a href="https://www.example.com/download">Download</a></span>     
        </div>

そして、「Download」という単語を翻訳したいです。
英語の翻訳ファイルを作成しました。

en: 
  top-navbar: 
    download: "Yeah"

次に、Facebookの例のようにHTMLコードを変更しました。

    <script type="text/x-handlebars" data-template-name="/connectors/discovery-below/sidebar">
        <div>
         <span><a href="https://www.example.com/download">{{i18n (theme-prefix "top-navbar.download")}}</a></span>     
        </div>
    </script>

これは「Yeah」と翻訳されて表示されますが、レイアウトが崩れます。「/connectors/discovery-below/sidebar」を使用しているためだと思います。テンプレートをいじらずに翻訳を適用したいのですが、インラインで翻訳を適用する方法がわかりません。

テーマのカスタムHTMLで翻訳を単純に使用する簡単な例を教えていただけますか？

ありがとうございます！

[Don]

こんにちは。

問題は、data-template-name は一意の名前である必要があるということです。Developing Discourse Themes & Theme Components のように、data-template-name=\"/connectors/PLUGIN-OUTLET-NAME/UNIQUE-NAME\" のようになります。現在、例では sidebar という名前を使用していますが、これは Facebook のサイドバーテンプレートを上書きしていると思われます。

たとえば、これは機能するはずです

<script type="text/x-handlebars" data-template-name="/connectors/discovery-below/downloadlink">
  <div class="top-navbar">
    <span class="j_menu_item" ><a href="https://www.example.com/download">{{i18n (theme-prefix "top-navbar.download")}}</a></span>     
  </div>
</script>

[Jerome_Hordies]

@Don 様、ありがとうございます。

プラグインがインストールされておらず、data-template-name をランダムな UNIQUE-NAME に変更しても同じ結果になるか、PLUGIN-OUTLET-NAME を適当に作るとバナーが表示されないことにも言及するのを忘れました。

おそらくもうお分かりかと思いますが、私は handlebars/ember に全く慣れていません

私が理解しているのは、あらかじめ HTML 内に定義された場所に配置されるテンプレートをカスタマイズしており、その結果、カスタム HTML が /html/body/section main ではなく、その奥深くに配置され、以前はなかった CSS の継承が発生しているということです。

翻訳を使用するためにテンプレートをカスタマイズする必要がある理由が理解できません。
Ember inspector を使用して、こちら でアドバイスされたように、カスタマイズするテンプレートを特定することができました。

そして、あなたの回答と plugin-outlet に関するリンクのおかげで、data-template-name = “/connectors/above-site-header/my-navbar” を見つけることができました。

ご協力いただき、重ねて感謝いたします。

[Don]

なるほど…ソーシャルメディア愛好家向けのテーマであるFakebookを使用しているのかと思いました。サイドバーセクションの下にコードを配置したいのかと。

プラグアウトレットを視覚的に確認する良い方法として、Plugin Outlet Locationsテーマコンポーネントを使用できます。

[Jerome_Hordies]

こんにちは、@Don さん。

このFacebookの例を使用した理由は次のとおりです。

@david

テーマでの翻訳の使用に関する完全な例については、@awesomerobot の Fakebook テーマを確認してください: GitHub - discourse/Fakebook

重ねて感謝いたします！

[misham (Mykhailo)]

単数形と複数形については、{{theme-i18n}} を使用して、1つと複数の翻訳があるテキストをどのように翻訳しますか？たとえば、「Result」と「Results」です。

[awesomerobot (Kris)]

Discourse のソースには、通常、2 つの文字列があり、整数に基づいて切り替える方法の例がいくつかあります。

これはテーマでも機能するはずです。一般的に、JS は次のようになります。

I18n.t(themePrefix("confirm_remove_tags"), {
  count: exampleCountValue,
});

[misham (Mykhailo)]

hbsについてはどうですか、hbsテンプレートでもできますか？

[david (David Taylor)]

はい、できます。

{{theme-i18n "confirm_remove_tags" count=this.exampleCountValue}}

[merefield (Robert)]

@Discourse

<DButton @label={{theme-prefix "my_translation_key"}} />

これをテーマ内の.gjsコンポーネントテンプレートで行うと、次のエラーが発生します。
Error: Attempted to resolve a helper in a strict mode template, but that value was not in scope: theme-prefix

そこで、インポートを試みます。
import themePrefix from "discourse/helpers/theme-prefix";

しかし、次のようなエラーが出ます。
Identifier 'themePrefix' has already been declared

（「ハブ」で例を探しましたが、見つかりませんでした）

[merefield (Robert)]

更新：{{i18n (themePrefix " を使用する必要があります