厉害了 | 一秒切换Hexo中英文，厉害了！！

Hi ! 我是小小，今天是本周的第二篇，本篇将会着重讲解关于如何切换Hexo中英文

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

1. #Site相关的配置，把中文内容改为英文的

2. URL和 root要设置为独立于中文地址

3. 将英文的 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"
},

增加了英文对应的构建、清除和服务器的脚本，中英文相对独立，互不影响 

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;
}

1. $http_accept_language为 Nginx的 http 模块为请求首部 Accept-Language设置的 内嵌变量 ，如果浏览器的默认语言为英文，其值将以 en 开头，例如 en-US,en;q=0.9

2. rewrite ^(/blog.*) /en$1 redirect;相当于把 /blog 开头的地址前面增加 en，rewrite

的标记设置为 redirect表示 302 跳转，下面默认的 cn 跳转也是一致 3. 以上设置对以 /blog 开头的地址（即未明确语言的地址）进行了判断跳转，如果浏览器默认语言为英文，则跳转到以 /en/blog开头的英文站，否则默认跳转到以 /cn/blog开头的中文站 4. 因为 /cn/blog 对应的是 public 目录下的 index.html，而不是 cn/blog/index.html，所以需要使用alias

，而不是root

1. 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(`${language.label}`)

1. 根据页面路径前面是否为 /en ，确认是博客中文页面还是英文页面

2. 英文页面增加到对应中文页面的链接菜单，中文则增加英文的链接

3. 直接将地址中的 cn 改为 en 或 en 改为 cn 则为对应页面，如果没有对应页面，根据以上的 Nginx 配置，将跳转到对应首页

4. 利用 jQuery 的 prepend 将链接增加到子菜单中，共用类 main-nav-link 的样式

关于作者

我是小小，一枚双鱼座的程序猿，我们下期再见~bye

END

「 往期文章 」

优化 | Excel大批量数据的导入和导出，如何做优化？

10年 | 写了10年的代码，我最怕写Mybatis这些配置，现在有详解了

快速搭建 | 如何快速搭建一个免费的，无限流量的Blog

扫描二维码

获取更多精彩

小明菜市场

来源：网络（侵删）

图片来源：网络（侵删）