简介

这是一个用于在浏览器中检测用户语言的 i18next 语言检测插件，支持以下方式：

cookie（设置 cookie i18next=LANGUAGE）
sessionStorage（设置键 i18nextLng=LANGUAGE）
localStorage（设置键 i18nextLng=LANGUAGE）
navigator（设置浏览器语言）
querystring（在 URL 后附加 ?lng=LANGUAGE）
htmlTag（添加 HTML 语言标签 <html lang="LANGUAGE" ...）
path（http://my.site.com/LANGUAGE/...）
subdomain（http://LANGUAGE.site.com/...）

入门

可以通过 npm、bower 加载源代码，或从本仓库下载。

# npm 包
$ npm install i18next-browser-languagedetector

# bower
$ bower install i18next-browser-languagedetector

如果您不使用模块加载器，它将被添加到 window.i18nextBrowserLanguageDetector

连接方式：

import i18next from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18next.use(LanguageDetector).init({
  supportedLngs: ['de', 'en', 'fr'],
  ...i18nextOptions
});

与所有模块一样，您可以将构造函数（类）传递给 i18next.use 或传递给具体实例。

supportedLngs 是可选的，但允许 i18next 从检测到的语言列表中选择最佳匹配。如果未设置，则 language 将被设置为第一个检测到的语言，无论您的应用程序是否有该语言的翻译。

检测器选项

默认选项可以在这里找到。

{
  // 检测用户语言的顺序和来源
  order: ['querystring', 'cookie', 'localStorage', 'sessionStorage', 'navigator', 'htmlTag', 'path', 'subdomain'],

  // 用于查找语言的键或参数
  lookupQuerystring: 'lng',
  lookupCookie: 'i18next',
  lookupLocalStorage: 'i18nextLng',
  lookupSessionStorage: 'i18nextLng',
  lookupFromPathIndex: 0,
  lookupFromSubdomainIndex: 0,

  // 缓存用户语言的位置
  caches: ['localStorage', 'cookie'],
  excludeCacheFor: ['cimode'], // 不持久化的语言（cookie、localStorage）

  // 可选的 cookie 过期时间和域名
  cookieMinutes: 10,
  cookieDomain: 'myDomain',

  // 可选的带有 lang 属性的 htmlTag，默认为：
  htmlTag: document.documentElement,

  // 可选的设置 cookie 选项，参考：[MDN Set-Cookie 文档](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie)
  cookieOptions: { path: '/', sameSite: 'strict' },

  // 可选的用于修改检测到的语言代码的转换函数
  convertDetectedLanguage: 'Iso15897',
  convertDetectedLanguage: (lng) => lng.replace('-', '_')
}

可以通过以下方式传递选项：

推荐 - 在 i18next.init 中设置 options.detection：

import i18next from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18next.use(LanguageDetector).init({
  detection: options,
});

在构造时：

import LanguageDetector from 'i18next-browser-languagedetector';
const languageDetector = new LanguageDetector(null, options);

通过调用 init：

import LanguageDetector from 'i18next-browser-languagedetector';
const languageDetector = new LanguageDetector();
languageDetector.init(options);

添加自定义检测功能

接口

export default {
  name: 'myDetectorsName',

  lookup(options) {
    // options -> 传入的选项
    return 'en';
  },

  cacheUserLanguage(lng, options) {
    // options -> 传入的选项
    // lng -> 当前语言，将在初始化和更改语言时调用
    // 存储它
  },
};

添加方法

import LanguageDetector from 'i18next-browser-languagedetector';
const languageDetector = new LanguageDetector();
languageDetector.addDetector(myDetector);

i18next.use(languageDetector).init({
  detection: options,
});

请注意：您必须将检测器的名称（在本例中为 myDetectorsName）添加到 options 对象中的 order 数组中。否则，您的检测器将不会被使用。详见检测器选项部分。