Hugo是一個(gè)快速且易于使用的靜態(tài)站點(diǎn)生成器，用Go編寫(xiě)，可在多個(gè)平臺(tái)上使用。今天我們將看到一個(gè)向Hugo靜態(tài)站點(diǎn)添加多語(yǔ)言支持的示例。讓我們?cè)敿?xì)看看它的特殊性。

在與Hugo合作的i18n教程中，我們將構(gòu)建一個(gè)包含i18n支持的漂亮博客。以前，我們已經(jīng)看到了一些使用Gatsby實(shí)現(xiàn)i18n的很好的例子 ?，F(xiàn)在我們來(lái)看看另一個(gè)流行的靜態(tài)站點(diǎn)生成器如Hugo的示例。此外，我們將看到如何將 PhraseApp In-Context Editor 集成到我們的網(wǎng)站中，并能夠?yàn)g覽網(wǎng)站并編輯文本。整個(gè)代碼也可以在 GitHub上獲得。

雨果和靜態(tài)網(wǎng)站

Hugo，就像Gatsby一樣，是一個(gè)生成靜態(tài)網(wǎng)站的網(wǎng)站生成器。靜態(tài)網(wǎng)站包含具有固定內(nèi)容的網(wǎng)頁(yè)。那只是Javascript，HTML和CSS。有一個(gè)服務(wù)器托管這些靜態(tài)資產(chǎn)，但它沒(méi)有引擎來(lái)運(yùn)行腳本（node，python等...）。但是，可能存在從托管該站點(diǎn)的Web服務(wù)器以外的其他來(lái)源檢索的內(nèi)容。

Hugo與流行的go-i18n庫(kù)集成，并提供多個(gè)語(yǔ)言環(huán)境的簡(jiǎn)單API。以前，我們已經(jīng)看到了如何在Go應(yīng)用程序中使用此庫(kù)的教程 。這當(dāng)然具有所有優(yōu)點(diǎn)和缺點(diǎn)，因此我們需要了解這種情況。

讓我們開(kāi)始使用Hugo將基本站點(diǎn)分層，看看我們?nèi)绾问顾呖杀镜鼗?。首先，讓我們從預(yù)賽開(kāi)始。

安裝Hugo

按照Hugo快速入門(mén)指南中的說(shuō)明進(jìn)行操作。例如，在Mac中，您可以像以下一樣輕松地安裝它：

通過(guò)要求Hugo打印其軟件版本來(lái)測(cè)試安裝是否成功：

創(chuàng)建新站點(diǎn)并安裝主題

我們?cè)诿麨閜hraseapp-hugo-i18n的文件夾中創(chuàng)建了一個(gè)新的Hugo站點(diǎn)。

默認(rèn)情況下，沒(méi)有選擇主題，因此如果運(yùn)行開(kāi)發(fā)服務(wù)器，您將看到一個(gè)空白頁(yè)面。為了使我們的演示更容易使用，讓我們安裝一個(gè)主題來(lái)使用。

我們將使用Aether主題。

現(xiàn)在，如果您運(yùn)行開(kāi)發(fā)服務(wù)器，則可以檢查該站點(diǎn)是否已加載。

配置語(yǔ)言環(huán)境

接下來(lái)，我們需要定義我們想要支持的可用語(yǔ)言環(huán)境列表。在本教程中，我們將使用英語(yǔ)和希臘語(yǔ)。我們需要在站點(diǎn)配置中添加適當(dāng)?shù)恼Z(yǔ)言條目。

將以下代碼添加到您的站點(diǎn)的config.toml

如果您注意到，我們已將每個(gè)區(qū)域設(shè)置的標(biāo)題替換為其翻譯并分配了一些權(quán)重。Hugo提供了為每個(gè)語(yǔ)言環(huán)境定義任何類型Params的選項(xiàng)，它們將正確顯示。我們還定義了一個(gè)DefaultContentLanguage。這對(duì)于在缺少翻譯的情況下明確提供后備語(yǔ)言非常有用。這將回歸到英語(yǔ)，但如果我們想要，我們可以將其改為希臘語(yǔ)。

提示：如果您希望在URL中始終使用默認(rèn)內(nèi)容語(yǔ)言，則可以將以下條目添加到配置中：

然后，當(dāng)您將站點(diǎn)打開(kāi)到默認(rèn)URL時(shí)，它將重定向到localhost：1313 / en。而不是localhost：1313 /

現(xiàn)在讓我們測(cè)試一下我們的翻譯。處理主題的exampleSite文件夾中的一些帖子內(nèi)容并重新啟動(dòng)服務(wù)器。

如果您導(dǎo)航到localhost：1313 / gr路徑，您將看到正確翻譯的標(biāo)題，但內(nèi)容不是。我們需要為我們的內(nèi)容提供一些翻譯，并告訴Hugo在哪里可以找到它們。我們有兩種可能的方法。

使用文件名

這是默認(rèn)模式。對(duì)于我們創(chuàng)建的每個(gè)內(nèi)容資源，我們需要提供一個(gè)關(guān)聯(lián)的翻譯資源，其語(yǔ)言代碼作為文件名的后綴，例如在我們的帖子中：

/content/post/my-first-post.gr.md：希臘語(yǔ)翻譯

/content/post/my-first-post.md：用于默認(rèn)語(yǔ)言翻譯（英語(yǔ)）

基本文件名和路徑（/ content / post / my-first-post）是公共部分，用于將這些文件鏈接在一起作為同一帖子。如果您創(chuàng)建此翻譯文件，您將在列表中看到它：

提示：如果我們想將不同的頁(yè)面鏈接到同一篇文章，那么我們需要在所有鏈接頁(yè)面的前端配置中使用以下指令：

例如，創(chuàng)建一個(gè)名為“το-πρ?το-μου-?ρθρο.gr.md”的新帖子，并將translationKey參數(shù)添加到所有3個(gè)頁(yè)面。

然后，如果你啟動(dòng)服務(wù)器，你會(huì)看到英文列表中的希臘文章，如果你點(diǎn)擊它，你將重定向到localhost：1313 / greek / post / my-first-post /。當(dāng)您想要在同一頁(yè)面中組合多個(gè)語(yǔ)言文章時(shí)，這非常有用。

按內(nèi)容文件夾

使用此系統(tǒng)，我們需要重新組織我們的帖子內(nèi)容并將每篇文章放入語(yǔ)言文件中。例如，我們需要將希臘文和英文文章分開(kāi)并將它們放入自己的文件中。

/content/greek/post/my-first-post.md：希臘語(yǔ)翻譯

/content/english/post/my-first-post.md：用于英語(yǔ)翻譯

然后，我們需要告訴Hugo使用這些內(nèi)容文件。我們需要在配置中添加以下參數(shù)：

注意：如果為希臘語(yǔ)指定內(nèi)容目錄，則還需要為英語(yǔ)指定，以防止出現(xiàn)重復(fù)的常見(jiàn)路徑錯(cuò)誤。

如果再次運(yùn)行服務(wù)器，您將按語(yǔ)言查看文章列表。

添加和使用翻譯

我們已經(jīng)看到了如何翻譯我們的帖子和文章，但是我們?nèi)绾畏g一些主題的字符串呢？當(dāng)Hugo利用go-i18n庫(kù)時(shí)，我們可以在文件夾中定義我們的翻譯消息，并使用特殊模板函數(shù)在提供站點(diǎn)時(shí)引用這些字符串。

首先，我們需要?jiǎng)?chuàng)建一個(gè)消息文件夾，默認(rèn)情況下為/ i18n。

假設(shè)我們要翻譯每個(gè)帖子上顯示的主頁(yè)文本鏈接。我們需要找到位于themes / aether / layouts / partials / home-card.html中的關(guān)聯(lián)HTML 。并使用以下HTML更改它：

這里，我們使用T模板函數(shù)指示模板編譯器查看“home”鍵的當(dāng)前語(yǔ)言環(huán)境的translate文件夾并加載消息。如果我們現(xiàn)在運(yùn)行服務(wù)器，我們將不再看到“Home”文本，因?yàn)槲覀兊姆g是空的。

我們現(xiàn)在為每個(gè)語(yǔ)言環(huán)境添加翻譯：

這里，“其他”表示該消息遵循默認(rèn)的復(fù)數(shù)規(guī)則。如果我們想根據(jù)計(jì)數(shù)指定不同的轉(zhuǎn)換，我們可以使用以下鍵之一：零，一，二，幾，多。

重新啟動(dòng)服務(wù)器，您可以看到“主頁(yè)”文本翻譯。

您可以使用其翻譯繼續(xù)并替換其余的硬編碼字符串。

創(chuàng)建語(yǔ)言下拉列表

一旦我們?cè)O(shè)置了語(yǔ)言，Hugo就會(huì)為我們公開(kāi)以下參數(shù)：

.Site.Languages：所有語(yǔ)言的列表

.Site.Language：當(dāng)前的語(yǔ)言

此外，每個(gè)頁(yè)面都有以下參數(shù)

.IsTranslated：檢查內(nèi)容是否已翻譯

.Translations：頁(yè)面所有翻譯的列表

讓我們使用它們來(lái)創(chuàng)建語(yǔ)言列表，以便用戶可以從導(dǎo)航欄切換語(yǔ)言。在nav-header部分之后添加以下代碼到 themes / aether / layouts / partials / nav-bar.html。還要在style.css中包含以下CSS：

現(xiàn)在，再次運(yùn)行服務(wù)器并嘗試切換語(yǔ)言。

使用PhraseApp上下文編輯器

PhraseApp的 上下文編輯器 是一種翻譯工具，它通過(guò)提供有用的上下文信息來(lái)幫助整個(gè)過(guò)程，從而提高整體翻譯質(zhì)量。您只需瀏覽您的網(wǎng)站并沿途編輯文本即可。

為了將它與Hugo整合，我們這次需要更多的資源。我們需要使用PhraseApp編輯器所需的唯一標(biāo)識(shí)符來(lái)包裝現(xiàn)有的翻譯密鑰。目前，默認(rèn)情況下是以下表達(dá)式：

{{__phrase_ + key + __}}

我們不想創(chuàng)建新的短代碼或自定義函數(shù)。我們可以做的最簡(jiǎn)單的方法是使用printf函數(shù)并使用我們提供的字符串格式化每個(gè)可翻譯字符串。如果我們啟用了上下文編輯器，我們可以根據(jù)需要傳遞密鑰。

例如，我們可以通過(guò)修改layouts / _default / single.html來(lái)更改每篇文章的標(biāo)題：

在默認(rèn)情況下，phraseapp_key將在我們的配置中定義為％s，但是當(dāng)我們想要啟用編輯器時(shí)，我們可以將其更改為：

最后，我們需要包含將加載編輯器面板的初始化腳本。我們可以修改主題的layouts / partials / scripts.html文件并添加以下代碼：

如果您尚未執(zhí)行此操作，請(qǐng)導(dǎo)航至 phraseapp.com 并注冊(cè)試用版。

設(shè)置帳戶后，您可以創(chuàng)建項(xiàng)目并導(dǎo)航到“項(xiàng)目設(shè)置”以查找projectId鍵。

在啟動(dòng)服務(wù)器之前，使用它在PHRASEAPP_CONFIG中分配projectId變量。

當(dāng)您導(dǎo)航到該頁(yè)面時(shí)，您將看到一個(gè)登錄模式，一旦您通過(guò)身份驗(yàn)證，您將看到已翻譯的字符串更改為包括它們旁邊的編輯按鈕。In-Context Editor面板也會(huì)顯示出來(lái)。

結(jié)論

在本文中，我們看到了如何在Hugo網(wǎng)站中輕松添加多語(yǔ)言支持。我們還看了一下如何使用PhraseApp In-Context Editor將它集成到我們的工作流程中。如果您還有其他任何問(wèn)題，請(qǐng)隨時(shí)發(fā)表評(píng)論或給我留言。感謝您閱讀，下次再見(jiàn)！