解决hexo无法使用iconfont阿里图标

2023-12-28 12:22:40

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: 搜索选择想要的图标描述。

S3: 选择想要的样式,点击加入购物车。

S4: 点击页面右上角的购物车图标。

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代码:

码农公寓