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
#Site
相关的配置,把中文内容改为英文的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"
},
增加了英文对应的构建、清除和服务器的脚本,中英文相对独立,互不影响
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 跳转也是一致 3. 以上设置对以 /blog 开头的地址(即未明确语言的地址)进行了判断跳转,如果浏览器默认语言为英文,则跳转到以 /en/blog
开头的英文站,否则默认跳转到以 /cn/blog
开头的中文站 4. 因为 /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 href="https://www.tuicool.com/articles/Abi6Nrz/${language.href}">${language.label}</a>`)
根据页面路径前面是否为 /en ,确认是博客中文页面还是英文页面
英文页面增加到对应中文页面的链接菜单,中文则增加英文的链接
直接将地址中的 cn 改为 en 或 en 改为 cn 则为对应页面,如果没有对应页面,根据以上的 Nginx 配置,将跳转到对应首页
利用 jQuery 的 prepend 将链接增加到子菜单中,共用类 main-nav-link 的样式
关于作者
我是小小,一枚双鱼座的程序猿,我们下期再见~bye
END
「 往期文章 」
10年 | 写了10年的代码,我最怕写Mybatis这些配置,现在有详解了
扫描二维码
获取更多精彩
小明菜市场
来源:网络(侵删)
图片来源:网络(侵删)