Hexo 主题 Maupassant 换图标教程

折腾主题恐怕是搭建独立博客最痛并快乐的事情了。尤其是对我这种前端菜鸟来说,很多东西明明知道对应资源文件在哪里,却愣是不知道从何下手。今天我们说说,如何给 Hexo 主题 maupassant 换上自己喜欢的图标。


使用 Hexo 以来,换过不少主题,不想用太『大众』的,『小众』的却往往文档不全想改也不知道从何下手。寻寻觅觅,总算找到了一个心仪的 —— Maupassant(这里我用的是 tufu9441 个人定制的版本,也有两百多个 star 了,赞)。只因介绍中的一句话:

大道至简

整个博客非常简洁干净,虽然还有一些我觉得不是很满意的地方,不过暂时来说是小问题,我可以一边学一边改。目前来说,整体效果是这样的:

整体效果

接下来就是重点了,不同栏目的的图标(就是技术、生活、作品等)是我一直想定制的,其实文档里也给出了具体的方法和资源地址,可惜我不懂前端,看着也还是不会。隔一段时间总要试一试,屡败屡战,终于没有苦劳也有疲劳,算是弄清楚的怎么换图标。

其实思路也不难,就是先生成对应的图标,然后想办法在网页中显示出来,但是这着实让我摸索了一段时间。

第一步,到 IcoMoon 的网站中,点击右上角的 IcoMoon App,然后就可以来到下面的图标选择页面:

图标选择页面

选择你喜欢的图标,然后点击右边的 Generate Font(我之前就一直以为是左边的 SVG 什么的,所以死活不成功),就会出现一个给你改名字的机会(这也就是对应生成的索引信息)

然后再点击下载,正常情况下就可以了,下载之后就会得到这样一个文件夹:

我们来比较一下 maupassant 主题的结构:

发现了!都有 fonts 这个文件夹!里面的文件还一样,所以二话不说,赶紧复制粘贴过去,然后对应修改主题的配置文件(注意 icon 为前缀的图标名称)

结果发现并没有用,甚至原来可以的都显示不出来了,但是发生了一个奇怪的现象,有一个图标能显示,但是错乱了位置,于是我猜想,肯定是哪里需要索引这些文件。再看看下载得到的 icomoon 文件夹中有一个 style.css,发现里面有这么一段:

下载得到的 style.css

于是一顿搜索,在 maupassant 主题的 style.scss 文件中也找到了类似的行,于是直接把整段复制过去。再部署,就可以看到效果啦!

万万没想到原来这么简单,也要感谢这次尝试失败后的『灵机一动』,也因此找到了正确的用法。最后说一下选择这些图标的原因吧:

  • 首页:小房子的图标,基本是通用惯例了
  • 技术:插电的图标,提醒自己要不断充电
  • 生活:吃豆人的图标,提醒自己生活就是吃一个豆子再吃另一个,有些豆子会给自己不一样的力量
  • 作品:无限的图标,激励自己要不停创造完整的作品
  • 归档:软盘的图标,复古风,有保存的意思,也向上古和中古时代的程序员致敬
  • 订阅:RSS 的图标,也算是惯例了

希望以后能把自己的博客改得越来越好,虽然自己依然在纷繁的前端技术中找不到方向。

捧个钱场?