Hexo Next 7.7 Bilingual Switching

Posted on Edited on In Word count in article: 1.3k Reading time ≈ 5 mins.
One year ago, through frantic searching and experimentation on Google, I managed to implement bilingual switching (between Chinese and English) on the 7.1 version of the Next theme. However, it came with numerous bugs (such as switching to the English interface and then clicking on tags like "About" or "Archives" would redirect back to the Chinese interface). Given my procrastination tendencies and advanced laziness, I never got around to fixing it. Recently, I took the opportunity during an upgrade of the Next theme to address this issue. After two days of tinkering, I finally succeeded in achieving the desired bilingual switching effect, even to the extent that it distracted me from my undergraduate thesis project.

This post was translated from my Chinese blog post with the aid of ChatGpt.

Time Reminder

This article was written in March 2020! Please be aware of its age, as some of the content may have become outdated! For the latest solutions, please check out Hexo Next 8 Bilingual Switching.

Principle

My initial idea was to create a new repository on GitHub and then enable GitHub Pages for that repository to use it as an English website. This way, the Chinese and English websites could exist independently without interfering with each other, and I would only need to add a toggle button to both websites. However, upon further investigation, I discovered that each GitHub account can only have one personal homepage. This presented a dilemma. Did I need to register another account just for the English website? That seemed overly complicated. Just when I was feeling stuck, I came across an article by chitanda titled Issues Related to Adding Multiple GitHub Pages Under a Single GitHub Account.

According to the official documentation, GitHub Pages can be classified into two types: User/Organization Pages and Project Pages. There are a few key differences between them (for the purposes of this article, we’ll refer to user and organization pages as user pages):

  • User pages must have the same name as the user’s GitHub account. So, each user can have only one repository as their user page, and it must be in the format/.github.io. In contrast, project pages don’t have this restriction, and you can have an arbitrary number of them.
  • Without considering custom domains, the GitHub subdomain for user pages is.github.io, whereas project pages use.github.io/. There is no..github.io format.
  • User pages display content from the master branch, while project pages use content from the gh-pages branch.

With this information, if I create a new repository on GitHub and deploy the English website using the project pages method, the Chinese and English websites should still remain independent of each other. The English website’s domain format would be ChineseDomain/RepositoryName/, and I wouldn’t need to separately configure a new domain. It sounds promising, so let’s give it a try.

Steps

Here, I’ll use my own domain name siriusq.top and the English website repository name en as an example.

Create a Project Page

  • Create a new repository named en on GitHub.
  • Go to the newly created repository and click on Settings.
  • Scroll down to the Pages section.
  • Click on Choose a theme, and then select any theme.
  • After successfully creating the project page, the Pages section will display Your site is published at https://siriusq.top/en/.
  • With this, the project page for the English website is successfully created.

Set Up the Local English Website Directory

Copy the current Chinese blog folder and rename it as desired. Here, I’ll use my own Chinese folder name Hexo and the duplicated English folder name Hexoen as an example.

  • Open the ./Hexoen/_config.yml file and update the configurations as follows:
    1
    2
    3
    4
    language: en
    url: https://siriusq.top/en/ # Replace siriusq.top/en/ with your own domain/repository name/
    root: /en/ # Replace en with your own repository name
    repo: git@github.com:Siriusq/en.git # Replace Siriusq/en with your own username/repository name
  • Delete the CNAME file (if it exists) under ./Hexoen/source.

Add the Chinese Switch Button

  • Open the ./Hexoen/source/_data/next.yml file.
    • Under Menu Settings, add switch_lang to menu: as follows:
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      menu:
      home: / || home
      about: /about/ || user
      tags: /tags/ || tags
      categories: /categories/ || th
      archives: /archives/ || archive
      switch_lang: https://siriusq.top || language # Replace siriusq.top with your Chinese website domain
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat
  • Open the ./Hexoen/themes/next/languages/en.yml file.
    • Under Menu Settings, add switch_lang: 简体中文 to menu: as follows:
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      menu:
      home: Home
      archives: Archives
      categories: Categories
      tags: Tags
      about: About
      switch_lang: 简体中文
      search: Search
      schedule: Schedule
      sitemap: Sitemap
      commonweal: Commonweal 404

Add the English Switch Button

  • Open the ./Hexo/source/_data/next.yml file.
    • Under Menu Settings, add switch_lang to menu: as follows:
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      menu:
      home: / || home
      about: /about/ || user
      tags: /tags/ || tags
      categories: /categories/ || th
      archives: /archives/ || archive
      switch_lang: https://siriusq.top/en/ || language # Replace siriusq.top/en/ with your English website domain
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat
  • Open the ./Hexoen/themes/next/languages/en.yml file.
    • Under Menu Settings, add switch_lang: 简体中文 to menu: as follows:
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      menu:
      home: 首页
      archives: 归档
      categories: 分类
      tags: 标签
      about: 关于
      switch_lang: English
      search: 搜索
      schedule: 日程表
      sitemap: 站点地图
      commonweal: 公益 404

Add Switching Conditions

Chinese Website
Open ./Hexo/themes/next/layout/_partials/head/head-unique.swig and paste the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
  // Wait for the page to load first
  var _prevOnload = window.onload;
  window.onload = function() {
      var switchLang = document.getElementsByClassName("menu-item menu-item-switch_lang")[0];
      switchLang.onclick = function() {
          var href = window.location.href;
          var indexOfEn = href.toLowerCase().indexOf('/en/');
          if(indexOfEn !== -1) {
              window.location.href = href.replace('/en/', '/');
          }
          else {
              window.location.href = href.replace(/(^http[s]?:\/\/[a-z0-9.]*[:?0-9]*\/)(.*)/i, '$1en/$2');
          }
          if(typeof(_prevOnload) === 'function') {
              _prevOnload();
          }
          return false;
      }
  }
</script>j

English Website
Open ./Hexoen/themes/next/layout/_partials/head/head-unique.swig and paste the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
  // Wait for the page to load first
  var _prevOnload = window.onload;
  window.onload = function() {
      var switchLang = document.getElementsByClassName("menu-item menu-item-switch_lang")[0];
      switchLang.onclick = function() {
          var href = window.location.href;
          var indexOfEn = href.toLowerCase().indexOf('/en/');
          if(indexOfEn !== -1) {
              window.location.href = href.replace('/en/', '/');
          }
          else {
              window.location.href = href.replace(/(^http[s]?:\/\/[a-z0-9.]*[:?0-9]*\/)(.*)/i, '$1en/$2');
          }
          if(typeof(_prevOnload) === 'function') {
              _prevOnload();
          }
          return false;
      }
  }
</script>

Deployment

Execute the Hexo triple command in both folders to deploy the website to Github. After a while, you will be able to access it.

1
2
3
hexo cl
hexo g
hexo d

Additional Notes

  • Since the two websites are independent of each other, theoretically, using different themes for both websites is also possible. I only modified the 404 page for the English website.
  • One minor issue: When PJAX is enabled, clicking the switch button before the page is fully loaded may cause a slight delay before the redirection.
  • Another minor issue: Since the websites are completely independent, the pages are fully reloaded when switching, and PJAX does not work.
  • Note: When writing blog posts, keep the Markdown file names consistent between the Chinese and English directories; otherwise, switching may lead to a 404 page.

It indeed takes a lot of time to tinker with these things. My undergraduate thesis hasn’t progressed at all, and I’m feeling quite anxious now. If you have any questions, feel free to leave a comment in the comment section, although I might not be able to respond promptly.

Without further ado, I’m rolling up my sleeves to work on my thesis!

ε=ε=ε=ε=ε=ε=┌(;￣◇￣)┘