Butterfly 主题菜单配置

简介: Butterfly 主题菜单配置

开启菜单和配置页面

打开主题配置文件_config.butterfly.yml, 就可以看到被注释掉的菜单


menu:
  # Home: / || fas fa-home
  # Archives: /archives/ || fas fa-archive
  # Tags: /tags/ || fas fa-tags
  # Categories: /categories/ || fas fa-folder-open
  # List||fas fa-list:
  #   Music: /music/ || fas fa-music
  #   Movie: /movies/ || fas fa-video
  # Link: /link/ || fas fa-link
  # About: /about/ || fas fa-heart


取消注释,并将菜单名称改为中文

menu:
   首页: / || fas fa-home
   归档: /archives/ || fas fa-archive
   标签: /tags/ || fas fa-tags
   分类: /categories/ || fas fa-folder-open
   列表||fas fa-list:
     音乐: /music/ || fas fa-music
     电影: /movies/ || fas fa-video
   友链: /link/ || fas fa-link
   关于: /about/ || fas fa-heart


除了首页和归档,其它菜单需要手动创建

source 目录下创建 tagscategoriesmusicmovieslinkabout 这 6 个目录,并在目录下分别创建 index.md 文件

2.png

index.md 文件中,title 值可以自定义,该字符串最终会显示在页面上; type 值为目录名称即可


自定义菜单

如果想添加更多的菜单和页面仿照上面的写法继续在下面添加即可。

设置菜单图标

双竖线 (||) 后面就是菜单的图标,例如首页: / || fas fa-home,这里的 fas fa-home 就是对应的图标

直接复制 fas fa-home 百度搜索进入

3.png


可以看到,图标直接在线引用。在这个网站(The Icons)继续英文单词搜索对应的图标,把代码中 class 属性值复制到配置文件中双竖线后即可,注意空格

4.png


上图就是我的博客菜单设置,多级菜单仿照例子照搬即可

相关文章
|
3天前
WP黑格导航主题BlackCandy
BlackCandy-V2.0全新升级!首推专题区(推荐分类)更多自定义颜色!选择自己喜欢的色系,焕然一新的UI设计,更加扁平和现代化!
8 2
|
13天前
typora主题修改
typora主题修改
|
C# 数据安全/隐私保护
【WPF】右下角弹出自定义通知样式(Notification)——简单教程
原文:【WPF】右下角弹出自定义通知样式(Notification)——简单教程 1.先看效果 2.实现 1.主界面是MainWindow 上面就只摆放一个Button即可。
2882 0
SAP GUI 如何启用黑色主题
SAP GUI 如何启用黑色主题
|
10月前
|
CDN
Butterfly安装文档(三)主题配置-1(三)
Butterfly安装文档(三)主题配置-1(三)
|
10月前
|
前端开发
Butterfly安装文档(三)主题配置-1(一)
Butterfly安装文档(三)主题配置-1
|
10月前
Butterfly安装文档(三)主题配置-1(二)
Butterfly安装文档(三)主题配置-1(二)
|
11月前
Ant Design Pro:项目的标签页标题与左上角项目标题图标如何修改?
Ant Design Pro:项目的标签页标题与左上角项目标题图标如何修改?
201 0
butterfly主题的下载及美化
butterfly主题的下载及美化
170 0
使用hexo在butterfly主题中开启看板娘配置教程(包括模型展示)
使用hexo在butterfly主题中开启看板娘配置教程(包括模型展示)
127 0