使用Hugo架設多國語言網站(i18n)

因為偶爾會在Reddit發技術文，加上有寫過一些還算認真下去研究的essay，所以想讓自己網站有個地方可以收錄英文版文章，而非流落於Medium、Github Gists等各大平台。

目前本站是已經寫了很多中文的文章，多虧Hugo轉換處理得當，新增英文語言不會破壞現有文章的網址，不然我分享到各大社群媒體的連結就要重貼啦。

為製作多語言站點(i18n, multilingual)，我使用最笨的方法，非最佳解：在我的域名https://ivonblog.com下面新增一個"en-us"的目錄，然後英文版的「關於我」、「文章列表」都放在裡面，生成的標籤跟中文主站點是分開的。

需要注意的是我還是寫中文內容為主，英文站點的文章不是中文站的一一對應翻譯，而是獨立的文章。如果有需要，我再自行於相關連的二篇文章內用超連結的方式提醒讀者就可以了。

效果如圖:

說來容易，不過調整Hugo設定檔也花了些時間，在此紀錄一下。

1. 調整Hugo的config.toml
#

Hugo版本為0.93.3，我的主題是MemE，版本4.5.0。作者reuixiy有對Hugo的i18n機制稍做修改，參考他的文檔和範例製作。

概念是這樣：英文版的站點會繼承中文主站點的設定，之後可以再自訂。

開啟config.toml，首先確認我的預設語言是中文(台灣)

# i18n
defaultContentLanguage = "zh-tw"
defaultContentLanguageInSubdir = false

捲動至檔案末尾，加入以下設定，設定中文主站點的內容，輸入content/zh-tw。此設定不會影響現有文章的網址。

# 中文
[languages.zh-tw]
    languageName = "🇹🇼"
    contentDir = "content/zh-tw"
    weight = 1

再加入英文站點的設定。我在網站content目錄下另外開了一個en-us目錄，裡面儲存的是英文站點的文章。
en-us下的檔案結構就是這樣，複製主站點的設定，裡面的東西改成英文的。

content
├── en-us
│   ├── about
│   │   └── _index.md
│   ├── categories
│   ├── posts
│   │   ├── compile-box86-and-box64.md
│   │   └── termux-compile-mesa-driver.md
│   └── tags

原本的中文文章是位於content。現比照英文的辦理，新增zh-tw目錄，將posts和about目錄移到裡面。現有文章的網址不會受影響。

content
├── en-us
│   ├── about
│   │   └── _index.md
│   ├── categories
│   ├── posts
│   │   ├── compile-box86-and-box64.md
│   │   └── termux-compile-mesa-driver.md
│   └── tags
└── zh-tw
    ├── about
    │   └── _index.md
    └── posts

繼續往下編輯config.toml，設定英文站點的樣子。變數跟中文主站點的格式類似，只不過前面多了"languages.en-us"。選單就是複製中文主站點然後改成英文版。

[languages.en-us]
    languageName = "🇺🇸"
    contentDir = "content/en-us"
    weight = 2
    languageCode = "en-US"
    hasCJKLanguage = false
    copyright = "[CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en)"
[languages.en-us.taxonomies]
    category = "categories"
    tag = "tags"
[languages.en-us.menu]
    # [[languages.en-us.menu.home]]
    #     pageref = "/"
    #     weight = 3
    #     pre = "internal"
    #     post = "user-circle"
    #     identifier = "about"
    [[languages.en-us.menu.main]]
        pageref = "/posts/"
        name = "Posts"
        weight = 2
        pre = "internal"
        post = "user-circle"
        identifier = "archive"
    [[languages.en-us.menu.main]]
        pageref = "/categories/"
        name = "Categories"
        weight = 3
        pre = "internal"
        post = "th"
    [[languages.en-us.menu.main]]
        pageref = "/tags/"
        name = "Tags"
        weight = 4
        pre = "internal"
        post = "user-circle"
        identifier = "tags"
    [[languages.en-us.menu.main]]
        pageref = "/about/"
        name = "About"
        weight = 5
        pre = "internal"
        post = "user-circle"
        identifier = "about"
   [[languages.en-us.menu.main]]
        weight = 6
        identifier = "theme-switcher"
    [[languages.en-us.menu.main]]
        weight = 7
        identifier = "lang-switcher"
    [[languages.en-us.menu.main]]
        weight = 8
        identifier = "search"
        post = "search"
    [[languages.en-us.menu.main]]
        weight = 1
        name = "🀄 中文"
        identifier = "links"
        pre = "internal"
        url = "https://ivonblog.com"

我利用了MemE提供的URL按鈕功能，在網頁右上角選單新增了切換語言的按鈕「🀄 中文」，中文主站點的設定部份也做一個「🇺🇸 English」。這個按鈕只是跳轉站點用，不是翻譯文章。至於為什麼要用麻將的「中」emoji…因為讀者有來自China的。
最後是設定英文版首頁。目前中文站點使用的名言是出自少女終末旅行，幸好有英文版WIKI翻譯對照，所以英文站點就容易多了。至於預設的字體Amstelvar會有撇號(’)空一格的問題，所以字體改成Noto Sans。

[languages.en-us.params]
    homePoetry = ["## You don't need a reason. There are nice things sometimes.", "――*Girls' Last Tour*", "Click top right panels for more info.", ' <a href="#"><img border="0" src="https://i.imgur.com/FRoWJju.png" width="500" /></a>', "(TEX-D2 + Minetest)"]
    siteDescription = "Ivon's Blog in English."
    listDateFormat = "January 2"
    fontFamilyTitle = "'Amstelvar', serif"
    fontFamilyHeadings = "'Amstelvar', serif"
    fontFamilyBody = "'Noto Sans', serif"
    fontsLink = "https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap"
    lineHeight = 1.618
    enableJustify = false
    enableSmallCaps = false
    enableEmphasisPoint = false
    enableChinesePunctuationGlyphCorrection = false
    customFooter = "[CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en)"

使用hugo server -D生成網站後，會分別顯示各個語言的篇數。如果生成的網站有問題，將public目錄刪除後重新生成。

                   | ZH-TW | EN-US
-------------------+-------+--------
  Pages            |    60 |    12
  Paginator pages  |     0 |     0
  Non-page files   |     0 |     0
  Static files     |    18 |    18
  Processed images |     0 |     0
  Aliases          |     1 |     0
  Sitemaps         |     2 |     1
  Cleaned          |     0 |     0