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“`
    相关的配置,主要是把中文的内容改为英文的,关键是将 language
    设为 en
    ,这样模版就会使用英文的语言项
  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"
},

增加了英文对应的构建、清除和服务器的脚本,中英文相对独立,互不影响
使用 自定义配置
, 将相应脚本的配置设为
“` _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;
}
  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(`<a href="https://www.tuicool.com/articles/Abi6Nrz/${language.href}">${language.label}</a>`)
  1. 根据页面路径前面是否为 /en
    ,确认是博客中文页面还是英文页面
  2. 英文页面增加到对应中文页面的链接菜单,中文则增加英文的链接
  3. 直接将地址中的 cn
    改为 en
    或 en
    改为 cn
    则为对应页面,如果没有对应页面,根据以上的 Nginx 配置,将跳转到对应首页
  4. 利用 jQuery
    的 prepend
    将链接增加到子菜单中,共用类 main-nav-link
    的样式

关于作者

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