侧边栏壁纸
博主头像
小斯小站 博主等级

用心分享技术

  • 累计撰写 36 篇文章
  • 累计创建 73 个标签
  • 累计收到 6 条评论

目 录CONTENT

文章目录

Hexo博客实现多语言

SCH小斯
2024-04-25 / 0 评论 / 0 点赞 / 4 阅读 / 9922 字
温馨提示:
本文最后更新于 2024-05-01,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

简介

在最近的开发中,我对我的多个项目增加了国际化(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目录中有cnen目录,这就说明你已经成功了一大半了,只要进行一些简单的配置就可以了

如果这时候你直接访问,有可能会出现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,等待一会就编译完成了,是不是非常简单。

结尾

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

0

评论区