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:
After some research, I’ve made my decision for the third one, because:
So In this article, I will share how to achieve it with Minos
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
Go into the folder
Clone it from official GitHub
- After installing, we can only find the file
_config.yml.example, so we need to
_config.yml， and then search
theme, and then set it to
- 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
language: ['en', 'zh-tw'] //It means set English as default, and Taiwan as the second.
url: https://tn710617.github.io/ (Your site address)
repo: https://github.com/tn710617/tn710617.github.io.git (It's the clone address of your GitHub project)
- 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
- 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.
- Create a file called
zh-tw.ymlin a folder called
languagesin minos theme
- The content is just like that of other countries as follows:
- Create a file called
- 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.
Let’s config ‘en’ config file first.
// The configuration here depends on your need
And then, we config ‘zh-tw’ file as follows:
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.
- 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
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-twfolder for storing articles with Chinese version.
- The others:
The file structure is like photo above, it’s unbearably easy, isn’t it?
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.
footer.ejs, find the code below:
<%- partial('common/languages') %>
Cut it and paste it in the bottom of the file called
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.ejsfile under layout folder, find the following code and add
<div class="dropdown-menu has-text-left" role="menu" style="top:100%">
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!