0%

Hexo的next主题实现双语功能

Hexo的next主题实现双语功能

前言

前不久,给博客添加了Google Analytics,通过数据显示,发现我这小破站寥寥无几的流量大部分竟然是国外朋友贡献的,心中便想着将博客国际化—-搞个英文版本.说干就干,经过我的一番折腾,终于给搞出来了,但我要说明一下文章的内容是要自己转换为英文,具体效果大家可以点击下面链接前往查看

英文版本

诉求

首先说说我对英文网站的诉求:

  1. 英文网站要与原网站的结构外观基本保持一致(我看到有的小伙伴直接换支持双语的主题了,我可不想让自己的心血白流)
  2. 我希望原网站和英文网站有个切换按钮,很容易切换

步骤

基本配置

在hexo本地目录创建英文文件夹(名字自定义),我的是en

复制hexo目录的内容(node_modules除外)到en文件夹,复制后en文件夹如下

安装相关插件,在en文件夹使用命令

npm install

修改en文件夹中_config.yml文件,将下图中的language改为en,可以比对着hexo本地目录的_config.yml文件将中文改为相应的英文(如下图的title,subtitle等)

修改hexo目录next主题配置文件_config.yml文件,找到menu字段,增添language菜单,注意链接要换成自己的

language: https://en.idefun.com/ || fa fa-language

修改next主题文件夹下的languages中的zh-CN.yml,找到menu,添加language:English

可以在hexo目录使用hexo s查看效果

同理,修改en文件夹中next主题配置文件_config.yml文件,找到menu字段,增添中文菜单

中文: https://www.idefun.com/ || fa fa-language

修改en文件夹下themes中next主题文件夹下的languages中的en.yml,找到menu,添加language:中文

可以在en目录使用hexo s查看效果

部署配置

下面提供两种部署方法,第一种不用再创建仓库,第二种要再创建仓库,若想要给英文博客绑定域名建议选择第二种,关于创建仓库及打开github page就不多说了

方法一

原理

在en文件夹生成英文博客,并将生成的public文件夹中的内容复制到hexo目录下的public文件夹中的en文件夹,推送时只需在hexo目录下推送

实现

使用下面命令即可实现

hexo clean && hexo g && cd en &&  hexo clean && hexo g && cd ../ && cp -r en/public/. public/en/ && hexo d

可以写成shell脚本,我这里提供一份简单的脚本供大家参考

点击下载

下载后改后缀为sh即可双击运行

方法二

原理

在en文件夹生成英文博客,将生成英文博客推送到一个新的仓库,需要分别推送,可以编写相应脚本来简化操作

实现

修改en文件夹在_config.yml文件,找到deploy字段,修改为自己的仓库即可

备注

为大家提供一种思路,希望有帮助

-------------本文结束感谢您的阅读-------------