Menu 添加 Iconfont 多彩图标

前言

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

引入 Iconfont 阿里图标矢量库

/post/3ab4ab8f.html

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

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

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

social:
  iconfont cyan-QQ: http://wpa.qq.com/msgrd?v=3&uin=843348394&site=qq&menu=yes || QQ
  iconfont cyan-weixin: https://cdn.baiwumm.com/wechat/qrcode.jpeg || WeChat
  iconfont cyan-GitHub: https://github.com/baiwumm || Github
  iconfont cyan-valentine_-email-love-message-send: mailto:843348394@qq.com || Email
  iconfont cyan-a-3Dfeixianditu: https://baiwumm.com/sitemap.xml || SiteMap

图标 Hover 悬停动态效果

悬停效果是基于项目 font-awesome-animation 实现的

菜单添加类名
修改文件 [Blogroot]\themes/butterfly/layout/includes/header/menu_item.pug

菜单父级添加类名：faa-parent、animated-hover

当前元素添加类名： fw.faa,tada.fa

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