author: Nathan-niee
tags:
date: 2021-09-09-11:21
1. 前言
突发奇想想更换(添加)一些图标用于一个简单的导航,可是使用网络上的给出的教程Hexo-使用阿里iconfont图标,无论无何都应用不了,图标总是不显示,于是就想着研究一下原理,魔改一下。
框架: hexo
主题: butterfly
2. 分析
hexo的图标的生成其实是经过pug引擎渲染butterfly.yml文件得来的。
默认的格式:
social:
fa fa-xxx: url || title
实例:
social:
fa fa-xxx: https://github.com/xxx || Github
pug渲染代码:
each url, icon in theme.social
a.social-icon(href=url_for(trim(url.split(‘||‘)[0])) target="_blank"
title=url.split(‘||‘)[1] === undefined ? ‘‘ : trim(url.split(‘||‘)[1]))
i(class=icon)
上述实例会被pug渲染成如下:
<a class="social-icon" href="https://github.com/xxx" target="_blank" title="Github">
<i class="fa fa-xxx"></i>
</a>
说明:
pug代码第一个行的url,icon分别的指代:
-
「:」后面的
https://github.com/xxx || Github。url || title这三个构成一个数组(包含三个元素)分别是https://github.com/xxx,||,Github。 -
「:」前面的
fa fa-xxx。这个字符串就是pug中的第一行的
icon也就是第四行的icon。
页面渲染的过程:
yml文件中编写参数 ? pug接收参数 ? 渲染为html代码。
这里参数就是 icon, url
经过上述得知所谓fas fa-xxx只是一个参数,是fontawesome图标的class。如果想使用阿里iconfont只需要改为对一个class就行。其他参数可以不变。
3. 步骤
3.1. 获取iconfont图标
S1: 进入iconfont官网（ 需注册/登录 )。
S2: 搜索选择想要的图标描述。
a
S3: 选择想要的样式,点击加入购物车。
a
S4: 点击页面右上角的购物车图标。
a
S5: 点击【添加至项目】? 新建项目 ? 输入项目名 ? 点击确定。
S6: 点击生成代码。
S7: 点击【预览字体】。
3.2. Hexo中使用
S1: 进入hexo-butterfly的butterfly.yml中,主要添加<script>标签即可。
添加到 inject下的head下:
S2: 在themes\butterfly\source\css\custom.css添加样式代码。
/* icon 通用样式 */
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
s3: 添加所需图标的icon即可。
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
但这里由于是模板所以需要先修改pug模板
进入themes\butterfly\layout\includes\header\social.pug添加如下代码。
(可以直接替换原有代码)
each url, icon in theme.social
a.social-icon(href=url_for(trim(url.split(‘||‘)[0])) target="_blank"
title=url.split(‘||‘)[1] === undefined ? ‘‘ : trim(url.split(‘||‘)[1]))
svg(class="icon" aria-hidden="true")
use(xlink:href=‘#‘ + icon)
??警告??
pug严格注意格式(缩进)
S3: 添加图标和链接。
上述工作是一次性的,后期就不需要的,后面如果想更换/添加图标,只需要进行如下设置:
格式:
social:
[图标名]: [社交url] || [社交网站名称]
实例:
social:
icon-cnblogs: https://www.cnblogs.com/ || 博客园
这里的「图标名」也就是阿里图标的
Symbol方式下的代码。
??注意??
如以后需要添加更多的图标,可以选择到购物车后加入项目,生成新的代码,替换原来的
butterfl.yml中inject下head的<script>标签即可。
3.3. 重新启动hexo服务
效果:
渲染后的html代码: