为主题和主题组件添加本地化字符串

[Discourse]

对于那些希望向 Discourse 主题或主题组件添加自定义语言和翻译的人来说，他们现在可以包含本地化字符串，这些字符串可供用户界面组件使用。翻译以与核心/插件翻译相同的格式存储，并且可以以几乎相同的方式使用。

主题可以提供格式如 /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 文件中，您可以使用专用的助手 (helper)：

{{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 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>

这会翻译并打印“Yeah”，但会破坏我的布局，我猜是因为我使用了“/connectors/discovery-below/sidebar”。我只想应用我的翻译而不修改任何模板，但我不知道如何仅内联应用翻译。

你能否提供一个简单的示例来说明如何在主题的自定义 HTML 中仅使用翻译？

谢谢！

[Don]

你好，

问题是 data-template-name 应该是一个唯一的名称。Developing Discourse Themes & Theme Components 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 主题，想把你的代码放在侧边栏的下面。

要直观地查看插件出口，一个好方法是使用 插件出口位置 主题组件。

[Jerome_Hordies]

你好 @Don ，

我之所以使用那个 Facebook 示例，是因为：

@david

有关在主题中使用翻译的完整示例，请查看 @awesomerobot 的 Fakebook 主题：GitHub - discourse/Fakebook

再次感谢！

[misham (Mykhailo)]

关于单数和复数，如何使用 {{theme-i18n}} 翻译具有一个和多个翻译的文本？例如，“Result”和“Results”。

[awesomerobot (Kris)]

在 Discourse 的源代码中，我们通常有两个字符串，并根据整数进行切换：

这在主题中也应该有效，通常 JavaScript 会是这样的：

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

（我在“hub”上找了一个例子，但似乎没有）

[merefield (Robert)]

更新：您需要使用 {{i18n (themePrefix "