Bilingualism Makes a Blog More Professional

This blog uses butterfly as its theme, which is quite aesthetically pleasing. The official example is also bilingual, but there is no relevant configuration found in the settings. However, I found an official demo that individually configures files for both languages and compiles them twice. Based on this, I have further optimized it for easier deployment.

Bilingual Content

Place bilingual files in the _posts directory under the source directory. The naming convention must be standardized:

  1. Chinese filename: myblog_with_both_zh_en-zh.md
  2. English filename: myblog_with_both_zh_en-en.md
    Differentiation is made based on the suffix, which is also used for subsequent compilation.

"Dual" Themes

  1. Under the themes directory, create a theme named butterfly-en, which is essentially a copy of the butterfly theme.
  2. Prepare two theme configuration files: _config.butterfly-en.yml and _config.butterfly.yml, corresponding to the two themes respectively.
  3. This is done because when generating the index.html page, the top status bar needs to be distinguished in Chinese and English. The content of the top bar in the two files is as follows:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# _config.butterfly.yml
menu:
  Home: / || fas fa-home
  Research: /researchs || fas fa-flask
  Navigation || fa-solid fa-compass:
    Archives: /archives/ || fas fa-archive
    Tags: /tags/ || fas fa-tags
    Categories: /categories/ || fas fa-folder-open
  # List||fas fa-list:
  #   Music: /music/ || fas fa-music
  #   Movies: /movies/ || fas fa-video
  # Link: /link/ || fas fa-link
  # About: /about/ || fas fa-heart
  Language || fas fa-language:
    English: /en/ || fas fa-e
    Chinese: / || fas fa-c
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# _config.butterfly-en.yml
menu:
  Home: / || fas fa-home
  Research: /researchs || fas fa-flask
  Docs || fa-solid fa-compass:
    Archives: /archives/ || fas fa-archive
    Tags: /tags/ || fas fa-tags
    Categories: /categories/ || fas fa-folder-open
  # List||fas fa-list:
  #   Music: /music/ || fas fa-music
  #   Movies: /movies/ || fas fa-video
  # Link: /link/ || fas fa-link
  # About: /about/ || fas fa-heart
  Language || fas fa-language:
    English: /en/ || fas fa-e
    Chinese: /../ || fas fa-c
    # Note here, a static up-level jump is used because the root of the English page is /en/, and only this way can you jump to the upper-level Chinese page

Dual Configuration

  1. In _config.yml, add the following configuration changes:

    1
    2
    3
    4
    5
    6
    language: zh-CN
    root: /
    permalink: posts/:title/
    ignore:
      - "**/*-en.md"    # Ignore English files
    theme: butterfly

  2. In config-en.yml, add the following configuration changes:

    1
    2
    3
    4
    5
    6
    7
    language: en
    root: /en/
    permalink: posts/:title/
    public_dir: public/en   # Directly generate output to the position, saving the subsequent move
    ignore:
      - "**/*-zh.md"    # Ignore Chinese files
    theme: butterfly-en

Compilation

When compiling, you need to switch between config-en.yml and _config.yml and compile twice.
Integrated script:

1
2
3
4
hexo clean
hexo gen
hexo gen --config config-en.yml
hexo depl