此文章仅用于记录,根据Akilar大佬的文章整理而成。

新建图标项目

  1. 访问阿里巴巴矢量图标库 , 注册登录。

  2. 搜索自己心仪的图标,然后选择添加入库,加到购物车。

  3. 选择完毕后点击右上角的购物车图标,打开侧栏,选择添加到项目,如果没有项目就新建一个。

  4. 可以通过上方顶栏菜单 -> 资源管理 -> 我的项目,找到之前添加的图标项目。

引入图标

  1. 找到之前新建的图标项目,选择Symbol->查看在线链接,获取 Symbol.js 的在线链接,并引入。

    Butterfly 主题为例,在 [Blogroot]\_config.butterfly.ymlinject 配置项中填入:

    1
    2
    3
    4
        inject:
    head:
    bottom:
    + - <script async src="//at.alicdn.com/t/font_2264842_3izu8i5eoc2.js"></script>

    此处 async 是异步加载属性,能够减少 HTML 阻塞。

  2. 打开 [Blogroot]\themes\butterfly\source\css\custom.css, 输入以下内容:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    svg.icon {
    width: 1em; height: 1em;
    /* width和height定义图标的默认宽度和高度*/
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: 20px;
    /* 控制图标大小*/
    }
  3. 添加外挂标签,在 [Blogroot]\themes\butterfly\scripts\tag\ 目录下新建 iconfont.js,打开 [Blogroot]\themes\butterfly\scripts\tag\iconfont.js, 输入:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    'use strict';

    function iconFont(args) {
    args = args.join(' ').split(',')
    let p0 = args[0]
    let p1 = args[1]?args[1]:1
    return `<svg class="icon" style="width:${p1}em; height:${p1}em" aria-hidden="true"><use xlink:href="#${p0}"></use></svg>`;
    }

    hexo.extend.tag.register('icon',iconFont);
  4. hexo cl && hexo g 以后即可使用外挂标签的形式来写入图标了。

1
{% icon [icon-xxxx],[font-size] %}
  1. icon-xxxx:表示图标 font-class, 可以在自己的阿里矢量图标库项目的 font-class 引用方案内查询并复制。
  2. font-size:表示图标大小,直接填写数字即可,单位为 em。图标大小默认值为 1em

1
2
3
4
{% icon icon-pingjing %}
{% icon icon-pingjing,2 %}
{% icon icon-pingjing,4 %}
{% icon icon-pingjing,6 %}

导航栏图标设置

  1. 修改 [Blogroot]\themes\butterfly\layout\includes\header\menu_item.pug,

    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
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
      if theme.menu
    //- for mobile sidebar
    - let sidebarChildHide = theme.hide_sidebar_menu_child ? 'hide' : ''

    .menus_items
    each value, label in theme.menu
    if typeof value !== 'object'
    .menus_item
    a.site-page(href=url_for(trim(value.split('||')[0])))
    if value.split('||')[1]
    - i.fa-fw(class=trim(value.split('||')[1]))
    + - var icon_value = trim(value.split('||')[1])
    + if icon_value.substring(0,2)=="fa"
    + i.fa-fw(class=icon_value)
    + else if icon_value.substring(0,4)=="icon"
    + svg.icon(aria-hidden="true")
    + use(xlink:href=`#`+ icon_value)
    span=' '+label
    else
    .menus_item
    a.site-page(href='javascript:void(0);')
    if label.split('||')[1]
    - i.fa-fw(class=trim(label.split('||')[1]))
    + - var icon_label = trim(label.split('||')[1])
    + if icon_label.substring(0,2)=="fa"
    + i.fa-fw(class=icon_label)
    + else if icon_label.substring(0,4)=="icon"
    + svg.icon(aria-hidden="true")
    + use(xlink:href=`#`+ icon_label)
    span=' '+ trim(label.split('||')[0])
    i.fas.fa-chevron-down.expand(class=sidebarChildHide)
    ul.menus_item_child
    each val,lab in value
    li
    a.faa-parent.animated-hover.site-page.child(href=url_for(trim(val.split('||')[0])))
    if val.split('||')[1]
    - i.fa-fw(class=trim(val.split('||')[1]))
    + - var icon_val = trim(val.split('||')[1])
    + if icon_val.substring(0,2)=="fa"
    + i.fa-fw(class=icon_val)
    + else if icon_val.substring(0,4)=="icon"
    + svg.icon(aria-hidden="true")
    + use(xlink:href=`#`+ icon_val)
    span=' '+ lab
  2. 此处再提供修改好以后的完整代码便于更新复制

    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
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    if theme.menu
    //- for mobile sidebar
    - let sidebarChildHide = theme.hide_sidebar_menu_child ? 'hide' : ''

    .menus_items
    each value, label in theme.menu
    if typeof value !== 'object'
    .menus_item
    a.site-page(href=url_for(trim(value.split('||')[0])))
    if value.split('||')[1]
    //- i.fa-fw(class=trim(value.split('||')[1]))
    - var icon_value = trim(value.split('||')[1])
    if icon_value.substring(0,2)=="fa"
    i.fa-fw(class=icon_value)
    else if icon_value.substring(0,4)=="icon"
    svg.icon(aria-hidden="true")
    use(xlink:href=`#`+ icon_value)
    span=' '+label
    else
    .menus_item
    a.site-page(href='javascript:void(0);')
    if label.split('||')[1]
    //- i.fa-fw(class=trim(label.split('||')[1]))
    - var icon_label = trim(label.split('||')[1])
    if icon_label.substring(0,2)=="fa"
    i.fa-fw(class=icon_label)
    else if icon_label.substring(0,4)=="icon"
    svg.icon(aria-hidden="true")
    use(xlink:href=`#`+ icon_label)
    span=' '+ trim(label.split('||')[0])
    i.fas.fa-chevron-down.expand(class=sidebarChildHide)
    ul.menus_item_child(style=`left:`+ (-52.5 * Object.keys(value).length + 38.5) + `px;`)
    each val,lab in value
    li
    a.site-page.child(href=url_for(trim(val.split('||')[0])))
    if val.split('||')[1]
    //- i.fa-fw(class=trim(val.split('||')[1]))
    - var icon_val = trim(val.split('||')[1])
    if icon_val.substring(0,2)=="fa"
    i.fa-fw(class=icon_val)
    else if icon_val.substring(0,4)=="icon"
    svg.icon(aria-hidden="true")
    use(xlink:href=`#`+ icon_val)
    span=' '+ lab
  3. 以下是填写示例,在 [Blogroot]\_config.butterfly.yml 中修改。icon-xxx 字样的为iconfontsymbol 引入方案的 id 值,可以在你的iconfont图标库内查询。

    1
    2
    3
    4
    5
    6
    menu:
    主页: https://blog.akilar.top/ || fas fa-tasks
    博客: / || icon-rat
    生活 || icon-tiger :
    相册: /gallery/ || fa fa-camera
    追番: /bangumis/ || icon-snake

Social 卡片彩色图标引入

  1. 重写 [Blogroot]\themes\butterfly\layout\includes\header\social.pug, 替换为以下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    each value, title in theme.social
    a.social-icon(href=url_for(trim(value.split('||')[0])) target="_blank" title=title === undefined ? '' : trim(title))
    if value.split('||')[1]
    - var icon_value = trim(value.split('||')[1])
    if icon_value.substring(0,2)=="fa"
    i.fa-fw(class=icon_value)
    else if icon_value.substring(0,4)=="icon"
    svg.icon(aria-hidden="true")
    use(xlink:href=`#`+ icon_value)
  2. 以下为对应的 social 配置项。写法沿用 menu_item 的写法示例。修改 [Blogroot]\_config.butterfly.ymlsocial 配置项。

    1
    2
    3
    4
    5
    6
    7
    social:
    # iconfont多彩图标
    Github: https://github.com/Akilarlxh || icon-rat
    # fontawesome单色图标
    Email: mailto:Akilarlxh@gmail.com || fas fa-envelope
    # iconfont单色图标
    Bilibili: https://space.bilibili.com/22976782 || fa icon-ox