Hexo Next 7.1 Bilingual Switching
2020 Update: This method has too many bugs and has been abandoned. It only applies to Next theme version 7.1. For a new method, please refer to Hexo Next 7.7 Bilingual Switching.
This post was translated from my Chinese blog post with the aid of ChatGpt.
For those who need an English version of their website, you’ll need to add a bilingual switching feature. Hexo has support for website internationalization, known as i18n. However, it has some limitations, as different language articles are mixed together, making it look messy. To address this, follow the steps below:
Plugin Installation
Install the Hexo internationalization plugin, i18n, by running the following command in your blog’s root directory:
1 | npm install hexo-generator-i18n |
Important Notes
Ensure that the i18n plugin is placed as the last entry in the dependencies section of your root directory’s package.json file. You will need to manually adjust this whenever you install a new plugin because every new plugin installation reorders the plugins alphabetically. The format should look like this, with no comma at the end of the last item:
1 | "dependencies": { |
Modify Configuration File
Open the configuration file _config.yml in your blog’s root directory and make the following changes under the language section:
1 | # language: |
After making these changes, run hexo cl and hexo g to regenerate the public folder. At this point, a new directory /en will be generated to store the English site files. However, different language sites are still mixed together. To separate them properly, you need to add conditional generation rules for different language pages.
Add Generation Conditions
Open .\themes\next\layout\index.swig and add the following code at the end:
1 | {% block content %} |
Now, articles will only be generated if their language matches the page language exactly. Similarly, in files such as tag.swig, category.swig, archive.swig, etc., you can search for and set the post_template.render(post) condition to hide articles in other languages. Here’s an example:
tag
1 | {% for post in page.posts %} |
archive
1 | {% if page.lang === post.lang %} |
category
1 | {% for post in page.posts %} |
Article Writing Format
In the blog post’s front matter, add lang: to differentiate between articles in different languages. For example, use lang: zh-CN for Chinese and lang: en for English, like this:
1 | title: Hexo Bilingual Switching |
Adding Language Switching Button
Open the Next theme configuration file .\themes\next\_config.yml and under Menu:, add switch_lang:, like this:
1 | menu: |
Open the zh-CN.yml and en.yml files under .\themes\next\languages, and add switch_lang: under menu: in both files.
zh-CN
1 | menu: |
en
1 | menu: |
Adding Conditional Statements
At this point, the links are still one-way, meaning you can only navigate to the English page but cannot return to the Chinese page. Therefore, you need to add conditional statements.
In .\themes\next\layout_partials\head\head-unique.swig, add the following code to redirect the language switch button back to the Chinese page after loading the English page:
1 | <script type="text/javascript"> |
As a JavaScript newbie, I struggled with this for a while. document.getElementsByClassName returns an array, and I kept getting errors while debugging. I had to add [0] at the end to get the class name.
Limitations
Although the above method can achieve language switching, when you click on tags, archives, categories, and other links on the English page, it will redirect you to the Chinese page. To switch to the corresponding Chinese page, you need to click the English switch button again on the redirected page. If there are better solutions, please feel free to leave comments in the comment section.
Reference: wm4n