Hexo - Icarus 多國語系

目前Hexo並沒有支援多國語系，網路上的方式都是以Next主題實做多國語系為主，本篇將以Icarus主題來實做多國語系的Blog。

Step 1: 建立英文站點

在原本Hexo的根目錄下建立en 資料夾(在此命名為blog_en)，將原本Hexo根目錄下的所有檔案/資料夾複製一份到en資料夾中。

node_modules不必複製到en資料夾中

Step 2: 修改Config檔

修改blog_en中的 _config.yml (非icarus主題的config.yml)，修改language為en, url 設定為英文站台的網址

_config.yml

# Site
title: Nick Blog
subtitle:
description:
keywords:
author: Nick Lin
language: en
timezone:

# URL
url: https://nickcarter9.github.io/en

在en 資料夾(blog_en)中執行npm install就會自動安裝Hexo所需的插件，安裝完畢後，就可執行hexo g命令產生英文站點。

cmd

nick@Nick-Lin:~/Blog/blog_en$ npm install

Step 3: 增加語言切換按鈕

本篇設定在navigation bar的search按鈕旁邊，首先我們先增加英文站點的連結。

修改icarus的 _config.icarus.yml, 在最後一行增加

_config.icarus.yml

blog_en: https://nickcarter9.github.io/en/

並在blog_en/themes/icarus 的 _config.icarus.yml, 增加中文站點連結

blog_en/themes/icarus/_config.icarus.yml

blog_tw: https://nickcarter9.github.io/

在中文站點 themes/icarus/layout/common/navbar.jsx的module.exports增加config的對應（blog_en）

navbar.jsx

const { logo, title, navbar, widgets, search, blog_en } = config;

在英文站點也增加其對應(blog_en/themes/icarus/layout/common/navbar.jsx)

navbar.jsx

   const { logo, title, navbar, widgets, search, blog_tw } = config;
}

在return時，返回url(中文站點及英文站點都要設定)

navbar.jsx

return {
        logo,
        logoUrl: url_for(logo),
        siteUrl: url_for('/'),
        siteTitle: title,
        menu,
        links,
        showToc,
        tocTitle: _p('widget.catalogue', Infinity),
        showSearch: search && search.type,
        searchTitle: __('search.search'),
        blog_en,
        langUrl: url_for(blog_en)
    };

在中文站點及英文站點增加menu文字(/themes/icarus/languages/en.yml, zh-TW.yml)

en.yml

menu:
    chang-lang: ' Chinese'

zh-TW.yml

menu:
    chang-lang: ' English'

在search按鈕旁邊增加語系按鈕(/themes/icarus/layout/common/navbar.jsx)

在render中增加const變數: langTitle

navbar.jsx

const {
    logo,
    logoUrl,
    siteUrl,
    siteTitle,
    menu,
    links,
    showToc,
    tocTitle,
    showSearch,
    searchTitle,
    langTitle
} = this.props;

在 module.exports return 時，傳回變數langTitle

navbar.jsx

return {
    logo,
    logoUrl: url_for(logo),
    siteUrl: url_for('/'),
    siteTitle: title,
    menu,
    links,
    showToc,
    tocTitle: _p('widget.catalogue', Infinity),
    showSearch: search && search.type,
    searchTitle: __('search.search'),
    blog_en,
    langUrl: url_for(blog_en),
    langTitle: __('menu.chang-lang')
};

search按鈕旁邊增加語系按鈕

navbar.jsx

{showSearch ? <a class="navbar-item search" title={searchTitle} href="javascript:;">
            <i class="fas fa-search"></i></a> : null}
<a class="navbar-item" href={langUrl}>{langTitle}</a>

Step 4: Build & Push 中文及英文站點

由於執行的步驟有點多，所以撰寫了一隻可執行的script。
在中文站點Hexo的根目錄下，建立build.sh，並將權限設定為可執行檔

cmd

nick@Nick-Lin:~/Blog$ chmod 777 build.sh

build.sh的內容為

build.sh

echo "clean en blog..."
cd /home/nick/Blog/blog_en
hexo clean

echo "build en blog..."
hexo g

echo "clean zh-TW blog..."
/home/nick/Blog
hexo clean

echo "build zh-TW blog..."
hexo g

echo "move en blog to public..."
cp -r /home/nick/Blog/blog_en/public/. /home/nick/Blog/public/en/ 

執行此script後，再執行hexo d即完成發布，就可實現多國語系的Blog了。

Reference

Hexo添加多语言支持「国际化i18n」