Hexo 与 Nginx 实现沉浸式多语言博客

目录
  1. 1. 沉浸式多语言博客
  2. 2. 逐一尝试
    1. 2.1. 官方国际化机制:failed
    2. 2.2. hexo-generator-i18n 插件:failed
    3. 2.3. hexo-multilingual:failed
  3. 3. Nginx 实现代理:bingo
    1. 3.1. 建立两个博客目录
    2. 3.2. Nginx 配置
    3. 3.3. 最终效果
  4. 4. 总结

沉浸式多语言博客

假期的时候,打算改造下现有的博客系统。目标之一是实现多语言(主要是中英)切换,要求:沉浸式阅读

查找了一下,Hexo 有如下几种工具与国际化有关:

逐一尝试

官方国际化机制:failed

更多是在解决模板翻译问题

hexo-generator-i18n 插件:failed

可以通过指定如下参数,对响应的模块,产生多语言文件夹。

1
2
3
i18n:
type: [page, post]
generator: [index, archive, category, tag]

最大的问题,是会在 tag 和 archive 等文件夹中,将多个语言的博客文章混在一起,达不到沉浸式阅读的要求。

hexo-multilingual:failed

通过在将 Hexo blog 的 package.json 中的 dependencies 从:

1
2
3
"hexo-generator-archive": "^0.1.4",
"hexo-generator-category": "^0.1.3",
"hexo-generator-index": "^0.2.0",

替换成:

1
2
3
"hexo-generator-multilingual-archive": "^0.2.0",
"hexo-generator-multilingual-category": "^0.3.2",
"hexo-generator-multilingual-index": "^0.3.1",

实现在生成的页面中,添加当前语言的信息。

通过在source文件夹下添加 _data 文件夹和如下文件:

1
2
3
4
5
6
7
8
9
├── source
│   ├── _data
│   │   ├── config_cn.yml
│   │   ├── config_en.yml
│   │   ├── theme_cn.yml
│   │   └── theme_en.yml
│   ├── _posts
│   │   ├── cn
│   │   └── en

来实现配置的覆盖和区分。

其中 config_xx.yml 中的配置,可以覆盖根目录下 _config 文件的配置,

theme_xx.yml 可以覆盖主题 themes/xxx/_config文件的配置。

这个方案,进行较为整齐的分割,解决了一部分沉浸式阅读的问题,但是有个重要的 Bug,运行

1
hexo serve

能够很好的进行语言之间的隔离,但是运行

1
hexo g

导出的public文件夹里面的文件,有如下问题:

  • 会有一些链接没有添加 lang 信息————死链
  • 配置覆盖也失效————完全搞砸了
  • hexo 的其他插件,都是基于单语言前提的,这意味着,需要同步改造所有的插件,才可以达到完美的效果————维护成本高,oh no!

个人不打算花费很多的在这个事情上面。

Nginx 实现代理:bingo

我的博客是使用 Hexo 生成了静态文件,使用 Nginx 进行代理的。回想起,Nginx 在 vhost 配置中实现根据 location 规则使用不同的alias

总体思路是:

  • 建立两个独立的博客,分别处理中文和英文,以达到真正的隔离处理和沉浸式阅读
  • 使用 Nginx 来实现转向和定位

最后方案如下。

建立两个博客目录

1
2
├── kvh.io.cn
├── kvh.io.en

分别配置中文和英文的博客,这样所有的插件都可以用了,注意 _config文件的配置分别为:

1
2
3
language: 
- cn
root: /cn

1
2
3
language: 
- en
root: /en

然后你就可以愉快的写博客了。

Nginx 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
server {

root /home/changbinhe/kvh.io.cn/public;

location /cn {
alias /www/kvh.io.cn/public;
}

location /en {
alias /www/kvh.io.en/public;
}

error_page 404 = @missing;

location @missing {
rewrite .* / permanent;
}
}

对 Nginx 配置感兴趣的朋友,可以参考一下这里

最终效果

可以看我的博客:http://kvh.io

总结

本文使用了多个 Hexo 博客,加上 Nginx 配置访问路径定位不同的文件目录的方式,实现了完全的隔离处理和沉浸式阅读的多语言博客。

有问题?在文章下留言或者加 qq 群:453503476,希望能帮到你。

本文由 kvh 创作,采用 CC BY 3.0 CN协议 进行许可。 可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
相关文章推荐

No related post.