Hugo 不完美教程 - VI: Multilingual 多語言支持

前言

shot.jpg

本靜態(tài)站點(diǎn)用于演示之用，使用 Hugo 構(gòu)建，以及 Markdown 供應(yīng)內(nèi)容。

流行的靜態(tài)站點(diǎn)框架有以下幾個：

演示站點(diǎn)有兩個訪問入口：

此站點(diǎn)提供了一篇關(guān)于 Hugo 靜態(tài)站點(diǎn)生成框架的入門教程。

代碼倉庫地址如下，查看 hugo-project 分支是原文件，master 分支是發(fā)布的靜態(tài)站點(diǎn)文件：

title: "VI: Multilingual 多語言支持"
description: "堅(jiān)果的 Hugo 教程"
date: 2020-08-06T20:14:08-04:00
featured_image_: "/assets/IMG_20181101_233654_s.jpg"
summary: Hugo 的多語言支持是深入各個方面的，包括頁面的語言、數(shù)據(jù)文件的多語言、i18n 多語言字符串轉(zhuǎn)換函數(shù)等。多語言的內(nèi)容組織方式有兩種，文件名組織和目錄結(jié)構(gòu)組織。多語言可以與菜單很好地結(jié)合，讓靜態(tài)站點(diǎn)也可以擁有動態(tài)站在一樣的效果。
tags: ["hugo"]
disable_share: false

Multilingual 多語言支持

Hugo 的多語言支持是深入各個方面的，包括頁面的語言、數(shù)據(jù)文件的多語言、i18n 多語言字符串轉(zhuǎn)換函數(shù)等。

在 config.toml 配置中，DefaultContentLanguage 設(shè)置默認(rèn)的語言，在 [languages] 區(qū)定義多語言相應(yīng)配置：

{{< code file="config.toml">}}
DefaultContentLanguage = "en"
copyright = "Everything is mine"

defaultContentLanguageInSubdirto = true

[languages]
  [languages.ar]
    LanguageName = "阿拉伯語"
    languagedirection = "rtl"
    title = "??????"
    weight = 2
  [languages.en]
    LanguageName = "英文"
    title = "My blog"
    weight = 1
    [languages.en.params]
      linkedin = "https://linkedin.com/whoever"
  [languages.fr]
    LanguageName = "法語"
    title = "Mon blogue"
    weight = 2
    contentDir = content/french
    [languages.fr.params]
      linkedin = "https://linkedin.com/fr/whoever"
      [languages.fr.params.navigation]
        help = "Aide"

[params]
  [params.navigation]
    help = "Help"

{{< /code >}}
對應(yīng)到些沒有多語言配置的參數(shù)，比如 help 在定義了 fr 語版本，那么在使用 ar 或 en 時就會自動回滾到頂級的 help = "Help"。

<title>{{ .Param "title" }}</title>

多語言的內(nèi)容組織方式有兩種，文件名組織和目錄結(jié)構(gòu)組織：

  • content/about.md
  • content/contact.md
  • content/about.fr.md ?
  • content/french/about.md ?
  • content/french/a-propos.md ??

在 config.yaml 配置文件中，defaultContentLanguageInSubdirto 可以設(shè)置默認(rèn)的語言也在內(nèi)容子目錄中，而 contentDir 參數(shù)可以為具體語言指定其內(nèi)容目錄名稱。

可以配置禁用某些語言：

disableLanguages = ["fr", "ja"]

通過環(huán)境變量可以覆蓋禁用配置：

HUGO_DISABLELANGUAGES="fr ja"
HUGO_DISABLELANGUAGES=" "

翻譯內(nèi)容連接設(shè)置是很重要的步驟，通過在 MD 內(nèi)容文件的扉頁設(shè)置 translationKey，可以

# From all three pages: about.md, a-propos.fr.md, acerda.es.md
---
translationKey: about
---

Hugo 將鏈接的翻譯內(nèi)容保存在頁面對象的兩個變量中：

  • .Translations 包含已鏈接的頁面；
  • .AllTranslations 包含已經(jīng)鏈接的頁面，包括當(dāng)前翻譯的頁面。

這兩個集合按 language Weight 設(shè)置的值排序，值小的靠前。.IsTranslated 表示當(dāng)前查看的頁面是否有相應(yīng)的翻譯內(nèi)容頁面，如果有，就可以在以上兩個頁面變量集合中獲取。

{{ if .IsTranslated }}
  {{ range .Translations }}
  <link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}" title="{{ .Language.LanguageName }}">
  {{ end }}
{{ end }}

{{ if .IsTranslated }}
  <nav class="LangNav">
  {{ range .Translations }}
    <a href="{{ .Permalink }}">{{ .Name }} - {{ .Title }}</a>
  {{ end}}
  </nav>
{{ end }}

設(shè)置語言后，模板文件的搜索會按語言調(diào)整，例如加載一個 AMP 頁面，index.fr.amp.html 會優(yōu)先于 index.amp.html 被選中，但 index.fr.html 會作為前兩個模板的備選，只有它們?nèi)笔r有效。

AMP - Accelerated Mobile Pages 是 Google 聯(lián)合 8 家科技公司發(fā)起的移動頁面加速開源項(xiàng)目。它帶來的結(jié)果就是，你真的可以瞬時打開一個網(wǎng)頁了，速度快到第一次使用的人難以相信這竟然是 Web 頁面。

從技術(shù)方面來說，采用 AMP 技術(shù)的網(wǎng)頁之所以可以打開的這么快，這主要得益于它剔除了網(wǎng)頁代碼中各種可能會拖慢速度的部分，比如第三方的腳本文件、一些 HTML 標(biāo)簽、廣告追蹤器等等，所有腳本按異步執(zhí)行。

在頁面加速這方面，F(xiàn)acebook 開發(fā)了交互式媒體內(nèi)容創(chuàng)建工具 Instant Articles，目標(biāo)都是要使用戶瀏覽 Web 的體驗(yàn)得到提升，使用戶感覺就像在使用本地應(yīng)用程序一樣。

為了獲得更好 SEO 效果，多語言頁面的 URL 可以在頁面中配置扉頁的 slug 參數(shù)進(jìn)行相應(yīng)的修改：

# about.fr.md
title: à Propos
slug: a-propos

# acerda.es.md
title: Acerda
slug: acerda

這樣，模板目錄結(jié)構(gòu)就有了一些變化，相應(yīng)在頁面 URL 也相應(yīng)改變：

fr/a-propos/index.html ???? ??
es/acerda/index.html   ???? ??

Taxonomies and Blackfriday 多語言配置：

[Taxonomies]
  tag = "tags"

[blackfriday]
  angledQuotes = true
  hrefTargetBlank = true

[languages]
  [languages.en]
    title = "English"
    weight = 1
    [languages.en.blackfriday]
      angledQuotes = false
  [languages.fr]
    title = "Fran?ais"
    weight = 2
    [languages.fr.Taxonomies]
      plaque = "plaques"

數(shù)據(jù)文件的多語言組織：

data
  ├── en
  │   └── team.yaml
  └── fr
      └── team.yaml

多語言數(shù)據(jù)的使用，先通過 index 函數(shù)獲取站點(diǎn)配置的語言對應(yīng)的數(shù)據(jù)文件，再使用：

{{ $data := index .Site.Data .Site.Language.Lang }}
{{ range $data.team }}
    <a href="{{ .url }}">{{ .name }}</a>
{{ end }}

多語言主機(jī)配置，以下示范根據(jù)主機(jī)域名使用不同的語言：

[languages]
  [languages.en]
    baseURL = "https://example.com"
    languageName = "English"
    title = "In English"
    weight = 2
  [languages.fr]
    baseURL = "https://example.fr"
    languageName = "Fran?ais"
    title = "En Fran?ais"
    weight = 1

這兩個語言配置對應(yīng)生成兩個發(fā)布內(nèi)容目錄：

public
├── en
└── fr

使用主題字符串也能實(shí)現(xiàn)內(nèi)容的多語言轉(zhuǎn)換，具體參考 i18n 函數(shù)。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容