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月前
|
前端开发
typora自定义主题
typora自定义主题
85 2
Butterfly安装文档(三)主题配置-1(二)
Butterfly安装文档(三)主题配置-1(二)
Butterfly安装文档(三)主题配置-1(三)
Butterfly安装文档(三)主题配置-1(三)
|
前端开发
Butterfly安装文档(三)主题配置-1(一)
Butterfly安装文档(三)主题配置-1
让你的 VSCode 文件图标更好看的10个文件图标主题
一个好用的文件图标主题除了能够愉悦身心之外,对于开发的效率也会有很大的提升,可以帮助我们更快地找到需要的文件,或者发现文件命名中的错误。这篇文章总结了我用过的最棒的 10 个文件图标主题。
2003 0
让你的 VSCode 文件图标更好看的10个文件图标主题
butterfly主题的下载及美化
butterfly主题的下载及美化
203 0
使用hexo在butterfly主题中开启看板娘配置教程(包括模型展示)
使用hexo在butterfly主题中开启看板娘配置教程(包括模型展示)
181 0
|
前端开发 CDN
ant-design实现主题暗黑主题 和 亮色主题的 切换(实现网站黑白皮肤)
最近在使用vite+react + ant-design 来搭建个人站点,看到网上好多网站都实现了黑白皮肤的切换,并且ant-design帮我们实现了三套主题色,一个默认亮白色,暗黑主题和紧凑主题。于是我也想来弄一弄。最后还是实现了,打包后也是ok的。
ant-design实现主题暗黑主题 和 亮色主题的 切换(实现网站黑白皮肤)
|
编解码
flstudio怎么改主题,如何更改FL Studio21背景图片
FL Studio 21更换嵌入背景,通过自定义背景这个小功能可以让你随意更新FL Studio这款编曲软件的背景,让软件焕然一新。 自定义背景
213 0
flstudio怎么改主题,如何更改FL Studio21背景图片
Typecho-handsome主题如何增加侧边导航栏
handsome主题在使用的过程中导航栏初始时只有首页一个导航页面,本篇文章主要讲解一下应该如何修改源代码增加多个导航栏并且为其设置子导航
283 1
Typecho-handsome主题如何增加侧边导航栏