LI YAO'S BLOG

有趣的人生, 一半家长里短, 一半山川胡海

Hexo升级Font Awesome,以及使用ICON创建自定义菜单

  1. 查看当前主题中使用的Font Awesome版本_config.yml配置文件
1
2
3
4
5
6
7
vendors:
...
# Internal version: 5.13.0
# fontawesome: //cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css
# fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css
fontawesome:
...

可以看出目前使用的版本是5.13.0,我们去Font Awesome官网下载最新6.3版本(For The Web)

Font Awesome Download

下载完成后将压缩包解压到主题目录下 \themes\next\source\lib\font-awesome覆盖更新,这样就升级成功了。

  1. 使用ICON创建自定义菜单

<1>. 首先需要使用Hexo新建我们的菜单页面, 代码如下:

hexo new page "life" // 新建名为“life”的菜单

创建成功后得到路径:

Created: ...\source\life\index.md

<2>. 在主题_config.yml配置文件中menu节点下新增菜单life

1
2
3
4
5
menu:
home: / || fa fa-home
copywriter: /copywriter/ || fa fa-mug-hot
...
life: /life/ || fa fa-camera

其中key为菜单code,value为 路径/ || ICON图标名称

<3>. 主题语言配置文件中映射菜单Code与中文的关系

...\themes\next\languages\zh-CN.yml

1
2
3
4
5
menu:
home: 首页
copywriter: 文案
...
life: 生活

配置好后,使用hexo g与hexo s命令部署启动查看效果即可

赞赏一杯咖啡