前言

Butterfly 主题提供的图标在视觉上稍微有点平淡,我们可以在博客上引入我们喜欢的多彩图标。
这里我们引入了 阿里矢量图标库,请确保你已经完成了前置教程:

顶部菜单 Menu 图标

修改配置文件 [Blogroot]\themes\butterfly\_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
menu:
博客: / || iconfont cyan-a-guoshushuzhiwu
时间轴: /archives/ || iconfont cyan-a-caozhiwu
归档|| iconfont cyan-a-huahuaduozhiwu:
标签: /tags/ || iconfont cyan-a-meiguihuahuahuaduozhiwu
分类: /categories/ || iconfont cyan-a-shuiguoguoshi
生活|| iconfont cyan-a-huahuaduopenzaizhiwu:
似水年华: /photoAlbum/ || iconfont cyan-songguo
影视匆匆: /movies/ || iconfont cyan-a-huahuaduo
闲言碎语: /beepPoints/ || iconfont cyan-zhalan
读书拾贝: /books/ || iconfont cyan-mogu
社交|| iconfont cyan-a-yezishuyezhiwu:
友人帐: /link/ || iconfont cyan-a-xianrenzhangzhiwu
留言板: /guestbook/ || iconfont cyan-a-meiguihuahuazhiwu
关于我: /about/ || iconfont cyan-meiguihua

侧边栏 Social 卡片社交图标

修改配置文件 [Blogroot]\themes\butterfly\_config.yml

1
2
3
4
5
6
social:
iconfont cyan-QQ: http://wpa.qq.com/msgrd?v=3&uin=843348394&site=qq&menu=yes || QQ
iconfont cyan-weixin: https://cyan-blog.oss-cn-shenzhen.aliyuncs.com/global/wechat.jpeg || WeChat
iconfont cyan-GitHub: https://github.com/Cyan-Xmw || Github
iconfont cyan-valentine_-email-love-message-send: mailto:843348394@qq.com || Email
iconfont cyan-a-3Dfeixianditu: https://www.xmwpro.com/sitemap.xml || SiteMap

图标 Hover 悬停动态效果

  1. 悬停效果是基于项目 font-awesome-animation 实现的
  1. 菜单添加类名
    修改文件 [Blogroot]\themes/butterfly/layout/includes/header/menu_item.pug
  • 菜单父级添加类名:faa-parentanimated-hover
  • 当前元素添加类名: fw.faa,tada.fa
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    if theme.menu
    .menus_items
    each value, label in theme.menu
    if typeof value !== 'object'
    .menus_item
    - const valueArray = value.split('||')
    + a.site-page.faa-parent.animated-hover(href=url_for(trim(valueArray[0])))
    if valueArray[1]
    + i.fa-fw.faa-tada.fa(class=trim(valueArray[1]))
    span=' '+label
    else
    .menus_item
    - const labelArray = label.split('||')
    - const hideClass = labelArray[2] && trim(labelArray[2]) === 'hide' ? 'hide' : ''
    + a.site-page.group.faa-parent.animated-hover(class=`${hideClass}` href='javascript:void(0);')
    if labelArray[1]
    + i.fa-fw.faa-tada.fa(class=trim(labelArray[1]))
    span=' '+ trim(labelArray[0])
    i.fas.fa-chevron-down
    ul.menus_item_child
    each val,lab in value
    - const valArray = val.split('||')
    li
    + a.site-page.child.faa-parent.animated-hover(href=url_for(trim(valArray[0])))
    if valArray[1]
    + i.fa-fw.faa-tada.fa(class=trim(valArray[1]))
    span=' '+ lab
  1. 可能出现的 BUG

    npm 引入依赖,添加类名后,鼠标悬停效果不生效,不知为何,后来用 CDN 引入的方式才生效