快轉到主要內容

多語言網站

查看原始碼編輯此頁 (外部連結)

Hugo 每個語言就是獨立一個 site,每個 site 各自獨立,多語言網站中每種語言都是 language 這個維度上的一個 site,本篇說明具體應該如何設定。

設定 此標題的連結

在 hugo.yaml 宣告網站使用的語言:

defaultContentLanguage: en
languages:
  en:
    label: English
    locale: en
    weight: 1
  fr:
    label: Français
    locale: fr
    weight: 2
  • defaultContentLanguage:預設語言,沒有標註語言的內容會歸屬於這個語言。
  • [languages.en], [languages.en] 用於和目錄名稱或檔名結尾比對(en, fr),字串完全相同才會視作同一種語言,若找不到相同的字串則回退到預設語言。由於 Hugo 總是 lowercases 這些 key 又進行字串比較,因此你總是應該使用小寫設定1。
  • weight:決定語言在選單、切換器中的排序。

Content 目錄結構 此標題的連結

多語言的內容可以使用目錄分類或是檔名標記,擇一使用即可。

檔名後綴 此標題的連結

同一路徑、同一檔名,用語言代碼作為後綴區分:

content/
├── _index.en.md
└── _index.fr.md

Hugo v0.161.0 (外部連結) 則支援更靈活的命名方式。

目錄 此標題的連結

每個語言用獨立的內容目錄,透過 contentDir 對應:

languages:
  en:
    contentDir: content/en
    weight: 1
  fr:
    contentDir: content/fr
    weight: 2
content/
├── en/
│   └── _index.md
└── fr/
    └── _index.md

兩個語言目錄底下相同路徑、相同檔名的內容,會被視為彼此的翻譯版本。

contentDir 實際運作是幫你設定了 module.mount,只是一個語法糖,前面的 contentDir 設定等同此 module 設定:

module:
  mounts:
    - source: content/en
      target: content
    - source: content/fr
      target: content

我們可以先記住 module 這個詞彙,這是 Hugo 很強大的一個工具,在 Hugo Modules 我們會專門介紹他。

如何選擇 此標題的連結

對於個人部落格用戶兩者完全沒有任何差別,真要比較的話 hugo-community-docs 會這樣建議:

  • 語言數量少、內容量小:用檔名結尾標註語言即可。
  • 語言數量多、或需要搭配版本(見 Sites Matrix)等其他維度混合使用:用獨立目錄,結構更清楚,方便之後擴充。

開發者需要更多功能的則見 Hugo 在官方社群的說明

頁面關聯 此標題的連結

不論用哪種結構,Hugo 都以「路徑 + 檔名相同」判斷翻譯關聯。如果路徑或檔名不同,需要在 front matter 手動指定相同的 translationKey,強制關聯為同一頁面的不同語言版本:

---
translationKey: 'about'
---
資訊

恭喜,如果你一路讀到這裡,代表你已經是一個能夠靈活運用 Hugo 的使用者了!後續內容偏向開發需求,你可以放心的跳過。


  1. locale 設定除外,原因如同基礎設定所說。 ↩︎

無障礙設定

字體大小