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

Posted 2020-12-19 chanvin

本文记录了对 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

# 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 中增加以下脚本

  "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 中增加以下配置

  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);前，增加以下内容

  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