如何在redefine中启用iconfont图标库

本文章的处理方法是基于Hexo-redefine-theme版本2.8.1修改的。在其他版本中不保证完全生效，请自行测试。

注意事项

本文档参考了 Butterfly 文檔(六) 進階教程 | Butterfly ，本博客不清晰的地方可以看这篇教程。
本文档参考了插入自定义代码 | Hexo Theme Redefine Docs 的功能。
需要修改主题底层文件，可以按照 Hexo主题启用带API解析全局播放器这篇文档重构网站，用于在主题更新时保留自己做的改变。
可以提前备份主题文件，防止修改出现异常。

操作步骤

获取在线链接

注册或登录阿里巴巴矢量图标库（IconFont）。
登录后在资源管理-我的项目中新建项目。
项目信息随便填，自己清楚就好。
接下来我们在iconfont中搜索想要加入的图标，点击 添加入库
此时右上角的购物车图标会有一个红色的角标非常显眼，点击购物车图标，点击添加至项目
回到资源管理-我的项目中，在项目中即可看到我们刚刚添加的图标。请将类型从Unicode切换为Font class然后点击 查看在线链接
第一次生成会没有在线链接，我们需要点击 🔄暂无代码，点击生成
到这里我们就能得到一段类似这个格式的样式引用地址
1
//at.alicdn.com/t/c/font_?_?.css
- ?为通配符，每个人都不一样

插入自定义代码

打开站点下的_config.redefine.yml文件，找到inject部分。默认是这个样子的：

# INJECT >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> start
# Docs: https://redefine-docs.ohevan.com/inject
inject:
  # Whether to enable inject
  enable: false
  # Inject custom head html code
  head: 
    - 
    - 
  # Inject custom footer html code
  footer:
    -
    -
# INJECT <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< end

按照要求，我们需要先启用inject功能，并将在线链接传入head部分

# INJECT >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> start
# Docs: https://redefine-docs.ohevan.com/inject
inject:
  # Whether to enable inject
  enable: true
  # Inject custom head html code
  head: 
    - <link rel="stylesheet" href="//at.alicdn.com/t/c/font_?_?.css">
    - 
  # Inject custom footer html code
  footer:
    -
    -
# INJECT <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< end

不改变类型，将在线链接传到href参数中即可。

修复`social.links`的显示异常问题

由于redefine主题中social.links是由home-banner.ejs文件处理的。他和iconfont提供的在线样式有重叠，造成了两个样式同时发挥着作用出现下图的情况：

/* IconFont在线地址所提供的样式 */
@font-face {
  font-family: "iconfont"; /* Project id ? */
  src: url('//at.alicdn.com/t/c/font_?_?.woff2?t=?') format('woff2'),
       url('//at.alicdn.com/t/c/font_?_?.woff?t=?') format('woff'),
       url('//at.alicdn.com/t/c/font_?_?.ttf?t=?') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-finka:before {
  content: "\e604";
}

.icon-coolapk:before {
  content: "\e7f2";
}

所以我们需要在home-banner.ejs中添加判断逻辑。

找到处理social_links的部分代码，在最后的else（文件第79行）前添加一条else if用于判断是否使用了阿里图标库。

<!-- 次格式可能会引起两种嵌套存在，如icon的css中写了content后可能会存在!important，建议修改 -->
else if(key.includes("icon-")) { %>
	<a target="_blank" href="<%- theme.home_banner.social_links.links[key] %>">
		<span class="social-contact-item <%= key %>">
		</span>
	</a>
<% }

使用方式

在想要使用iconfont图标的位置使用iconfont iconfont-name的格式引用图标即可。如以下例子：

导航栏中的项目

navbar:
  home:
    path: /
    icon: iconfont icon-home

社交链接中的项目

iconfont icon-coolapk: https://www.coolapk.com/u/2949284

文章中的按钮

{% btn regular::翻咔::https://www.finkapp.cn/user/finka-h-I8-wlxOJs::iconfont icon-finka %}

夸夸

这个问题是我滴好对象帮我解决的，本人只是简单记录了处理过程，没有谈到更加原理性的内容。大家可以去看看他的博客~ 捏捏太一の小博客