Build a multi-lingual blog with Hexo

Introduction

I spent a lot of time recently trying to build a bilingual blog.
Except for programming, I am also enamoured with languages, like English, Japanese. So I’ve been thinking of building a blog with multi-lingual support, making my article reached by more people, and also practicing languages.
After consulting Google master for endless time, here are some feasible way to achieve that:

Use i18n along with revising source code

2. Build two sites, one for Chinese, and another for English

3. Use one of Hexo's themes called 'Minos'

After some research, I’ve made my decision for the third one, because:

Originally I use Next theme. However, unfortunately it doesn't support multi-language, and I do have difficulty revising the source code.

It means I would have to maintain two sites. Once one is revised, the other will need to be done so. and more languages version you have, the more things you will have to do.

So In this article, I will share how to achieve it with Minos

Install Hexo

• install NodeJS, and it will install npm automatically.

  brew install node

• Install Hexo with npm

  npm install hexo-cli -g

• Build whatever required for building a site within a designated directory.

  hexo init folderName

Install minos theme

• Go into the folder

  cd folderName

• Clone it from official GitHub

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

  Start configuring

Configure Hexo config

• After installing, we can only find the file _config.yml.example, so we need to copy or rename it to _config.yml， and then search theme, and then set it to minos
• There are two kinds of config files, one for Hexo, and the other for the theme. Let’s go for Hexo configuration first. Here are some options that must be set, and you could leave others as default

1. language: ['en', 'zh-tw'] //It means set English as default, and Taiwan as the second.

2. url: https://tn710617.github.io/ (Your site address)

3. permalink: :title/

4. deploy:
     type: git
     repo: https://github.com/tn710617/tn710617.github.io.git (It's the clone address of your GitHub project)
     branch: master

• Some settings in config file has nothing to do with language stuff we are taking about, so I will just leave them for your own exploration

Language config for website

• After config file for Hexo, we need to build a language config for our own countries. If there already is, then you will not have to. In this case, I need a Taiwan language config, and there is not, so I will need to make one on my own. The function of this config file is that Hexo will render your page according to the language in this file when certain language is chosen.
  1. Create a file called zh-tw.yml in a folder called languages in minos theme
  2. The content is just like that of other countries as follows:

     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 language mapping file

• After setting up the language config, we copy the theme config file and make another two as follows. The function of those files is that when certain languages is chosen, Hexo will open the page according to the address you designate in those config files. For example, Chinese will open Chinese page, and English will do so too.

1. _config.zh-tw.yml

2. _config.en.yml

• Let’s config ‘en’ config file first.

  // The configuration here depends on your need
  menu:
    Archives: /archives
    Categories: /categories
    Tags: /tags
    Schedule: /schedule
    About: /about
    Friends: /friends

• And then, we config ‘zh-tw’ file as follows:

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

• You may notice that the same configuration overlaps on three config files. Here is the rule. When we go for certain language page, the setting of its config file will be adopted, and if the setting option is not found, the one in theme config file will automatically be adopted. So you could config your setting in a very flexible way.

Config view part

• Now we start config view files. The rule is, except for the source code, how many languages you have, how many duplicates with different languages you will have. It makes sense, right? Otherwise would you dare post an article translated via machine?
• Now let’s config files under source directory
  • _posts
    
    The photo above is easy to understand, right? Simply speaking, those under _posts folder are the ones for default language. In this case, it should store articles of English version. And then we build a zh-tw folder for storing articles with Chinese version.
  • The others:
    
    The file structure is like photo above, it’s unbearably easy, isn’t it?

Change the position of language switch

Personally, when I enter a website, if it shows in some language I don't know, I will look for the language switch (if there is). Per the current version of the theme Ray is using, the default position of the langauge switch menu is at the bottom of the screen, so I would like it to be somewhere more noticeable.

1. In footer.ejs, find the code below:

   <%- partial('common/languages') %>

2. Cut it and paste it in the bottom of the file called navbar.ejs within <body> tag
3. If now you have the page refresh, you should see that the language switch has already been moved to the top of the screen, however, it turns out that the menu open upwards, and therefore we can’t choosee the language options. We will need to make some changes. In languages.ejs file under layout folder, find the following code and add style="top:100%".

<div class="dropdown-menu has-text-left" role="menu" style="top:100%">

Conclusion

By following the configuration above, I believe that you will make your multilingual-support-blog wish come true. You could go to my blog to check how it looks.

If I’ve make some mistakes, feel free to point it out and let me know!
You are free to share this article somewhere else, however, kindly append the origin, thanks!