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

Posted chanvin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

# 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,这样模版就会使用英文的语言项
  • URLroot 要设置为独立于中文对应的地址和目录
  • 将英文的 sourcepublic 目录和中文区分开,就可以确保中、英文版分别只出现中、英文博客文章

增加相关脚本

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 处理,$schemehttphttps,标示为页面跳转,分别跳转到对应博客中、英文首页

页面对应切换

以模版 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 改为 enen 改为 cn 则为对应页面,如果没有对应页面,根据以上的 Nginx 配置,将跳转到对应首页
  • 利用 jQueryprepend 将链接增加到子菜单中,共用类 main-nav-link 的样式

总结

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

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

以上是关于Hexo 博客利用 Nginx 实现中英文切换的主要内容,如果未能解决你的问题,请参考以下文章

Hexo利用nodehexo实现博客后台运行。

利用Travis IC实现Hexo博客自动化部署

腾讯云搭建hexo博客

基于hexo + gitlab + nginx 搭建个人静态博客笔记

为hexo博客添加基于gitment评论功能

开始体验 Hexo 纯静态化博客平台