hexo引入阿里图标库

（记录一下）

  1. 首先在https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a 找到想要的图标，然后点击右上角的购物车，生成图标项目（如果想找到自己以前的图标项目，可以在资源管理-我的项目中查找）
  2. 选择Symbol，生成在线链接，在[Blogroot]\_config.butterfly.yml中的inject配置项中添加：
1
2
3
4
 inject:
      head:
      bottom:
+       - <script async src="//at.alicdn.com/t/font_3174164_no8l0gbvn.js"></script>
  1. 打开[Blogroot]\themes\butterfly\source\css\custom.css（如果没有可以自行创建），添加：
1
2
3
4
5
6
7
svg.icon {
   width: 1em; height: 1em;
   /* width和height定义图标的默认宽度和高度*/
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
}
  1. 添加外挂标签，在[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);
  1. 运行hexo clean和hexo g就可以了
    • 语法：{% icon [icon-xxxx],[font-size] %}
      其中[icon-xxxx]表示图标font-class，[font-size]表示图标大小，单位为em，默认值为1