1 前言

外挂标签就是让自己的博客更加美观的一种自定义书写方式。关于外挂标签的说明可参考[官方链接]。本文直接给出一个使用案例。

2 添加阿里图标的使用案例

关于该案例的详细说明可参考：

AkilarIconfont Inject

AkilarDIY外挂标签的简单写法与应用

我这里直接说怎么做。做的步骤有四步：

修改themes/_config.yml文件
添加 js 文件
添加 css 文件
使用该标签

2.1 修改`themes/_config.yml`文件

该文件的主要目的是将自己写的 js 文件和 css 文件链接起来，找到如下内容：

inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css">
  bottom:
    - <script async src="//at.alicdn.com/t/font_2264842_3izu8i5eoc2.js"></script>

上述代码中head下用来添加css，bottom下用来添加 js。

2.2 添加js文件

在/themes/butterfly/scripts/tag/目录下添加icon.js文件，然后在该文件内输入：

'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);

2.3 添加css文件

在themes/butterfly/source/css/目录下新建custom.css文件，再写入：

svg.icon {
   width: 1em; height: 1em;
   /* width和height定义图标的默认宽度和高度*/
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
}

2.4 使用外挂标签

hexo clean && hexo g命令后就可以在博客中写了，示例：

1
2
3

{% icon icon-ox_chou,3 %}{% icon icon-ox,4 %}

{% icon icon-tiger_yin,5 %}{% icon icon-tiger,6 %}

效果如下：

3 关于外链标签的其他说明

为了正常使用外挂标签，需要在博客根目录下打开终端，运行：

1
2
3

npm install hexo-butterfly-tag-plugins-plus --save
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

在/themes/butterfly/_config.yml中添加：

# tag-plugins-plus
# see https://akilar.top/posts/615e2dec/
tag_plugins:
  enable: true # 开关
  priority: 5 #过滤器优先权
  issues: false #issues标签依赖注入开关
  link:
    placeholder: /img/link.png #link_card标签默认的图标图片
  CDN:
    anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
    jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js #issues标签依赖
    issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖
    iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js #参看https://akilar.top/posts/d2ebecef/
    carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
    tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css