简介

在最近的开发中，我对我的多个项目增加了国际化(i18n)，于是我又想到要对博客进行国际化，我发现hexo官方虽然支持这个功能，但是不能让用户自由切换语言，所以我打算为我的博客制作国际化，并且支持自由切换。这篇教程以中文和英文为例。

说明

在测试环境中，我使用ubuntu22，博客部署了最新版的hexo，主题使用的是stun(不同的主题操作会有所不同)，在博客目录中主要有这些文件

初始目录结构

部分文件未列出，未列出的文件不需要操作

开始操作

思路

我想到的一个方案就是将两个语言分开编译，那么需要将有关的文件和文件夹重命名，我将cn作为中文，en作为英文。

重命名

Windows下重命名

rename config.yml config-cn.yml
rename config.stun.yml config.stun-cn.yml
rename source source-cn
rename themes\stun stun-cn

注意最后一条指令中第二个参数不需要加themes目录，否则会提示语法错误

Linux下重命名

mv config.yml config-cn.yml
mv config.stun.yml config.stun-cn.yml
mv source source-cn
mv themes/stun themes/stun-cn

注意最后一条指令第二个参数要加themes目录，这和Windows完全不一样

复制为英文

Windows下复制

copy config-cn.yml config-en.yml
copy config.stun-cn.yml config.stun-en.yml
xcopy source-cn source-en /E /I
xcopy themes\stun-cn themes\stun-en /E /I

Linux下复制

cp config-cn.yml config-en.yml
cp config.stun-cn.yml config.stun-en.yml
cp -r source-cn source-en
cp -r themes/stun-cn themes/stun-en

修改配置

上面的操作完成之后，你的目录中就包含这些文件：

修改后目录结构

这个时候虽然修改好了目录结构，但是不能直接编译，直接编译会出现一些问题，所以需要修改一下配置文件

首先编辑_config-cn.yml，需要修改一些关键信息

# 基本信息
title: Hexo
subtitle: ''
description: ''
keywords:
author: SCH
language: zh-CN # 这里要注意修改
timezone: ''
# 链接
url: http://example.com/cn  # 注意这里要加后缀
# --- 省略一些内容 ---
# 目录，这里一定要修改
source_dir: source-cn
public_dir: public/cn
# --- 省略一些内容 ---
theme: stun-cn # 这里要注意修改

同理，再编辑_config-en.yml

# 基本信息
title: Hexo
subtitle: ''
description: ''
keywords:
author: SCH
language: en # 这里要注意修改
timezone: ''
# 链接
url: http://example.com/en  # 注意这里要加后缀
# --- 省略一些内容 ---
# 目录，这里一定要修改
source_dir: source-en
public_dir: public/en
# --- 省略一些内容 ---
theme: stun-en # 这里要注意修改

大部分主题有导航栏，导航栏中的链接要注意修改，并且要添加一个语言切换菜单，编辑_config.stun-cn.yml，找到menu:这一段进行修改

menu:
  home: /cn/ || fas fa-home
  archives: /cn/archives/ || fas fa-folder-open
  categories: /cn/categories/ || fas fa-layer-group
  tags: /cn/tags/ || fas fa-tags
  i18n: javascript:; || fas fa-globe # 定义子菜单

submenu:
  i18n: # 这里要和上面一致
    cn: /cn/
    en: /en/

同样在_config.stun-en.yml中也修改这一段，修改完后如果你运行了会发现出现了小问题

语言菜单的小错误

可以看到，语言菜单显示不正常，这是因为我们还没有为这些内容写i18n的翻译，编辑themes/stun-cn/languages/zh- CN.yml，找到menu:，并进行修改

# 导航栏菜单
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  # 添加下面3行内容
  i18n: 语言
  cn: 简体中文
  en: English

编辑themes/stun-en/languages/en.yml，找到menu:，写上同样内容

# 导航栏菜单
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  # 添加下面3行内容
  i18n: Languages
  cn: 简体中文
  en: English

为了更好的国际化和用户体验，建议en.yml中的i18n写成Languages。

到这里基本内容就完成了

编译博客

依次执行这些指令

Windows下编译博客

rd /s /q public
hexo clean
hexo generate --config .config-cn.yml
hexo generate --config .config-en.yml
hexo deploy

Linux下编译博客

rm -rf public
hexo clean
hexo generate --config .config-cn.yml
hexo generate --config .config-en.yml
hexo deploy

执行完之后，博客就编译完成了，什么？你觉得这个指令太麻烦了，那别着急，后面有简单的方法，现在你会发现public目录中有cn和en目录，这就说明你已经成功了一大半了，只要进行一些简单的配置就可以了

如果这时候你直接访问，有可能会出现403，这是因为根目录下没有index.html这个文件，我们要手动创建，同时我们还要实现自动识别用户语言并跳转

在public中创建一个index.html文件，并在里面编写代码

<html>
  <script>
    let lang=navigator.language;
    if(lang.indexOf("en")>=0){
        location.href="/en/"; 
    }else{
        location.href="/cn/";
    }
  </script>
</html>

这时候访问就会自动跳转了，如果你的机器是英文环境，那么会自动跳转到/en/英文页面，中文环境会跳转到/cn/中文页面。

如果你还要做一个404页面，那个同样要写一个分类跳转，在public/目录中创建一个404目录，然后在public/404/目录中创建index.html，并编辑

<html>
  <script>
    let lang=navigator.language;
    if(lang.indexOf("en")>=0){
        location.href="/en/404/"; 
    }else{
        location.href="/cn/404/";
    }
  </script>
</html>

这样就大功告成了

简化编译

首先需要将刚才创建的两个html文件复制到博客根目录下，防止下次编译时丢失

备份HTML

Windows下备份HTML

copy public\index.html index
copy public\404\index.html 404

Linux下备份HTML

cp public/index.html index
cp public/404/index.html 404

编写编译脚本

为了简化编译，可以在package.json中增加一个编译脚本，编辑package.json

Windows下的编译脚本

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "b": "rd /s /q public && hexo clean && hexo generate --config config-cn.yml && hexo generate --config config-en.yml && hexo deploy && md public\404 && copy index public\index.html && copy 404 public\404\index.html",
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "6.3.0"
  },
  "dependencies": {
    "hexo": "^6.3.0",
    "┄": "这里省略一些代码",
    "hexo-server": "^3.0.0"
  }
}

Linux下的编译脚本

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "b": "rm -rf public && hexo clean && hexo generate --config config-cn.yml && hexo generate --config config-en.yml && hexo deploy && mkdir public/404 && cp index public/index.html && cp 404 public/404/index.html",
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "6.3.0"
  },
  "dependencies": {
    "hexo": "^6.3.0",
    "┄": "这里省略一些代码",
    "hexo-server": "^3.0.0"
  }
}

只需要在scripts中添加一项b就可以了，然后执行npm run b，等待一会就编译完成了，是不是非常简单。

结尾

这篇教程到这里就结束了，感谢您的耐心阅读，如果遇到问题可以在下方评论区中留言

目录CONTENT

Hexo博客实现多语言

简介

说明