Icarus主题修改(1) - i18n配置

为Blog的主题布局增加i18n功能。

AI导读:本文讨论了为Icarus主题博客增加国际化(i18n)功能的必要性和实现方法。尽管Icarus主题已支持一定程度的多语言配置,但存在只能为“布局”指定一种语言的问题。为了让博客的主要部分具备多语言支持,作者提出对导航栏和分类标签进行改进。具体地,通过修改navbar.jsx文件,利用Hexo内置函数获取翻译后的字符串,从而实现不同语言页面显示相应语言的导航。同时,分类和标签也可以选择使用翻译字符或单独建立对应语言的分类方案。这一系列改进旨在提升用户体验,使博客内容在多语言环境下更加友好。

前言

Icarus主题包含部分i18n的配置:

常见问题 - Icarus 如何更改我的站点的语言?

打开站点根目录下的站点配置文件_config.yml,修改如下设置:

1
2
3
4
_config.yml

- language: en
+ language: <语言名>

你可以在<icarus_directory>/languages目录下找到所有可用的翻译。 <语言名>为不带后缀名的翻译文件名。

Icarus提供的i18n存在一个问题,只能为博客的“布局”指定一个语言。

例如下图Icarus提供的预览网站的主语言是英文,虽然当前页面的语言是中文,但红色框出的主题布局页面只能是配置的语言。

本文的目的是让整个blog的必要部分都支持多语言。

Overview of English Navbar

为Navbar增加i18n

最终修改的代码可以在github提交的commit中查看:add i18n for navbar · jankiny/hexo-theme-solon@b6a11c8 (github.com)

Icarus的Navbar是如何渲染的呢? 原先的Icarus将_config.xxx.yml中menu的内容直接渲染出来。如果网站只有一个语言,例如中文,那么可以直接在这部分使用中文配置即可,例如hexo-theme-amazing提供的食用说明:

1
2
3
4
5
6
7
8
9
10
11
12
13
navbar:
# Naviagtion menu items
menu:
首页: /
归档: /archives
分类: /categories
标签: /tags
影音: /media
相册: /album
友链: /friend
碎碎念: /self-talking
留言: /message
关于: /about

我们希望这部分能使用英文单词配置,但在渲染时根据博文的设定显示对应的语言。

我们需要将“直接渲染”修改为“取得翻译后的字符串”,这是通过hexo内置的函数实现的。

具体而言,我们修改主题下的layout/common/navbar.jsx文件。处理后的name就是配置中的navbar内容,原来是将其直接作为key来渲染页面的,现在我们通过_p函数去language\文件夹中取得翻译后的字符作为key。

1
2
3
4
// menu[name] = { url, active };

// navbar i18n
menu[_p('common.' + name, Infinity)] = { url, active };

例如我们的_config.xxx.yml是这样的:

1
2
3
4
5
6
7
8
9
navbar:
# Navigation menu items
menu:
home: /
archive: /archives
category: /categories
tag: /tags
music: /music
about: /about

在不同语言的页面,navbar也会随之改变。

英文博文page

中文博文page

为Category增加i18n

分类(Categories)和标签(Tags)是管理博客的两个重要的工具。

除了像Navbar一样为Category提供多语言的翻译字符,直接为一个语言建立一个Category或Tag也是可选的方案。

例如Icarus的Tag选择的就是这个方案。在官方文档中,Tag: Icarus User Guide提供“英文的用户指南”,而Tag: Icarus用户指南提供“中文的用户指南”。

Icarus标签

我们认为Tag工具具有扁平化的特性,但是

参考文章:

国际化(i18n) | Hexo

常见问题 - Icarus

作者

Janki

发布于

2024-02-27

更新于

2024-10-12

许可协议

评论