标签: i18next

我正在使用 Hogan.js，它与 Mustache 规范兼容。而且我在实施多元化的可靠方法时遇到了麻烦。我想继续使用 Hogan 并使用http://i18next.com/进行 i18n 处理

做这样的事情适用于简单的情况

tpl：

{{#plural(count)}}
  I have {{count}} apples!
{{/plural(count)}}

数据：

{
  count: 2,
  'plural(count)': function () {
    return function () {
      return _t[arguments[0].trim()][this['count']]
    }
  }
}

这需要在单独的步骤中解析/扫描/渲染才能生成所有必需的复数方法（plural(key.val) 等），但这很好，它只需要在服务器启动时完成一次。

这打破了像

{{#plural(key.nested)}}

如果数据看起来像

{
  'plural(key': {
    'val)': ...
  }
}

这也需要我从上下文中手动查找值，这不是主要问题，但在某些情况下，可能无法解决 lambda/partials

对于默认的翻译映射，事情要简单得多，而且很容易处理

我经常收到以下错误：

i18next::translator: missingKey fr common my key.

而密钥位于翻译文件中（已正确加载并考虑在内）。为什么？

编辑：.当翻译文件中的键中 有（点字符）时，就会发生这种情况。

我正在使用引导工具提示，并且我的页面有两种语言。我正在使用 jquery i18n 来更改语言。更改语言时我需要更改工具提示文本。

我已经成功更改了输入的标题属性，并且data-i18n=[title]inputhelper我可以看到它发生了变化，因为默认的 html 标题显示的文本与我的引导工具提示不同。

function updateContent() {
  $('.content').localize();
  $('[data-toggle="tooltip"]').tooltip('update');
}

这就是我尝试更新工具提示元素的方法，以便它具有新文本，但它不起作用。

现在我认为我需要做的是重新初始化工具提示，但无法完全弄清楚具体在哪里以及我将如何做到这一点。任何有关如何使用 i18n 翻译这些引导工具提示的建议将不胜感激。

编辑：这就是我知道标题属性值发生变化的方式：

EDIT2：经过一番尝试和错误后，我实际上能够弄清楚。我是这样做的：

 function updateContent() {
  $('.content').localize();
  $('[data-toggle="tooltip"]').tooltip('dispose');
  $('[data-toggle="tooltip"]').tooltip();  
}

首先我想说我对 React 和 ES6 总体来说还比较陌生。

到目前为止，我已经在组件中实现了react-i18next并取得了巨大成功。我还添加了 i18next-scanner 来自动将翻译密钥提取到 .json 文件。

我有一个router/index.js包含我的项目的路线的文件。该文件还用于创建侧边栏导航。

在这个文件中，我有用于侧边栏导航的名称。路线存储为可能包含子路线的对象。我的问题是我想使用 i18nextt()函数来翻译这些名称。

我的代码

i18n.js：

// i18n.js
import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

const i18n = i18next
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    debug: true,
    // ...
    },
  });

export { i18next }; // instance
export default i18n; // promise

路线/index.js：

// routes/index.js
import React from 'react';
import i18n, { i18next } from 'i18n';
import { …

使用 i18next 进行翻译的标准方法通常涉及在加载 Web 应用程序后立即加载所有翻译文件。

IE

i18n
    .use(XHR)
    .use(LanguageDetector)
    .init({
        fallbackLng: 'en',
        debug: false,

        keySeparator: false,

        interpolation: {
            escapeValue: false,
            formatSeparator: ','
        },

        resources: {
            en: {
                translations: en
            },
            ru: {
                translations: ru
            },
            es: {
                translations: es
            }
        },

        ns: ['translations'],
        defaultNS: 'translations',

        react: {
            wait: true
        }
});

我发现这种方法效率很低，并希望根据需要从服务器请求翻译文件（即当客户端切换语言时）。不幸的是，我在官方文档中没有找到任何对此的引用，但当然应该有一种方法来实现这一点。

我想要实现的架构：

1) Web 应用程序仅与默认翻译文件一起加载（例如english.json）

2) 如果用户切换语言——比如西班牙语——spanish.json正在从服务器加载并调整整个翻译。

我有一个翻译 json 文件，其翻译如下：

"pageNotFound": {
  "description": "The page could not be found. Click {{link}} to return to the home page"
},

我想要替换的链接变量ReactRouter <Link>

我的方法中有以下代码render，输出下图。

public render() {

  const { t } = this.props;
  const message = t('pageNotFound.description', { link: <Link to="/">here</Link> });

  return (
    <div className="body-content">
      <div>
        {message}
      </div>
    </div>
  );
}

我已经使用过该<Trans>组件，我认为这可能是一种方法，但似乎您必须输入包括 <> 标签的全文，这对于我的用例来说不是我想要的，因为我希望所有文本都在如果可能的话，翻译 json。

有什么建议欢迎留言

刚刚开始使用 i18next，在翻译以下数据时遇到一些问题。

export const educationData = [
  { education: "Some education 1", timeframe: "2017 - 2018", id: 1 },
  { education: "Some education 2", timeframe: "2016 - 2017", id: 2 },
  { education: "Some education 3", timeframe: "2015 - 2016", id: 3 },
  { education: "Some education 4", timeframe: "2014 - 2015", id: 4 }
];

不同语言的区域设置中的 JSON 如下所示：

"education": {
  "heading": "Education",
  "educationData": [
    {
      "id": 1,
      "education": "Some education 1",
      "timeframe": "2017 - 2018"
    },
    {
      "id": 2, …

我正在初始化i18next但出现错误：

Uncaught TypeError: Cannot read property 'use' of undefined

以下是我的代码：

import i18n from 'i18next';// Getting eslint error Module imports itself.
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

const fallbackLng = ['en'];
const availableLanguages = ['en', 'ar', 'fr'];

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng,

    detection: {
      checkWhitelist: true,
    },

    debug: false,

    whitelist: availableLanguages,

    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

反应：16.13.1

i18下一个：19.4.5

我已经实现了两个不同的第三方包来实现静态站点生成（SSG）页面的本地化，其中包括 next-i18next 和 next-translate。它们对于服务器渲染和客户端渲染的页面都工作得很好。我试图让它们适用于静态网站生成的页面，但到目前为止还无法做到这一点。我也实施了手动解决方案，但到目前为止还没有成功。我有一些疑问：

1. 接下来我们可以实现静态站点生成页面的本地化吗？
2. 如果是，您能否提供某种示例来实现 SSG 页面的本地化。

我无法弄清楚如何将react-i18next 与typescript 4.1 一起使用。

根据文档，我应该能够执行以下操作：

const { t } = useTranslation();
return <h1>{t('title')}</h1>

但是，该调用会t出错：

No overload matches this call: Argument of type 'string' is not assignable to parameter of type 'never'.

有效的是使用：

useTranslation<string>()

或者

useTranslation('translation')

这两个条件似乎都是不必要的。

这似乎只适用于 typescript 4，好像我降级到 typescript 3 错误就会消失。

有没有办法在 TypeScript 4 中使用较短的内容useTranslation()？