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 ユーザーインターフェースで、テーマごとに個々のキーを上書きできます。フォールバックはコアと同じ方法で処理されるため、英語以外の言語で不完全な翻訳があっても問題ありません。その場合は英語のキーが使用されます。
裏側では、これらの翻訳はコアの翻訳 alongside に、テーマ固有のネームスペースの下に保存されます。例えば:
theme_translation.{theme_id}.sidebar.welcome
テーマコード内で theme_id をハードコードすべきではありません。翻訳キーを動的に構築するには、themePrefix ヘルパーを使用してください:
import { i18n } from "discourse-i18n";
import { themePrefix } from "virtual:theme";
// JS コード内:
const result = i18n(themePrefix("my_translation_key"));
console.log("From Javascript", result);
// テンプレートタグ内:
<template>{{i18n (themePrefix "blah")}}</template>
テーマでの翻訳の完全な例については、@awesomerobot の Fakebook テーマをご覧ください: GitHub - discourse/Fakebook · GitHub
このドキュメントはバージョン管理されています。変更を提案する場合は GitHub でおこなってください。
「いいね!」 32
evantill
(Eric Vantillard)
2020 年 3 月 18 日午前 11:37
2
CSS でテーマの翻訳をどのように使用しますか?テーマパラメータを使用できることは知っていますが、テーマの翻訳が必要です。
david
(David Taylor)
2020 年 3 月 18 日午前 11:41
3
できません。それらはテンプレートと JavaScript のみで利用可能です。これはコアやプラグインの翻訳と同じです。
理想的には、文字列をテンプレート内で設定するようにリファクタリングしてください。ただし、CSS ファイル内でカスタマイズ可能な文字列がどうしても必要な場合は、テーマ設定を使用できます: Developing Discourse Themes & Theme Components
「いいね!」 1
evantill
(Eric Vantillard)
2020 年 3 月 18 日午前 11:47
4
テーマ設定を使用する場合、翻訳することは可能ですか?
david
(David Taylor)
2020 年 3 月 18 日午前 11:48
5
いいえ、複数の言語に対応するわけではありませんが、管理者が自サイトに合わせてカスタマイズできるようになります。
「いいね!」 2
みなさん、こんにちは。
テンプレート upload-selector.hbs を再定義しています。
翻訳可能なフレーズを追加したいと考えています。
新しい変数 upload_selector.upload_images を作成しました。
例:
次に何をすべきか教えてください。
Theudebart
(Marcel Patzsch)
2021 年 9 月 12 日午後 1:19
7
こんにちは、
Discourse テーマクリエイターでこのテクニックを試みると(こちらを参照 )、説明どおりすべて正常に動作します。
しかし、同じテーマを自分のサーバーにインポートすると、「[en.theme_translations.12.blog]」のみが表示されます。また、テーマ設定ページにはテーマクリエイターにあるような「テーマ翻訳」セクションが表示されません。
どこに問題があるのかもう見当がつかなくなっています。何かヒントはありますか?
[編集]
私は Docker 環境で Discourse 2.6.7([f73cdbbd2f])を使用しています。
Theudebart
(Marcel Patzsch)
2021 年 9 月 12 日午後 1:52
9
IAmGav:
Discourse を更新してもらえませんか?
古いバージョンを使っているようです。
はい、それについても試みていますが、それは別件なのでここでは書き込みたくありません。別のトピックで扱います。
とにかく、翻訳機能はバージョン 2.2.0.beta9 に含まれているはずなので、問題にならないと思っていたのですが。詳細は コミット をご覧ください。
こんにちは、初心者の質問ですみません。
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
2022 年 7 月 16 日午後 2:32
11
こんにちは。
問題は、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>
「いいね!」 2
@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” を見つけることができました。
ご協力いただき、重ねて感謝いたします。
「いいね!」 1
Don
2022 年 7 月 16 日午後 11:20
13
なるほど…ソーシャルメディア愛好家向けのテーマであるFakebook を使用しているのかと思いました。サイドバーセクションの下にコードを配置したいのかと。
プラグアウトレットを視覚的に確認する良い方法として、Plugin Outlet Locations テーマコンポーネントを使用できます。
「いいね!」 2
こんにちは、@Don さん。
このFacebookの例を使用した理由は次のとおりです。
重ねて感謝いたします!
misham
(Mykhailo)
2022 年 12 月 14 日午後 1:10
15
単数形と複数形については、{{theme-i18n}} を使用して、1つと複数の翻訳があるテキストをどのように翻訳しますか?たとえば、「Result」と「Results」です。
「いいね!」 2
Discourse のソースには、通常、2 つの文字列があり、整数に基づいて切り替える方法の例がいくつかあります。
これはテーマでも機能するはずです。一般的に、JS は次のようになります。
I18n.t(themePrefix("confirm_remove_tags"), {
count: exampleCountValue,
});
「いいね!」 1
misham
(Mykhailo)
2022 年 12 月 19 日午後 12:42
18
hbsについてはどうですか、hbsテンプレートでもできますか?
「いいね!」 1
david
(David Taylor)
2022 年 12 月 19 日午後 12:43
19
はい、できます。
{{theme-i18n "confirm_remove_tags" count=this.exampleCountValue}}
「いいね!」 4
これをテーマ内の.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
(「ハブ」で例を探しましたが、見つかりませんでした)
「いいね!」 1
更新:{{i18n (themePrefix " を使用する必要があります
「いいね!」 4