I18Next를 사용하여 자극 애플리케이션 현지화

이전 기사에서는 Basecamp에서 만든 간단한 JavaScript 프레임워크인 Stimulus를 소개했습니다. 오늘은 Stimulus 애플리케이션의 국제화에 대해 논의하겠습니다. 프레임워크가 기본적으로 국제화 도구를 제공하지 않기 때문입니다. 국제화는 특히 전 세계 사람들이 애플리케이션을 사용할 때 중요한 단계이므로 국제화 수행 방법에 대한 기본적인 이해가 실제로 도움이 될 수 있습니다.

물론 jQuery.I18n, Polyglot 등 어떤 국제화 솔루션을 구현할지는 사용자가 결정합니다. 이 튜토리얼에서는 I18next라는 인기 있는 I18n 프레임워크를 보여드리고 싶습니다. 이 프레임워크는 많은 멋진 기능을 갖추고 있으며 개발 프로세스를 더욱 단순화하기 위한 많은 추가 타사 플러그인을 제공합니다. 이러한 모든 기능을 갖추고 있음에도 불구하고 I18next는 복잡한 도구가 아니며 시작하기 위해 수많은 문서를 공부할 필요가 없습니다.

이 기사에서는 I18next 라이브러리의 도움을 받아 Stimulus 애플리케이션에서 I18n 지원을 활성화하는 방법을 알아봅니다. 구체적으로 다음 사항에 대해 논의할 것입니다:

• I18 다음 구성
• 파일을 번역하고 비동기식으로 로드
• 번역을 수행하고 전체 페이지를 한 번에 번역하세요
• 복수형 및 성별 정보 처리
• 로케일 간 전환 및 GET 매개변수에서 선택한 로케일 유지
• 사용자 기본 설정에 따라 로케일을 설정하세요

소스 코드는 튜토리얼 GitHub 저장소에서 사용할 수 있습니다.

안내 자극 앱

먼저 Stimulus Starter 프로젝트를 복제하고 Yarn 패키지 관리자를 사용하여 모든 종속성을 설치해 보겠습니다.

으아악

등록된 사용자에 대한 정보를 로드하는 간단한 웹 애플리케이션을 구축하겠습니다. 각 사용자에 대해 로그인 이름과 지금까지 업로드한 사진 수가 표시됩니다(사진이 무엇인지는 중요하지 않음).

또한 페이지 상단에 언어 전환 기능을 제공할 예정입니다. 언어를 선택하면 페이지를 다시 로드할 필요 없이 인터페이스가 즉시 번역됩니다. 또한 현재 사용 중인 로케일을 지정하는 ?locale GET 매개변수가 URL에 추가되어야 합니다. 물론, 페이지가 로드될 때 이 매개변수가 제공되면 올바른 언어가 자동으로 설정되어야 합니다.

좋아요. 이제 사용자를 렌더링해 보겠습니다. public/index.html 파일에 다음 코드 줄을 추가하세요.

으아악

여기에서는 users 컨트롤러를 사용하고 사용자 로드를 위한 URL을 제공합니다. 실제 애플리케이션에는 데이터베이스에서 사용자를 가져와 JSON으로 응답하는 서버 측 스크립트가 있을 수 있습니다. 하지만 이 튜토리얼에서는 필요한 모든 데이터를 public/api/users/index.json 파일에 넣습니다.

으아악

이제 새로운 src/controllers/users_controller.js 파일을 생성하세요:

으아악

컨트롤러가 DOM에 연결되면 loadUsers() 메소드를 사용하여 비동기적으로 사용자를 로드합니다.

으아악

이 메소드는 지정된 URL로 가져오기 요청을 보내고 응답을 받은 후 마지막으로 사용자에게 다음을 표시합니다.

으아악

renderUsers() 依次解析 JSON，构造一个包含所有内容的新字符串，最后将此内容显示在页面上（this.element 是将返回控制器连接到的实际 DOM 节点，在我们的例子中是 div ).

I18다음

이제 I18next를 애플리케이션에 통합하는 작업으로 넘어갑니다. 프로젝트에 두 개의 라이브러리를 추가합니다: I18next 자체와 백엔드에서 번역 파일을 비동기식으로 로드할 수 있는 플러그인:

으아악

모든 I18next 관련 내용은 별도의 src/i18n/config.js 파일에 저장되므로 지금 생성하세요.

으아악

여기서 위에서 아래로 무슨 일이 일어나고 있는지 알아봅시다:

• use(I18nXHR) i18next-xhr-backend 플러그인을 활성화합니다.

• fallbackLng 영어를 대체 언어로 사용하도록 지시하세요.

• whitelist 영어와 러시아어 설정만 허용됩니다. 물론 다른 언어를 선택할 수도 있습니다.

• preload 해당 언어를 선택할 때 번역 파일을 로드하는 대신 서버에서 미리 로드하도록 지시합니다.

• ns 表示“命名空间”，接受字符串或数组。在此示例中，我们只有一个命名空间，但对于较大的应用程序，您可以引入其他命名空间，例如 admin、cart、profile 잠깐만요. 각 네임스페이스에 대해 별도의 번역 파일을 생성해야 합니다.

• defaultNS는 defaultNS 将 users를 기본 네임스페이스로 설정합니다.

• fallbackNS 네임스페이스 대체를 비활성화합니다.

• debug 允许在浏览器的控制台中显示调试信息。具体来说，它会说明加载哪些翻译文件、选择哪种语言等。您可能希望在将应用程序部署到生产环境之前禁用此设置。

• backend 为 I18nXHR 插件提供配置并指定从何处加载翻译。请注意，路径应包含区域设置的标题，而文件应以命名空间命名并具有 .json 扩展名

• function(err, t) 是当 I18next 准备好时（或当出现错误时）运行的回调。

接下来，让我们制作翻译文件。俄语翻译应放入 public/i18n/ru/users.json 文件中：

{
  "login": "Логин"
}

login 这里是翻译键，而 Логин 是要显示的值。

英文翻译应该转到 public/i18n/en/users.json 文件：

{
  "login": "Login"
}

为了确保 I18next 正常工作，您可以将以下代码行添加到 i18n/config.js 文件内的回调中：

// config goes here...
function(err, t) {
  if (err) return console.error(err)
  console.log(i18n.t('login'))
}

在这里，我们使用一个名为 t 的方法，意思是“翻译”。该方法接受翻译键并返回相应的值。

但是，我们可能有很多 UI 部分需要翻译，而使用 t 方法来翻译会非常乏味。相反，我建议您使用另一个名为 loc-i18next 的插件，它允许您一次翻译多个元素。

一次性翻译

安装loc-i18next插件：

yarn add loc-i18next

将其导入src/i18n/config.js文件的顶部：

import locI18next from 'loc-i18next'

现在提供插件本身的配置：

// other config

const loci18n = locI18next.init(i18n, {
  selectorAttr: 'data-i18n',
  optionsAttr: 'data-i18n-options',
  useOptionsAttr: true
});

export { loci18n as loci18n, i18n as i18n }

这里有几点需要注意：

• locI18next.init(i18n) 基于之前定义的 I18next 实例创建一个新的插件实例。
• selectorAttr 指定使用哪个属性来检测需要本地化的元素。基本上，loc-i18next 将搜索此类元素并使用 data-i18n 属性的值作为翻译键。

• optionsAttr 指定哪个属性包含附加翻译选项。

• useOptionsAttr 指示插件使用其他选项。

我们的用户正在异步加载，因此我们必须等到此操作完成，然后才执行本地化。现在，我们简单地设置一个计时器，在调用 localize() 方法之前等待两秒——当然，这是一个临时的 hack。

  import { loci18n } from '../i18n/config'
  
  // other code...
  
  loadUsers() {
    fetch(this.data.get("url"))
    .then(response => response.text())
    .then(json => {
      this.renderUsers(json)
      setTimeout(() => { // <---
        this.localize()
      }, '2000')
    })
  }

编写 localize() 方法本身的代码：

  localize() {
    loci18n('.users')
  }

如您所见，我们只需要将选择器传递给 loc-i18next 插件即可。内部的所有元素（设置了 data-i18n 属性）都将自动本地化。

现在调整 renderUsers 方法。现在，我们只翻译“Login”一词：

  renderUsers(users) {
    let content = ''
    JSON.parse(users).forEach((user) => {
      content += `<div class="users">ID: ${user.id}<br><span data-i18n="login"></span>: ${user.login}<br>Has uploaded ${user.photos_count} photo(s)</div><hr>`
    })
    this.element.innerHTML = content
  }

不错！重新加载页面，等待两秒钟，并确保每个用户都显示“登录”字样。

复数和性别

我们对部分界面进行了本地化，这真的很酷。尽管如此，每个用户还有两个字段：上传的照片数量和性别。由于我们无法预测每个用户将拥有多少张照片，因此应根据给定的数量将“照片”一词正确地复数化。为此，我们需要之前配置的 data-i18n-options 属性。要提供计数，应为 data-i18n-options 分配以下对象：{ "count": YOUR_COUNT }。

性别信息也应考虑在内。英语中的“uploaded”一词可以适用于男性和女性，但在俄语中它要么变成“загрузил”或“загрузила”，所以我们再次需要 data-i18n-options，其中有 { "context": "GENDER" } 作为值。顺便请注意，您可以利用此上下文来完成其他任务，而不仅仅是提供性别信息。

  renderUsers(users) {
    let content = ''
    JSON.parse(users).forEach((user) => {
      content += `<div class="users"><span data-i18n="login"></span>: ${user.login}<br><span data-i18n="uploaded" data-i18n-options="{ 'context': '${user.gender}' }"></span> <span data-i18n="photos" data-i18n-options="{ 'count': ${user.photos_count} }"></span></div><hr>`
    })
    this.element.innerHTML = content
  }

现在更新英文翻译：

{
  "login": "Login",
  "uploaded": "Has uploaded",
  "photos": "one photo",
  "photos_plural": "{{count}} photos"
}

这里没什么复杂的。由于对于英语，我们不关心性别信息（即上下文），因此翻译键应该只是 uploaded。为了提供正确的复数翻译，我们使用 photos 和 photos_plural 键。 {{count}} 部分为插值，将替换为实际数字。

至于俄语，事情就更复杂了：

{
  "login": "Логин",
  "uploaded_male": "Загрузил уже",
  "uploaded_female": "Загрузила уже",
  "photos_0": "одну фотографию",
  "photos_1": "{{count}} фотографии",
  "photos_2": "{{count}} фотографий"
}

首先，请注意，我们有两个可能的上下文的 uploaded_male 和 uploaded_female 键。接下来，俄语中的复数规则也比英语中更复杂，因此我们必须提供不是两个而是三个可能的短语。 I18next 支持多种开箱即用的语言，这个小工具可以帮助您了解应该为给定语言指定哪些复数键。

切换区域设置

我们已经完成了应用程序的翻译，但用户应该能够在区域设置之间切换。因此，向 public/index.html 文件添加一个新的“语言切换器”组件：

<ul data-controller="languages" class="switcher"></ul>

在 src/controllers/languages_controller.js 文件中制作相应的控制器：

import { Controller } from "stimulus"
import { i18n, loci18n } from '../i18n/config'

export default class extends Controller {
    initialize() {
      let languages = [
        {title: 'English', code: 'en'},
        {title: 'Русский', code: 'ru'}
      ]

      this.element.innerHTML = languages.map((lang) => {
        return `<li data-action="click->languages#switchLanguage"
        data-lang="${lang.code}">${lang.title}</li>`
      }).join('')
    }
}

这里我们使用 initialize() 回调来显示支持的语言列表。每个 li 都有一个 data-action 属性，该属性指定单击元素时应触发的方法（在本例中为 switchLanguage）。

现在添加 switchLanguage() 方法：

  switchLanguage(e) {
    this.currentLang = e.target.getAttribute("data-lang")
  }

它只是获取事件的目标并获取 data-lang 属性的值。

我还想为 currentLang 属性添加 getter 和 setter：

  get currentLang() {
    return this.data.get("currentLang")
  }

  set currentLang(lang) {
    if(i18n.language !== lang) {
      i18n.changeLanguage(lang)
    }

    if(this.currentLang !== lang) {
      this.data.set("currentLang", lang)
      loci18n('body')
      this.highlightCurrentLang()
    }
  }

getter 非常简单——我们获取当前使用的语言的值并返回它。

setter 更复杂。首先，如果当前设置的语言与所选语言不相等，我们使用 changeLanguage 方法。此外，我们将新选择的语言环境存储在 data-current-lang 属性（在 getter 中访问）下，使用 loc-i18next 插件本地化 HTML 页面的主体，最后突出显示当前使用的区域设置。

让我们编写 highlightCurrentLang() 的代码：

  highlightCurrentLang() {
    this.switcherTargets.forEach((el, i) => {
      el.classList.toggle("current", this.currentLang === el.getAttribute("data-lang"))
    })
  }

这里我们迭代区域设置切换器的数组，并将它们的 data-lang 属性的值与当前使用的区域设置的值进行比较。如果值匹配，则为切换器分配 current CSS 类，否则删除该类。

为了使 this.switcherTargets 构建工作，我们需要按以下方式定义刺激目标：

static targets = [ "switcher" ]

此外，为 lis 添加值为 switcher 的 data-target 属性：

  initialize() {
      // ...
      this.element.innerHTML = languages.map((lang) => {
        return `<li data-action="click->languages#switchLanguage"
        data-target="languages.switcher" data-lang="${lang.code}">${lang.title}</li>`
      }).join('')
      // ...
  }

另一个需要考虑的重要事项是翻译文件可能需要一些时间来加载，我们必须等待此操作完成才能允许切换区域设置。因此，让我们利用 loaded 回调：

  initialize() {
    i18n.on('loaded', (loaded) => { // <---
      let languages = [
        {title: 'English', code: 'en'},
        {title: 'Русский', code: 'ru'}
      ]

      this.element.innerHTML = languages.map((lang) => {
        return `<li data-action="click->languages#switchLanguage"
        data-target="languages.switcher" data-lang="${lang.code}">${lang.title}</li>`
      }).join('')

      this.currentLang = i18n.language
    })
  }

最后，不要忘记从 loadUsers() 方法中删除 setTimeout ：

  loadUsers() {
    fetch(this.data.get("url"))
    .then(response => response.text())
    .then(json => {
      this.renderUsers(json)
      this.localize()
    })
  }

在 URL 中保留区域设置

切换语言环境后，我想在包含所选语言代码的 URL 中添加 ?lang GET 参数。在 History API 的帮助下，可以轻松地添加 GET 参数而不重新加载页面：

  set currentLang(lang) {
    if(i18n.language !== lang) {
      i18n.changeLanguage(lang)
      window.history.pushState(null, null, `?lang=${lang}`) // <---
    }

    if(this.currentLang !== lang) {
      this.data.set("currentLang", lang)
      loci18n('body')
      this.highlightCurrentLang()
    }
  }

检测区域设置

我们今天要实现的最后一件事是能够根据用户的偏好设置区域设置。一个名为 LanguageDetector 的插件可以帮助我们解决这个任务。添加新的 Yarn 包：

yarn add i18next-browser-languagedetector

在 i18n/config.js 文件中导入 LanguageDetector：

import LngDetector from 'i18next-browser-languagedetector'

现在调整配置：

const i18n = i18next.use(I18nXHR).use(LngDetector).init({ // <---
  // other options go here...
  detection: {
    order: ['querystring', 'navigator', 'htmlTag'],
    lookupQuerystring: 'lang',
  }
}, function(err, t) {
  if (err) return console.error(err)
});

order 选项列出了插件应尝试的所有技术（按重要性排序），以便“猜测”首选区域设置：

• querystring 表示检查包含区域设置代码的 GET 参数。
• lookupQuerystring 设置要使用的 GET 参数的名称，在我们的例子中是 lang 。
• navigator 表示从用户的请求中获取语言环境数据。
• htmlTag 涉及从 html 标记的 lang 属性获取首选区域设置。

结论

在本文中，我们介绍了 I18next——一种轻松翻译 JavaScript 应用程序的流行解决方案。您已经学习了如何将 I18next 与 Stimulus 框架集成、配置它以及以异步方式加载翻译文件。此外，您还了解了如何在区域设置之间切换以及如何根据用户的偏好设置默认语言。

I18next 有一些额外的配置选项和许多插件，因此请务必浏览其官方文档以了解更多信息。另请注意，Stimulus 不会强制您使用特定的本地化解决方案，因此您也可以尝试使用 jQuery.I18n 或 Polyglot 等解决方案。

오늘은 여기까지입니다! 읽어주셔서 감사합니다. 다음 시간까지 기다려주세요.

위 내용은 I18Next를 사용하여 자극 애플리케이션 현지화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!