利用 Hexo 來建立一個多語系部落格

Ray Lee | 李宗叡

Published in

Learn or Die

Jun 21, 2019

English version

My Blog

前言

這幾天為了建立一個個人部落格，真是沒少折騰了！個人除了對程式分享有熱愛之外，對語言也很有愛，像是英日語等等，所以一直以來，就想建一個多語系的部落格，除了可以讓分享的受眾更廣之外，另一方面也可以強制練習自己的語言！在請教 Google 大神無數次之後，大概歸納出以下三種可行的方法：

利用 i18n ，再透過修改源碼的方式
建兩個站點，一個中文，一個英文
利用 Hexo 的 minos 主題

在花了一些時間研究之後，毅然決然的選擇第三種，原因如下：

原本我是使用 Hexo 的 Next 主題，可惜該主題在這方面並沒有支援，需要特別去修改源碼。
這代表，維護成本會相當可觀，每修改一個地方，就需要修改兩份檔案，看你有幾種語言就得修改幾份檔案

所以，本篇會針對 Hexo 的 minos 主題來做分享

安裝 Hexo

安裝 NodeJS ，會連帶安裝 npm 套件管理器

brew install node

透過 npm 安裝 Hexo 主程式

npm install hexo-cli -g

在指定資料夾內，建立一個 Hexo 網站需要的檔案

hexo init folderName

安裝 minos 主題

進到資料夾

cd folderName

從官方 GitHub上clone

https://github.com/ppoffice/hexo-theme-minos.git themes/minos

原始資料夾，預設只有 _config.yml.example ，所以 copy 或 rename 為 _config.yml ，並於檔案中，搜尋 theme ，並設為 minos

開始配置

配置 Hexo 配置檔

config(配置檔)又分為 Hexo 本身的，以及主題的，以下先針對 Hexo 配置檔做說明，以下為必要設定的選項，其餘都維持預設即可:

language: ['en', 'zh-tw'] //這邊的配置，表示默認以English語系為主，並以Taiwan語系為輔url: https://tn710617.github.io/ (此為你的網站地址)permalink: :title/deploy:
  type: git
  repo: https://github.com/tn710617/tn710617.github.io.git (此為你在GitHub上的資料夾clone地址)
  branch: master

主題配置檔內的設定都跟多語系無直接關係，所以這邊不特別做說明，大家依照官方文件以及個人喜好設定完成即可。

配置網頁語系檔

配置完 Hexo 的配置檔後，我們需要先新建一個自己國家的語系檔，如果主題內原本就已經有的話就不必，以本篇例子來說，我需要一個 Taiwan 語系，但是主題內的配置沒有，所以我必須要自己建一個。這個檔案的功用為，當切換到指定語系時， Hexo 會去讀指定語系的配置檔，就是這個檔案，並且依照這個語系檔裡面的內容來顯示

到 minos 的 languages 資料夾內，新建一個檔名為zh-tw.yml的檔案
內容可以比照其他國家的格式，如下：

name: '繁體中文'
common:
  archives: '歸檔'
  category: '分類'
  tag: '標籤'
  categories: '分類'
  tags: '標籤'
nav:
  next: '下一頁'
  prev: '上一頁'
  search: '搜尋'
  toc: '目錄'
article:
  read_more: '點擊閱讀'
  read: '讀完'
  about: '大概'
  words: '字'
  comments: '留言'
  contents: '目錄'
search:
  hint: '站內搜尋'
insight:
  hint: '站內搜尋'
  posts: '文章'
  pages: '頁面'
  categories: '分類'
  tags: '標籤'
  untitled: '(無標題)'

配置主題下的語系導向檔案

語系檔設定完成後，複製這個主題配置檔，並創立另外兩份配置檔。這幾個檔案的作用為，當我們切換到指定語系，網頁會依照這個檔案內配置的路徑來開啟相對應的檔案，比方說，中文開中文的檔案，英文開英文的檔案。

_config.zh-tw.yml_config.en.yml

先針對’en’配置檔做以下配置：

// 這邊的配置可以依照個人需求
menu:
  Archives: /archives
  Categories: /categories
  Tags: /tags
  Schedule: /schedule
  About: /about
  Friends: /friends

再來針對’zh-tw’配置檔做以下配置：

menu:
  歸檔: /zh-tw/archives
  分類: /zh-tw/categories
  標籤: /zh-tw/tags
  行程: /zh-tw/schedule
  關於: /zh-tw/about
  好友: /zh-tw/friends

大家可能會注意到，這三個檔案內有著重複的配置。規則是這樣的，當我們切換到該語系的網頁時，默認會套用該語系的配置檔裡頭的配置，若該語系配置檔裡頭沒有這個配置，會自動套用主題原本的配置檔裡面的配置，所以這邊可以很靈活的針對不同語系的網頁來做配置調整。

view檔案的配置

現在我們開始針對view的檔案來做配置， minos 的規則是，除了源碼以及主體架構之外，所有的檔案根據語系的數量來配置，簡單來說，有幾種語系，該檔案就要有幾份。這也很合理，不然透過機器翻譯的文章你敢貼出來嗎？
現在開始針對source底下的檔案來做配置:
_posts

上圖應該不會很難理解吧？簡單來說，_posts資料夾下面放的，是默認語系的檔案，以本篇例子來說，就是英文語系。而在_posts資料夾下面，建立一個名為zh-tw的資料夾，裡頭放著自然是中文語系的檔案
其他的：

檔案配置就跟上圖一樣，是不是簡單到言語無法形容了？

語言切換選單位置調整

以我個人來說，當我進到一個網頁，如果密密麻麻的都是我看不懂的語言，我希望我第一個可以找到的就是語言切換的按鈕（如果有的話啦），以目前Ray使用的minos主題版本來說，切換語言的選單默認是在最下面的，所以我希望把它調整到一個顯眼的地方

到footer.ejs中，找到以下的代碼

把它剪下之後，貼到navbar.ejs檔案的最下方</body>上面
如果現在從今整理頁面，應該已經可以看到語言切換選單已經換到上頭去了！可是呢… 怎麼是向上開啟選單的ＸＤ，根本無法選啊！所以我們還要再做一些調整。找到layout裡頭的languages.ejs檔案，並在裡頭找到下面這一行，並加入style="top:100%"

結語

照著上面配置，大概就可以實現雙語系網站了，效果可以看看我的 blog若有說的不對的地方，歡迎指教
歡迎轉載，但請註明出處，謝謝！

Write Medium in Markdown? Try Markdium!

利用 Hexo 來建立一個 多語系 部落格

前言