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的必要部分都支持多语言。
为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 | navbar: |
我们希望这部分能使用英文单词配置,但在渲染时根据博文的设定显示对应的语言。
我们需要将“直接渲染”修改为“取得翻译后的字符串”,这是通过hexo内置的函数实现的。
具体而言,我们修改主题下的layout/common/navbar.jsx
文件。处理后的name
就是配置中的navbar内容,原来是将其直接作为key来渲染页面的,现在我们通过_p
函数去language\
文件夹中取得翻译后的字符作为key。
1 | // menu[name] = { url, active }; |
例如我们的_config.xxx.yml
是这样的:
1 | navbar: |
在不同语言的页面,navbar也会随之改变。
为Category增加i18n
分类(Categories)和标签(Tags)是管理博客的两个重要的工具。
除了像Navbar一样为Category提供多语言的翻译字符,直接为一个语言建立一个Category或Tag也是可选的方案。
例如Icarus的Tag选择的就是这个方案。在官方文档中,Tag: Icarus User Guide提供“英文的用户指南”,而Tag: Icarus用户指南提供“中文的用户指南”。
我们认为Tag工具具有扁平化的特性,但是
参考文章:
Icarus主题修改(1) - i18n配置