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!

    Get Facebook long-lived token and never expired token Save and resize images in Laravel

    Comments

    Your browser is out-of-date!

    Update your browser to view this website correctly. Update my browser now

    ×