微信号:mobdev

介绍:分享 kvh 对于技术、创业的理解和实践

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

2016-06-16 08:27 kvh

沉浸式多语言博客

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

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

  • Hexo 官方的国际化机制

  • Hexo 官方推荐的插件:hexo-generator-i18n

  • 非官方推荐的插件:hexo-multilingual

逐一尝试

官方国际化机制:failed

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

hexo-generator-i18n 插件:failed

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

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

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

hexo-multilingual:failed

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

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

替换成:

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

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

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

├── 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,运行

hexo serve

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

hexo g

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

  • 会有一些链接没有添加 lang 信息————死链

  • 配置覆盖也失效————完全搞砸了

  • hexo 的其他插件,都是基于单语言前提的,这意味着,需要同步改造所有的插件,才可以达到完美的效果————维护成本高,oh no!

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

Nginx 实现代理:bingo

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

总体思路是:

  • 建立两个独立的博客,分别处理中文和英文,以达到真正的隔离处理和沉浸式阅读

  • 使用 Nginx 来实现转向和定位

最后方案如下。

建立两个博客目录

├── kvh.io.cn
├── kvh.io.en

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

language: 
- cn
root: /cn

language: 
- en
root: /en

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

Nginx 配置

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 配置访问路径定位不同的文件目录的方式,实现了完全的隔离处理和沉浸式阅读的多语言博客。

 
KVH 更多文章 Android开发如何选择测试机列表 面向开发者服务的用户体验 拥抱 Android Studio 一从 ADT 到 Android Studio 拥抱 Android Studio 之二:Android Studio 与 Gradle 深入 拥抱 Android Studio 之三:溯源,Groovy 与 Gradle 基础
猜您喜欢 关于Scroller的使用以及自己实现一个侧滑菜单 Java设计模式(一) 简单工厂模式不简单 每一个程序员需要了解的10个Linux命令 【周末放松】我到底该不该去初创公司上班? 测试计划(策略)