Hexo Next 8 双语切换

发表于 更新于 分类于 本文字数： 1.2k 阅读时长 ≈ 5 分钟
关于我终于想起我还有个英文站这件事🐶，离开了DeepL和Grammarly就是一只废狗的我，到现在也没写过几篇英语博客，导致原来很多中文页面切换到英文后都会404，而且一些国内专供的文章也没必要写英文版（嗯绝对不是因为我懒）。另外原来的方案需要中文和英文网站的markdown文件名相同，导致英语博文的URL也全是中文，对老外不友好（虽然也没人看🐶），于是就借着升级版本的机会把这个问题一起解决了。

说明

在开始折腾之前，请确认本方案是否适合你~😊

  1. 本方案对原来Next7版本的双语切换做了些修改，新的切换按钮只会将首页、关于、归档、标签以及目录切换到对应的英文页面，在文章页面中点击切换的话会跳转到另一种语言的首页。如果想要所有页面都能切换的话请见Hexo Next 7.7 双语切换
  2. 本方案中文与英文站仍然是独立的，在GitHub中使用不同的仓库，因为我觉得这样两个站点可以互相做备份，一个崩了的话可以靠另一个的文件快速恢复。
  3. 本方案适用于Next8版本，需要中英文站点大版本相同
  4. 看板娘说的话暂时没有翻译成英文，可能将来有时间会慢慢改，咕咕咕预警🕊️

没问题的话就开始咯。前面的步骤和老方案基本一样。这里以我自己的域名siriusq.top和英文网站仓库名en为例

创建英文Pages

  1. 在 Github 新建一个名为en的仓库
  2. 进入新建的仓库，点击Settings
  3. 进入侧边栏的到Pages选项
  4. 在Source中将分支设为主分支Master或者Main
  5. 点击Choose a theme，然后随便选一个主题，反正后面都要改
  6. 成功建立项目主页后Github Pages选项会显示Your site is published at https://siriusq.top/en/

创建英文Pages

本地文件配置

  1. 取消_config.next.yml中sidebar: source/_data/sidebar.njk前面的注释
  2. 在./source/js/目录下新建文件，重命名为switch_language.js
  3. 在./source/_data/目录下新建sidebar.njk

建立英文网站本地目录

复制现在的中文博客文件夹并重命名，名字随意，这里以中文文件夹名cn和复制出来的英文文件夹名en为例

  1. 删除en/source/下的CNAME文件（如果有的话）
  2. 打开en/_config.yml文件，依次修改配置如下
    en/_config.yml
    1
    2
    3
    language: en
    url: https://siriusq.top/en/ # 用自己的 域名/仓库名/ 替换 siriusq.top/en/
    repo: git@github.com:Siriusq/en.git # 用自己的 用户名/仓库名 替换 Siriusq/en

加入语言切换按钮

中转英

打开cn/_config.next.yml，定位到menu:，加入Switch to English一栏，如下所示，将https://siriusq.top/en/替换为你的英文网站链接

cn/_config.next.yml
1
2
3
4
5
6
7
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  Switch to English: https://siriusq.top/en/ || fa fa-language

英转中

差不多的操作，打开en/_config.next.yml，定位到menu:，加入Switch to Chinese一栏，如下所示，将https://siriusq.top替换为你的中文网站链接

en/_config.next.yml
1
2
3
4
5
6
7
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  Switch to Chinese: https://siriusq.top || fa fa-language

切换代码

两边的操作大同小异

中文网站

  1. 打开前面创建的cn/source/js/switch_language.js文件，粘贴下面的代码，根据自己的域名调整
    cn/source/js/switch_language.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var _prevOnload = window.onload;

    window.onload = function () {
        var switchLang = document.getElementsByClassName("menu-item menu-item-switch-to-english")[0];
        switchLang.onclick = function () {
            var href = window.location.href;
            var includesKeywords = href.includes("/about/") || href.includes("/tags/")|| href.includes("/categories/") || href.includes("/archives/");
            if (includesKeywords) {
                window.location.href = href.replace('.top/', '.top/en/');
            }
            else {
                window.location.href = "https://siriusq.top/en/";
            }
            if (typeof (_prevOnload) === 'function') {
                _prevOnload();
            }
            return false;
        }
    }
  2. 打开前面创建的cn/source/_data/sidebar.njk文件，粘贴下面的代码
    cn/source/_data/sidebar.njk
    1
    <script src="/js/switch_language.js"></script>

英文网站

  1. 打开前面创建的en/source/js/switch_language.js文件，粘贴下面的代码，根据自己的域名调整
    en/source/js/switch_language.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var _prevOnload = window.onload;

    window.onload = function() {
        var switchLang = document.getElementsByClassName("menu-item menu-item-switch-to-chinese")[0];
        switchLang.onclick = function() {
            var href = window.location.href;
            var includesKeywords = href.includes("/en/about/") || href.includes("/en/tags/")|| href.includes("/en/categories/") || href.includes("/en/archives/");
            if(includesKeywords) {
                window.location.href = href.replace('/en/', '/');
            }
            else {
                window.location.href = "https://siriusq.top";
            }
            if(typeof(_prevOnload) === 'function') {
                _prevOnload();
            }
            return false;
        }
    }
  2. 打开前面创建的en/source/_data/sidebar.njk文件，粘贴下面的代码
    en/source/_data/sidebar.njk
    1
    <script src="/en/js/switch_language.js"></script>

部署

分别hexo三连部署两个网站

1
hexo cl && hexo g -d

一点微小的工作

英文网站本地目录还有一些插件和页面需要手动设置语言

  1. _config.next.yml中的creative_commons插件的language: deed.en
  2. _config.next.yml中subtitle、description等的文本
  3. _config.next.yml中的# Font Settings字体设置
  4. about、tags、categories、archives等页面
  5. 404页面