Hugo是一個快速且易于使用的靜態(tài)站點生成器，用Go編寫，可在多個平臺上使用。今天我們將看到一個向Hugo靜態(tài)站點添加多語言支持的示例。讓我們詳細看看它的特殊性。

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

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

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

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

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

安裝Hugo

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

通過要求Hugo打印其軟件版本來測試安裝是否成功：

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

我們在名為phraseapp-hugo-i18n的文件夾中創(chuàng)建了一個新的Hugo站點。

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

我們將使用Aether主題。

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

配置語言環(huán)境

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

將以下代碼添加到您的站點的config.toml

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

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

然后，當您將站點打開到默認URL時，它將重定向到localhost：1313 / en。而不是localhost：1313 /

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

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

使用文件名

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

/content/post/my-first-post.gr.md：希臘語翻譯

/content/post/my-first-post.md：用于默認語言翻譯（英語）

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

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

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

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

按內(nèi)容文件夾

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

/content/greek/post/my-first-post.md：希臘語翻譯

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

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

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

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

添加和使用翻譯

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

首先，我們需要創(chuàng)建一個消息文件夾，默認情況下為/ i18n。

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

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

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

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

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

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

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

一旦我們設(shè)置了語言，Hugo就會為我們公開以下參數(shù)：

.Site.Languages：所有語言的列表

.Site.Language：當前的語言

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

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

.Translations：頁面所有翻譯的列表

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

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

使用PhraseApp上下文編輯器

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

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

{{__phrase_ + key + __}}

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

例如，我們可以通過修改layouts / _default / single.html來更改每篇文章的標題：

在默認情況下，phraseapp_key將在我們的配置中定義為％s，但是當我們想要啟用編輯器時，我們可以將其更改為：

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

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

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

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

當您導(dǎo)航到該頁面時，您將看到一個登錄模式，一旦您通過身份驗證，您將看到已翻譯的字符串更改為包括它們旁邊的編輯按鈕。In-Context Editor面板也會顯示出來。

結(jié)論

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