现在，创建您的 yew 组件并在其中初始化您的 i18n

use yew_translator::*;
...
let supported_languages = vec!["en", "fr"];
let mut translations: HashMap<String, serde_json::Value> = HashMap::new(); // Import your own translations (language -> transation JSON)
html!(
  <I18nProvider {supported_languages} {translations}>
    <WhateverYouWant />
  </I18nProvider>
)

最后，在子组件中，使用钩子use_translation()来处理翻译，就像在Yew I18n中一样（某些字段名称可能会有所不同）。

默认情况下，en和fr位于字段supported_languages中，但您可以插入自己的语言代码来更改此设置。对于字段translations，您必须有一个包含与您的翻译关联的语言的JSON的hashmap。最后，您可以使用字段current_language来设置由i18n使用的默认语言。默认情况下，current_language被设置为en。

JSON翻译

您可以使用点表示法来标记子访问（甚至在数组上），使用系统key: value编写您的JSON。例如：

{
  "root": {
    "child_a": ["elem_0", "elem_1", "elem_2", {
      "name": "Janne"
    }],
    "child_b": {
      "first_name": "John",
      "last_name": "Doe",
      "age": 25
    }
  }
}

您将获得以下所有路径

• root.child_a.0
• root.child_a.1
• root.child_a.2
• root.child_a.3.name
• root.child_b.first_name
• root.child_b.last_name
• root.child_b.age

模板和数据

遵循yew-i18n使用的t方法，您将找到方法tt，在其中您将放置您想要的关键值，并将数据插入从该键找到的模板中。现在，您将所有值视为模板，您将能够在模板中执行一些注入。语法如下

• {{data_field_name}}：在模板中注入您的数据中的值。（无需解析）
• {{*data_field_name}}：使用您的数据值作为翻译的键来注入其值。（无需解析）
• {{{translation_field_name}}}：使用您的翻译键的值来注入其模板，强制您也注入所需值。（解析发生）
• {{{*data_field_name}}}：使用您的数据值作为翻译的键来注入其模板，强制您也注入所需值。（解析发生）
• {{{**data_field_name}}}：使用您的数据值作为翻译的模板，有助于使用引用创建动态模板。（解析发生）

以下是一些需要遵循的规则

• 符号`\`后面跟着`{`、`}`或`\`将始终转义下一个字符，使得`\`在输出中忽略。
• 在解析键名时，符号\后跟*会导致输出字符*。
• 转义*符号只在紧接在{{或{{{之后才有效。
• 您可以在其他模板内部拥有任意数量的模板，但请注意无限循环的问题。

Handlebars

如果您之前还没有听说过，请查看handlebars仓库以了解更多信息。

如何使用

当在您的项目中导入 yew_translator 时，请考虑仅使用 yew-i18n 如下所示

[dependencies]
yew_translator = { version = "1.0", default-features = false, features = ["yew-i18n", "handlebars"] }

在使用handlebars时，使用thb和thb_register方法（对于thb_register，您将能够注入自己的Handlebars注册表，来自tbh的注册表是空的）。