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


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

相关文章
|
5月前
|
前端开发
typora自定义主题
typora自定义主题
103 2
|
7月前
WP黑格导航主题BlackCandy
BlackCandy-V2.0全新升级!首推专题区(推荐分类)更多自定义颜色!选择自己喜欢的色系,焕然一新的UI设计,更加扁平和现代化!
30 2
|
6月前
|
前端开发
Typora使用技巧3 —— 查看默认主题、新增自定义主题
Typora使用技巧3 —— 查看默认主题、新增自定义主题
220 0
|
7月前
typora主题修改
typora主题修改
|
8月前
|
JavaScript
Vuetify 设置主题
Vuetify 设置主题
120 0
让你的 VSCode 文件图标更好看的10个文件图标主题
一个好用的文件图标主题除了能够愉悦身心之外,对于开发的效率也会有很大的提升,可以帮助我们更快地找到需要的文件,或者发现文件命名中的错误。这篇文章总结了我用过的最棒的 10 个文件图标主题。
2223 0
让你的 VSCode 文件图标更好看的10个文件图标主题
|
前端开发
Butterfly安装文档(三)主题配置-1(一)
Butterfly安装文档(三)主题配置-1
Butterfly安装文档(三)主题配置-1(三)
Butterfly安装文档(三)主题配置-1(三)
Butterfly安装文档(三)主题配置-1(二)
Butterfly安装文档(三)主题配置-1(二)
butterfly主题的下载及美化
butterfly主题的下载及美化
227 0

热门文章

最新文章