Hexo Next 7.7 双语切换

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

时效提醒

本文写于2020年3月！请注意时效，部分内容可能已过期！新方案请见Hexo Next 8 双语切换

原理

我最初的想法是：在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 新建一个名为en的Repositories
  • 进入新建的Repositories，点击Settings
  • 下拉到Pages选项
  • 点击Choose a theme，然后随便选一个主题
  • 成功建立项目主页后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: git@github.com: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页面

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

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

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