所有你需要了解的关于i18n与盖茨比
2019-01-22 08:58:26
在使用Gatsby的 i18n本教程中 ，我们将构建一个小而美观的博客，其中包含带有i18next库的i18n组件。以前，我们已经看到了一些实施反应i18n的好例子 。 现在我们来看看像Gatsby这样的静态站点生成器的示例。此外，我们将看到如何将 PhraseApp In-Context Editor 集成到我们的网站中，并能够浏览网站并编辑文本。整个代码也可以在Github上找到。
盖茨比和静态网站
您可能已经注意到，动态和静态网站之间存在很大差异。静态网站包含具有固定内容的网页。那只是Javascript，HTML和CSS。有一个托管这些静态资产的服务器，但它没有运行脚本的引擎（node，python等）。但是，可能存在从托管该站点的Web服务器以外的其他来源检索的内容。
在本地化方面，我们需要有一种方法可以在本地化视图中显示页面，同时尽可能减少重复。对于静态站点，我们可能会有一些重复，因为内容在部署时呈现为HTML。我们的工作是使其易于扩展和重用。
Gatsby是一个功能齐全的静态站点生成器，提供以下功能：
集成了120多个后端
一个React工具包
闪电般快速的表现
让我们开始使用Gatsby对基本站点进行分层，以及如何使其更具可本地化。首先，让我们从预赛开始。
盖茨比I18n与I18next - 简单的方法
从盖茨比首发创建盖茨比网站。
安装Gatsby并创建一个新站点
安装完成后，您将具有以下文件夹结构：
这是一个没有好东西的基本网站。
现在通过i18next添加i18n支持的最简单方法是使用 gatsby-i18n-plugin将i18next配置为一个名为的HOC组件 。我们将使用该HOC包装所有组件以使它们可本地化，以便每个组件从i18next配置获取本地上下文。该库还提供了一些其他帮助程序，如区域设置文件 ， ， 和 元素。
开始吧：
安装所需的插件。
将它们添加到您的gatsby-config.js
接下来，开始使用i18next版本替换组件。让我们从layout.js开始。
如您所见，我们使用 withNamespaces HOC来传递t helper来转换消息。我们还使用Head 组件处理头部HTML元素的语言环元信息。
让我们继续使用Header组件。
这里我们使用gatsby-plugin-i18next中的Link 组件 来提供前面加上当前语言标记的链接。
我们还使用了一个 LanguageSwitcher 组件，它是一个包含所有可用语言的简单下拉列表。当我们单击语言选项时，我们切换语言环境。
这里 语言 组件提供可用语言列表，当前语言和更改语言环境的功能。
现在我们已经创建了组件，我们可以继续使用主页面。让我们从index.js页面开始。
注意这里的一些事情......我们使用一个 简单的样板代码查询来从文件系统中检索当前的语言环境消息。我们还使用withI18next HOC 包装我们的组件 ，它将在页面加载时启动i18next库。这对于每个面向公众的页面都是必需的，因为我们还需要在页面刷新时激活此库。
让我们继续使用page-2.js和404.js
最后但同样重要的是，我们需要提供实际的翻译消息。我们需要为语言环境创建一些文件夹。创建一个区域设置目录并添加以下文件夹结构。
然后为每个区域设置提供翻译消息。
现在我们已准备好看到我们的网站在行动。启动开发服务器并检查发生的翻译。
添加PhraseApp上下文编辑器
PhraseApp的 上下文编辑器 是一种翻译工具，它通过提供有用的上下文信息来帮助整个过程，从而提高整体翻译质量。您只需浏览您的网站并沿途编辑文本即可。
虽然Gatby没有直接集成，但我们有一个来自PhraseApp团队的插件，对于react-i18next和一点点黑客，我们也可以将它添加到我们的网站！
首先，安装它。
现在让我们看看我们如何通过简单的步骤做到这一点。
首先，我们需要提供我们自己的 withI18next HOC，它将完成与原始提供相同的工作，但它会添加具有正确配置的 PhraseAppProvider。
在src目录中创建一个新文件夹i18n并添加以下文件。
setupI18next.js文件的内容 仅用于从本地代码库中启动i18next库，因为它们不是从gatsby-i18next-plugin导出的 。
我们需要用 react-i18next-phraseapp插件提供的实例替换withNamespaces的所有实例 。例如，这是page-2.js组件。
该 窗口。需要在HTML根目录树中配置PHRASEAPP_CONFIG。为了让Gatsby这样做，我们需要将.cache / default-html.js文件复制到src并根据自己的需要进行修改。
1 | $ <span class="token function">cp</span> .cache/default-html.js src/html.js |
在head元素关闭之前添加以下代码段：
最后，我们需要加载PhraseApp In-Context Editor javascript库代码来激活它。同一个库提供了一个名为PhraseAppInitializer的有用组件 ，可以帮助我们工作。我们只需将其放置在加载应用程序后将使用的位置。对于此示例，我们使用layout.js。
如果您尚未执行此操作，请导航至phraseapp.com并注册试用版。
设置帐户后，您可以创建项目并导航到“项目设置”以查找 projectId 键。
在启动服务器之前，使用它 在PHRASEAPP_CONFIG中分配 projectId变量。
当您导航到该页面时，您将看到一个登录模式，一旦您通过身份验证，您将看到已翻译的字符串更改为包括它们旁边的编辑按钮。In-Context Editor面板也会显示出来。
结论
在本文中，我们看到了如何使用i18next以简单的方式在Gatsby站点中添加本地化。我们还看了一下如何使用PhraseApp In-Context Editor将它集成到我们的工作流程中。如果您还有其他任何问题，请随时发表评论或给我留言。感谢您阅读，下次再见！