快轉到主要內容

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

分類   資訊科技 Hugo網站架設
標籤   Hugo
🗓️ 民國111年 壬寅年
✍ 切換正體/簡體字
目錄

因為偶爾會在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機制稍做修改,參考他的 文檔和範例製作。

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

  1. 開啟config.toml,首先確認我的預設語言是中文(台灣)
# i18n
defaultContentLanguage = "zh-tw"
defaultContentLanguageInSubdir = false
  1. 捲動至檔案末尾,加入以下設定,設定中文主站點的內容,輸入content/zh-tw。此設定不會影響現有文章的網址。
# 中文
[languages.zh-tw]
    languageName = "🇹🇼"
    contentDir = "content/zh-tw"
    weight = 1
  1. 再加入英文站點的設定。我在網站content目錄下另外開了一個en-us目錄,裡面儲存的是英文站點的文章。

  2. en-us下的檔案結構就是這樣,複製主站點的設定,裡面的東西改成英文的。

content
├── en-us
│   ├── about
│   │   └── _index.md
│   ├── categories
│   ├── posts
│   │   ├── compile-box86-and-box64.md
│   │   └── termux-compile-mesa-driver.md
│   └── tags
  1. 原本的中文文章是位於content。現比照英文的辦理,新增zh-tw目錄,將postsabout目錄移到裡面。現有文章的網址不會受影響。
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
  1. 繼續往下編輯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"
  1. 我利用了MemE提供的URL按鈕功能,在網頁右上角選單新增了切換語言的按鈕「🀄 中文」,中文主站點的設定部份也做一個「🇺🇸 English」。這個按鈕只是跳轉站點用,不是翻譯文章。至於為什麼要用麻將的「中」emoji…因為讀者有來自China的。

  2. 最後是設定英文版首頁。目前中文站點使用的名言是出自少女終末旅行,幸好有英文版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)"
  1. 使用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

2. 修正提交給Google的sitemap
#

Google Search Console是提高網站搜尋曝光率之用。

登入 Google Search Console後台,原本提交的sitemap是https://ivonblog.com/sitemap.xml,現已不再適用。

Hugo偵測到多語言後,會改在該語言的目錄中生成sitemap,所以應該改提交:https://ivonblog.com/zh-tw/sitemap.xmlhttps://ivonblog.com/en-us/sitemap.xml

3. 總結
#

如同前面所說,我還是寫中文內容為主,英文的只是順便。

這樣設計結構上還是有缺陷,中文貼文的網址不會像英文一樣含有語言代碼(“en-us”)。這是為了不破壞我現有文章網址所做出的取捨。

相關文章

如何給Hugo + Netlify的網站加上Gitalk留言板
分類   資訊科技 Hugo網站架設
標籤   Github Netlify
如何使用UUP DUMP下載Windows的ISO [Linux / Windows / macOS]
分類   資訊科技 電腦軟體分享
標籤   Windows Windows on ARM
討論哲學思辨之書:褚士瑩《我為什麼去法國上哲學課?》讀後感
分類   人文藝術 書影心潮
標籤   Philosophy

留言板

此處提供二種留言板。點選按鈕,選擇您覺得方便的留言板。要討論程式碼請用Giscus,匿名討論請用Disqus。

這是Giscus留言板,需要Github帳號才能留言。支援markdown語法,若要上傳圖片請貼Imgur或Postimages。您的留言會在Github Discussions向所有人公開。

這是Disqus留言板,您可能會看到Disqus強制投放的廣告。有時留言可能會被系統判定需審核,導致延遲顯示,請見諒。若要上傳圖片請貼Imgur或Postimages。