Hexo Next 8 Language Switch

This blog post provides a solution for switching languages(e.g. Chinese and English) for blogs that use the Hexo framework with the Next theme.

Introduction

Before you start the configuration, please check if this solution is suitable for you~😊

  1. The switch function in this solution will only switch five pages - Home, About, Archives, Tags and Categories - to the corresponding page in the other language. If you switch languages in a blog post, it will jump to the homepage of another language.
  2. The Chinese and English sites are still independent, and use different repositories in GitHub, because I think the two sites can do backups for each other, so that if one crashes, you can quickly recover from the other one’s files.
  3. This solution is applicable to Next8 and requires the same major theme version of the Chinese and English sites.
  4. The language of the Live2D plugin is not translated into English yet.

If there are no issues, you can start configuring it. I will use my own domain name siriusq.top and the new English website repository name en as an example.

Create a GitHub Pages for the English Site’s

  1. Create a new repository named en in GitHub.
  2. Go to the new repository and click Settings.
  3. Go to the Pages option in the sidebar.
  4. In Source, set the branch as the main branch Master or Main.
  5. Click the Choose a theme button, and then choose a theme of your choice.
  6. Once the page is created successfully, you will get a notice saying Your site is published at https://siriusq.top/en/.

创建英文Pages

Local File Configuration

  1. Uncomment #sidebar: source/_data/sidebar.njk in _config.next.yml.
  2. Create a new txt file in the . /source/js/ directory and rename it to switch_language.js.
  3. Create a new txt file in . /source/_data/ directory and rename it to sidebar.njk.

Create the Local Directory for the English Site

Copy and paste the current Chinese blog folder and rename it as you wish, here I’ll take the Chinese folder name cn and the copied English folder name en as an example.

  1. Delete the CNAME file under en/source/ (if there is one).
  2. Open the en/_config.yml file and modify the configuration as follows.
    en/_config.yml
    1
    2
    3
    language: en
    url: https://siriusq.top/en/ # replace siriusq.top/en/ with your own domain name/repository name/
    repo: [email protected]:Siriusq/en.git # replace Siriusq/en with your own username/repository name

Create Language Switch Button

Chinese to English Switch Button

Open cn/_config.next.yml, find menu:, add Switch to English to it, then replace https://siriusq.top/en/ with your English site link.

cn/_config.next.yml
1
2
3
4
5
6
7
menu:
home: / || fa fa-home
about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
Switch to English: https://siriusq.top/en/ || fa fa-language

English to Chinese Switch Button

Open en/_config.next.yml, find menu:, add Switch to Chinese to it, then replace https://siriusq.top with your Chinese site link.

en/_config.next.yml
1
2
3
4
5
6
7
menu:
home: / || fa fa-home
about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
Switch to Chinese: https://siriusq.top || fa fa-language

Switching Code

Chinese Site

  1. Edit the cn/source/js/switch_language.js file created earlier and paste the following code, adjusting it according to your domain name.
    cn/source/js/switch_language.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var _prevOnload = window.onload;

    window.onload = function () {
    var switchLang = document.getElementsByClassName("menu-item menu-item-switch-to-english")[0];
    switchLang.onclick = function () {
    var href = window.location.href;
    var includesKeywords = href.includes("/about/") || href.includes("/tags/")|| href.includes("/categories/") || href.includes("/archives/");
    if (includesKeywords) {
    window.location.href = href.replace('.top/', '.top/en/');
    }
    else {
    window.location.href = "https://siriusq.top/en/";
    }
    if (typeof (_prevOnload) === 'function') {
    _prevOnload();
    }
    return false;
    }
    }
  2. Edit the cn/source/_data/sidebar.njk file created earlier and paste the following code.
    cn/source/_data/sidebar.njk
    1
    <script src="/js/switch_language.js"></script>

英文网站

  1. Edit the en/source/js/switch_language.js file created earlier and paste the following code, adjusting it according to your domain name.
    en/source/js/switch_language.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var _prevOnload = window.onload;

    window.onload = function() {
    var switchLang = document.getElementsByClassName("menu-item menu-item-switch-to-chinese")[0];
    switchLang.onclick = function() {
    var href = window.location.href;
    var includesKeywords = href.includes("/en/about/") || href.includes("/en/tags/")|| href.includes("/en/categories/") || href.includes("/en/archives/");
    if(includesKeywords) {
    window.location.href = href.replace('/en/', '/');
    }
    else {
    window.location.href = "https://siriusq.top";
    }
    if(typeof(_prevOnload) === 'function') {
    _prevOnload();
    }
    return false;
    }
    }
  2. Edit the en/source/_data/sidebar.njk file created earlier and paste the following code.
    en/source/_data/sidebar.njk
    1
    <script src="/en/js/switch_language.js"></script>

Deployment

Use the following command to deploy two websites separately.

1
hexo cl && hexo g -d

Tips

There are still some plugins and pages in the local directory of the English site that require you to manually set the language.

  1. The creative_commons plugin’s language setting in _config.next.yml.
  2. Content of subtitle, description, etc. in _config.next.yml
  3. Font settings.
  4. about page, tags page, categories page, archives page, etc.
  5. Custom 404page.