I18n教程：如何l通过Hugo进行多语言教学
2019-01-22 08:19:27
Hugo是一个快速且易于使用的静态站点生成器，用Go编写，可在多个平台上使用。今天我们将看到一个向Hugo静态站点添加多语言支持的示例。让我们详细看看它的特殊性。
在与Hugo合作的i18n教程中，我们将构建一个包含i18n支持的漂亮博客。以前，我们已经看到了一些使用Gatsby实现i18n的很好的例子 。现在我们来看看另一个流行的静态站点生成器如Hugo的示例。此外，我们将看到如何将 PhraseApp In-Context Editor 集成到我们的网站中，并能够浏览网站并编辑文本。整个代码也可以在 GitHub上获得。
雨果和静态网站
Hugo，就像Gatsby一样，是一个生成静态网站的网站生成器。静态网站包含具有固定内容的网页。那只是Javascript，HTML和CSS。有一个服务器托管这些静态资产，但它没有引擎来运行脚本（node，python等...）。但是，可能存在从托管该站点的Web服务器以外的其他来源检索的内容。
Hugo与流行的go-i18n库集成，并提供多个语言环境的简单API。以前，我们已经看到了如何在Go应用程序中使用此库的教程 。这当然具有所有优点和缺点，因此我们需要了解这种情况。
让我们开始使用Hugo将基本站点分层，看看我们如何使它更具可本地化。首先，让我们从预赛开始。
安装Hugo
按照Hugo快速入门指南中的说明进行操作。例如，在Mac中，您可以像以下一样轻松地安装它：
通过要求Hugo打印其软件版本来测试安装是否成功：
创建新站点并安装主题
我们在名为phraseapp-hugo-i18n的文件夹中创建了一个新的Hugo站点。
默认情况下，没有选择主题，因此如果运行开发服务器，您将看到一个空白页面。为了使我们的演示更容易使用，让我们安装一个主题来使用。
我们将使用Aether主题。
现在，如果您运行开发服务器，则可以检查该站点是否已加载。
配置语言环境
接下来，我们需要定义我们想要支持的可用语言环境列表。在本教程中，我们将使用英语和希腊语。我们需要在站点配置中添加适当的语言条目。
将以下代码添加到您的站点的config.toml
如果您注意到，我们已将每个区域设置的标题替换为其翻译并分配了一些权重。Hugo提供了为每个语言环境定义任何类型Params的选项，它们将正确显示。我们还定义了一个DefaultContentLanguage。这对于在缺少翻译的情况下明确提供后备语言非常有用。这将回归到英语，但如果我们想要，我们可以将其改为希腊语。
提示：如果您希望在URL中始终使用默认内容语言，则可以将以下条目添加到配置中：
然后，当您将站点打开到默认URL时，它将重定向到localhost：1313 / en。而不是localhost：1313 /
现在让我们测试一下我们的翻译。处理主题的exampleSite文件夹中的一些帖子内容并重新启动服务器。
如果您导航到localhost：1313 / gr路径，您将看到正确翻译的标题，但内容不是。我们需要为我们的内容提供一些翻译，并告诉Hugo在哪里可以找到它们。我们有两种可能的方法。
使用文件名
这是默认模式。对于我们创建的每个内容资源，我们需要提供一个关联的翻译资源，其语言代码作为文件名的后缀，例如在我们的帖子中：
/content/post/my-first-post.gr.md：希腊语翻译
/content/post/my-first-post.md：用于默认语言翻译（英语）
基本文件名和路径（/ content / post / my-first-post）是公共部分，用于将这些文件链接在一起作为同一帖子。如果您创建此翻译文件，您将在列表中看到它：
提示：如果我们想将不同的页面链接到同一篇文章，那么我们需要在所有链接页面的前端配置中使用以下指令：
例如，创建一个名为“το-πρ?το-μου-?ρθρο.gr.md”的新帖子，并将translationKey参数添加到所有3个页面。
然后，如果你启动服务器，你会看到英文列表中的希腊文章，如果你点击它，你将重定向到localhost：1313 / greek / post / my-first-post /。当您想要在同一页面中组合多个语言文章时，这非常有用。
按内容文件夹
使用此系统，我们需要重新组织我们的帖子内容并将每篇文章放入语言文件中。例如，我们需要将希腊文和英文文章分开并将它们放入自己的文件中。
/content/greek/post/my-first-post.md：希腊语翻译
/content/english/post/my-first-post.md：用于英语翻译
然后，我们需要告诉Hugo使用这些内容文件。我们需要在配置中添加以下参数：
注意：如果为希腊语指定内容目录，则还需要为英语指定，以防止出现重复的常见路径错误。
如果再次运行服务器，您将按语言查看文章列表。
添加和使用翻译
我们已经看到了如何翻译我们的帖子和文章，但是我们如何翻译一些主题的字符串呢？当Hugo利用go-i18n库时，我们可以在文件夹中定义我们的翻译消息，并使用特殊模板函数在提供站点时引用这些字符串。
首先，我们需要创建一个消息文件夹，默认情况下为/ i18n。
假设我们要翻译每个帖子上显示的主页文本链接。我们需要找到位于themes / aether / layouts / partials / home-card.html中的关联HTML 。并使用以下HTML更改它：
这里，我们使用T模板函数指示模板编译器查看“home”键的当前语言环境的translate文件夹并加载消息。如果我们现在运行服务器，我们将不再看到“Home”文本，因为我们的翻译是空的。
我们现在为每个语言环境添加翻译：
这里，“其他”表示该消息遵循默认的复数规则。如果我们想根据计数指定不同的转换，我们可以使用以下键之一：零，一，二，几，多。
重新启动服务器，您可以看到“主页”文本翻译。
您可以使用其翻译继续并替换其余的硬编码字符串。
创建语言下拉列表
一旦我们设置了语言，Hugo就会为我们公开以下参数：
.Site.Languages：所有语言的列表
.Site.Language：当前的语言
此外，每个页面都有以下参数
.IsTranslated：检查内容是否已翻译
.Translations：页面所有翻译的列表
让我们使用它们来创建语言列表，以便用户可以从导航栏切换语言。在nav-header部分之后添加以下代码到 themes / aether / layouts / partials / nav-bar.html。还要在style.css中包含以下CSS：
现在，再次运行服务器并尝试切换语言。
使用PhraseApp上下文编辑器
PhraseApp的 上下文编辑器 是一种翻译工具，它通过提供有用的上下文信息来帮助整个过程，从而提高整体翻译质量。您只需浏览您的网站并沿途编辑文本即可。
为了将它与Hugo整合，我们这次需要更多的资源。我们需要使用PhraseApp编辑器所需的唯一标识符来包装现有的翻译密钥。目前，默认情况下是以下表达式：
{{__phrase_ + key + __}}
我们不想创建新的短代码或自定义函数。我们可以做的最简单的方法是使用printf函数并使用我们提供的字符串格式化每个可翻译字符串。如果我们启用了上下文编辑器，我们可以根据需要传递密钥。
例如，我们可以通过修改layouts / _default / single.html来更改每篇文章的标题：
在默认情况下，phraseapp_key将在我们的配置中定义为％s，但是当我们想要启用编辑器时，我们可以将其更改为：
最后，我们需要包含将加载编辑器面板的初始化脚本。我们可以修改主题的layouts / partials / scripts.html文件并添加以下代码：
如果您尚未执行此操作，请导航至 phraseapp.com 并注册试用版。
设置帐户后，您可以创建项目并导航到“项目设置”以查找projectId键。
在启动服务器之前，使用它在PHRASEAPP_CONFIG中分配projectId变量。
当您导航到该页面时，您将看到一个登录模式，一旦您通过身份验证，您将看到已翻译的字符串更改为包括它们旁边的编辑按钮。In-Context Editor面板也会显示出来。
结论
在本文中，我们看到了如何在Hugo网站中轻松添加多语言支持。我们还看了一下如何使用PhraseApp In-Context Editor将它集成到我们的工作流程中。如果您还有其他任何问题，请随时发表评论或给我留言。感谢您阅读，下次再见！
