Hexo Next 7.7 双语切换

一年前通过在Google的疯狂查找和尝试,实现了在7.1版本的Next主题上进行中英双语的切换。但是Bug多多(切换到英文界面后点击关于、归档等标签还会跳转回中文界面),而我本人又是拖延症+懒癌晚期,一直没有尝试修复。最近借着给Next主题升级的机会顺便解决这个问题。折腾了两天,终于成功实现了理想中的中英双语切换效果,搞得毕设都没怎么做。

原理

我最初的想法是:在Github上新建一个仓库,然后开启新仓库的 Github Pages 作为英文网站使用,这样中英文的网站就可以相互独立,互不干扰,只需要在两个网站上添加一个切换按钮就可以了。但是查询后发现每个 Github 账号只能拥有一个个人主页,这就很尴尬了,难不成要再注册一个账号来作为英文网站使用吗?未免太过麻烦。就在我一筹莫展的时候,发现了chitanda大佬的文章单个GitHub帐号下添加多个GitHub Pages的相关问题

根据官方文档,GitHub Pages分为两类:个人/组织主页以及项目主页,两者基本上没啥区别,但是有以下几点不同:(该文场景下个人和组织帐号没什么区别,所以下文为了行文方便将统一用个人主页代指)

  • 个人主页必须要和用户的GitHub帐号同名,所以每个用户有且只能有一个repo作为个人主页,且必须是/.github.io的形式;而项目主页的命名则没有这种限制,且数量有任意多个。
  • 不考虑绑定的自定义域名的前提下,个人主页的GitHub二级域名为.github.io;项目主页的GitHub二级域名为.github.io/,没有..github.io这种方式
  • 个人主页的展示内容以master分支里的文件为准;而项目主页的展示内容以gh-pages分支内的文件为准

这样的话,如果在Github里新建一个仓库,用项目主页的方式来部署英文网站,中英文网站应该还是相互独立的,英文网站的的域名格式是中文域名/仓库名/,也就不用再单独配置新的域名,听起来好像能行?那就试一下吧

步骤

这里以我自己的域名siriusq.top和英文网站仓库名en为例

创建项目主页

  • 在 Github 新建一个名为enRepositories
  • 进入新建的Repositories,点击Settings
  • 下拉到Github Pages选项
  • 点击Choose a theme,然后随便选一个主题
  • 成功建立项目主页和后Github Pages选项会显示Your site is published at https://siriusq.top/en/
  • 至此英文网站的项目主页创建成功

建立本地英文网站目录

复制现在的中文博客文件夹并重命名,名字随意,这里以我自己的中文文件夹名Hexo和复制出来的英文文件夹名Hexoen为例

  • 打开./Hexoen/_config.yml文件,依次修改配置如下
    1
    2
    3
    4
    language: en
    url: https://siriusq.top/en/ # 用自己的 域名/仓库名/ 替换 siriusq.top/en/
    root: /en/ # 用自己的仓库名替换 en
    repo: [email protected]:Siriusq/en.git # 用自己的 用户名/仓库名 替换 Siriusq/en
  • 删除./Hexoen/source下的CNAME文件(如果有的话)

加入中文切换按钮

  • 打开./Hexoen/source/_data/next.yml文件
    • Menu Settings下的menu:中加入switch_lang,样式如下
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      menu:
      home: / || home
      about: /about/ || user
      tags: /tags/ || tags
      categories: /categories/ || th
      archives: /archives/ || archive
      switch_lang: https://siriusq.top || language # 将siriusq.top替换成你的中文网站域名
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat
  • 打开./Hexoen/themes/next/languages/en.yml文件
    • menu:下添加switch_lang: 简体中文,样式如下
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      menu:
      home: Home
      archives: Archives
      categories: Categories
      tags: Tags
      about: About
      switch_lang: 简体中文
      search: Search
      schedule: Schedule
      sitemap: Sitemap
      commonweal: Commonweal 404

加入英文切换按钮

  • 打开./Hexo/source/_data/next.yml文件
    • Menu Settings下的menu:中加入switch_lang,样式如下
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      menu:
      home: / || home
      about: /about/ || user
      tags: /tags/ || tags
      categories: /categories/ || th
      archives: /archives/ || archive
      switch_lang: https://siriusq.top/en/ || language # 将siriusq.top/en/替换成你的英文网站域名
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat
  • 打开./Hexoen/themes/next/languages/en.yml文件
    • menu:下添加switch_lang: 简体中文,样式如下
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      menu:
      home: 首页
      archives: 归档
      categories: 分类
      tags: 标签
      about: 关于
      switch_lang: English
      search: 搜索
      schedule: 日程表
      sitemap: 站点地图
      commonweal: 公益 404

添加切换判断条件

中文网站
打开./Hexo/themes/next/layout/_partials/head/head-unique.swig,在最下方粘贴代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
// Wait for the page to load first
var _prevOnload = window.onload;
window.onload = function() {
var switchLang = document.getElementsByClassName("menu-item menu-item-switch_lang")[0];
switchLang.onclick = function() {
var href = window.location.href;
var indexOfEn = href.toLowerCase().indexOf('/en/');
if(indexOfEn !== -1) {
window.location.href = href.replace('/en/', '/');
}
else {
window.location.href = href.replace(/(^http[s]?:\/\/[a-z0-9.]*[:?0-9]*\/)(.*)/i, '$1en/$2');
}
if(typeof(_prevOnload) === 'function') {
_prevOnload();
}
return false;
}
}
</script>j

英文网站
打开./Hexoen/themes/next/layout/_partials/head/head-unique.swig,在最下方粘贴代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
// Wait for the page to load first
var _prevOnload = window.onload;
window.onload = function() {
var switchLang = document.getElementsByClassName("menu-item menu-item-switch_lang")[0];
switchLang.onclick = function() {
var href = window.location.href;
var indexOfEn = href.toLowerCase().indexOf('/en/');
if(indexOfEn !== -1) {
window.location.href = href.replace('/en/', '/');
}
else {
window.location.href = href.replace(/(^http[s]?:\/\/[a-z0-9.]*[:?0-9]*\/)(.*)/i, '$1en/$2');
}
if(typeof(_prevOnload) === 'function') {
_prevOnload();
}
return false;
}
}
</script>

部署

分别在两个文件夹执行hexo三连操作,将网站部署到Github,过一会就能访问了

1
2
3
hexo cl
hexo g
hexo d

补充

  • 由于两个网站是相互独立的,所以给两个网站用不同的主题在理论上也是可行的,我只给英文网站修改了下404页面
  • 一点瑕疵:开启PJAX的话,在页面完全加载之前点击切换按钮的话会卡一下才跳转
  • 二点瑕疵:网站相互独立,所以跳转的时候网页是完全重新加载的,PJAX无效
  • 注意事项:写博客的时候,中英文目录下的markdown文件名请保持一致,否则切换的时候会跳转到404页面

折腾这些东西真的太费时间了,毕设一点没动,现在很慌张。有问题欢迎评论区留言,最近可能回复不及时。

不多说了,我要滚去做毕设了

ε=ε=ε=ε=ε=ε=┌(; ̄◇ ̄)┘