Hexo 博客利用 Nginx 实现中英文切换

本文记录了对 Hexo 博客进行中英文切换的配置过程，实现同一应用共用模版，任何页面可以切换到另一语言的对应页面，并对未明确语言的访问地址，根据浏览器语言进行自动跳转

实现细则

中英文地址区分

博客中文首页：

https://chanvinxiao.com/cn/blog/

博客英文首页：

https://chanvinxiao.com/en/blog/

中英文切换

例如以下博客中文页面

https://chanvinxiao.com/cn/blog/archives/2020/04/

点击右上角的 English，则切换到以下地址

https://chanvinxiao.com/en/blog/archives/2020/04/

在这个页面点击右上角的中文，则会切换回来

自动跳转

例如以下博客地址

https://chanvinxiao.com/blog/vuejs-tic-tac-toe/

当浏览器语言设置的首选语言为英文时，会跳转到其对应的英文版本

https://chanvinxiao.com/en/blog/vuejs-tic-tac-toe/

当浏览器语言设置的首选语言为中文时，则跳转到其对应的中文版本

https://chanvinxiao.com/cn/blog/vuejs-tic-tac-toe/

Hexo 配置

增加英文配置

在项目根目录下增加 _config-en.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Site
title: TITLE
subtitle: SUBTITLE
description: DESCRIPTION
keywords: KEYWORDS
language: en

# URL
url: https://chanvinxiao.com/en/blog
root: /en/blog/

# Directory
source_dir: source-en
public_dir: public-en
  • #Site 相关的配置，主要是把中文的内容改为英文的，关键是将 language 设为 en，这样模版就会使用英文的语言项
  • URL 和 root 要设置为独立于中文对应的地址和目录
  • 将英文的 source 和 public 目录和中文区分开，就可以确保中、英文版分别只出现中、英文博客文章

增加相关脚本

在 package.json 中增加以下脚本

1
2
3
4
5
6
"scripts": {
  ...
  "build:en": "hexo generate --config _config.yml,_config-en.yml",
  "clean:en": "hexo clean --config _config.yml,_config-en.yml",
  "server:en": "hexo server --config _config.yml,_config-en.yml"
},
  • 增加了英文对应的构建、清除和服务器的脚本，中英文相对独立，互不影响
  • 使用自定义配置, 将相应脚本的配置设为 _config.yml 与 _config-en.yml 的叠加配置
  • 系统会自动生成叠加配置文件 _multiconfig.yml，应将此文件添加至 .gitignore 中

Nginx 配置

在 Nginx 对应的 server 中增加以下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
if ( $http_accept_language ~* ^en ) {
  rewrite ^(/blog.*) /en$1 redirect;
}

rewrite ^(/blog.*) /cn$1 redirect;

location /cn/blog {
  alias /PATH/TO/BLOG/public;
  error_page 404 $scheme://$host/cn/blog;
}

location /en/blog {
  alias /PATH/TO/BLOG/public-en;
  error_page 404 $scheme://$host/en/blog;
}
  • $http_accept_language 为 Nginx 的 http 模块为请求首部 Accept-Language 设置的内嵌变量，如果浏览器的默认语言为英文，其值将以 en 开头，例如 en-US,en;q=0.9
  • rewrite ^(/blog.*) /en$1 redirect; 相当于把 /blog 开头的地址前面增加 /en，rewrite 的标记设置为 redirect 表示 302 跳转，下面默认的 cn 跳转也是一致
  • 以上设置对以 /blog 开头的地址（即未明确语言的地址）进行了判断跳转，如果浏览器默认语言为英文，则跳转到以 /en/blog 开头的英文站，否则默认跳转到以 /cn/blog 开头的中文站
  • 因为 /cn/blog 对应的是 public 目录下的 index.html，而不是 cn/blog/index.html，所以需要使用 alias，而不是 root
  • error_page 设置了 404 处理，$scheme 为 http 或 https，标示为页面跳转，分别跳转到对应博客中、英文首页

页面对应切换

以模版 landscape 为例，在 themes/landscape/source/js/script.js 中的 })(jQuery);前，增加以下内容

1
2
3
4
5
6
7
8
9
10
let language = {};
language.now = location.pathname.match(/^\/en/) ? 'en' : 'cn';
if('en' === language.now){
  language.label = '中文';
  language.href = location.pathname.replace(/^\/en/, '/cn');
}else{
  language.label = 'English';
  language.href = location.pathname.replace(/^\/cn/, '/en');
}
$('#sub-nav').prepend(`<a class="main-nav-link" href="${language.href}">${language.label}</a>`)
  • 根据页面路径前面是否为 /en，确认是博客中文页面还是英文页面
  • 英文页面增加到对应中文页面的链接菜单，中文则增加英文的链接
  • 直接将地址中的 cn 改为 en 或 en 改为 cn 则为对应页面，如果没有对应页面，根据以上的 Nginx 配置，将跳转到对应首页
  • 利用 jQuery 的 prepend 将链接增加到子菜单中，共用类 main-nav-link 的样式

总结

在实现博客中英文过程中，主要使用了以下技术：

  • Hexo 的 自定义配置和 package.json 的 scripts
  • Nginx 的 http 模块的请求首部内嵌变量
  • Nginx 的指令 rewrite, alias 和 error_page
  • location 的 pathname 和 jQuery 的 prepend