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


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

相关文章
|
7月前
WP黑格导航主题BlackCandy
BlackCandy-V2.0全新升级!首推专题区(推荐分类)更多自定义颜色!选择自己喜欢的色系,焕然一新的UI设计,更加扁平和现代化!
30 2
|
前端开发
Butterfly安装文档(三)主题配置-1(一)
Butterfly安装文档(三)主题配置-1
Butterfly安装文档(三)主题配置-1(二)
Butterfly安装文档(三)主题配置-1(二)
Butterfly安装文档(三)主题配置-1(三)
Butterfly安装文档(三)主题配置-1(三)
CTK框架 - 将菜单按钮写到插件中
之前我们在的两个插件Core和About,在Core和About中加入了界面,并且Core中插入了一个菜单,点击之后弹出About界面。 我们现在来用之前的知识把菜单改成注册的,并且点击之后弹出About界面。 我这里的思路是使用事件或者是在Core中加注册的服务来注册菜单。之后点击菜单的时候发送事件。
126 0
Ant Design Pro:项目的标签页标题与左上角项目标题图标如何修改?
Ant Design Pro:项目的标签页标题与左上角项目标题图标如何修改?
334 0
butterfly主题的下载及美化
butterfly主题的下载及美化
227 0
|
前端开发
【Butterfly美化】Hexo Butterfly主题使用阿里巴巴iconfont
Butterfly主题支持 font-awesome v6 但是还是不够用怎么办呢?可以使用阿里巴巴iconfont来拓展啦,今天教大家在Hexo中使用阿里巴巴iconfont矢量图标库。
588 0
|
开发框架 前端开发 开发者
29_Bootstrap 组件_路径导航,标签,徽章 | 学习笔记
快速学习 29_Bootstrap 组件_路径导航,标签,徽章