早期人类驯服博客主题
前言
回顾我写博客不长的经历：从最早自己租服务器买域名基于 WordPress 搭了个博客，因为懒得维护和水平太差很快就废弃了；再后来用前端三剑客纯手写博客页面，很快因为相同的原因（对了，还得多加一个原因：丑陋）又废弃了；然后转向其他博客平台例如 CSDN 写一些技术博客，除了广告多点还算勉勉强强，反正纯技术博客写完没事我自己都不怎么会去看；之后投向 Github Page 的怀抱，才算是安定下来。刚部署好那阵访问速度还是个问题，现在估计也设了国内服务器，访问速度已经快了很多
前端菜鸟当然还是使用已有的主题最便捷，但是想在前辈们写好的主题下做一些 DIY 可是不太容易。昨天又因为想自己加点东西而被困扰许久，想着开一篇博文记录我和博客主题斗智斗勇的“爱恨情仇”吧
Chic
Chic 是我用过的第一个主题，也一直用到现在（2021-07-25留）
Chic 让我深刻感受到前端设计师的审美能力和技术水平，这主题简约但又不至于简陋，该有的功能基本都有，我相当满意！
加新的iconfont
在配置文件 _config.yml 中可以选择在首页展示的链接图标：Twitter、QQ、微博啥的，只要在配置文件中取消对应行上的注释并加链接就行
1 | |
注释里说不要修改链接的关键字。但我想把 lofter 的图标加在首页上，这在预设里是没有的。作为一个强迫症我一定得把新图标加上！于是乎开始折腾
从已知世界出发
在首页源码里看到图标用 unicode 表示了，想着图标应该是在什么 fonts 之类的文件夹里。在主题文件夹下搜索之后发现了 iconfont 文件夹，这事有门儿！
文件夹下有 .js .css .svg 还有一堆字体文件 .ttf .woff .woff2 .eot
打开.js .css .svg 发现预设的图标里面都有相应内容，于是依葫芦画瓢都在后面添上一份 lofter 版的（ps：我用的 lofter 图标来自阿里巴巴矢量图标库）
重新生成、重新启动服务！果不其然失败了 …… 本来应该显示 lofter 图标的位置空无一物
探索字体的世界
我能看懂的部分都改了，所以这肯定是那些字体文件搞得鬼！可是我以前从来没有编辑过字体文件，先去找找工具：发现了一个超好用的轻量级在线字体编辑器 FontEditor
这可是个好东西，帮我看清了那些 .ttf .woff .woff2 .eot 的内部构造
简单看了看文档，把 lofter 图标编入字体文件中，然后生成、下载、替换
重新生成、重新启动服务！果不其然又失败了 …… 本来应该显示 lofter 图标的位置空无一物
这下可给我整不会了，怎么我都换字体文件了还一点变化没有？？？
开始瞎搞
我开始这里看看、那里改改，然后观察有没有发生变化（原始人类实锤！不过我还是有做备份的，不要莽）在 demo.css 里我修改了字体文件路径，然后 demo 页面可以正常显示 lofter 图标了！然而相同的操作并没有在实际页面中生效，我想我可能得放弃了……
福至心灵
要不怎么说强迫症呢，能轻易妥协都不能说是强迫症。在干了点别的事儿之后我又来折腾这个图标了。这回我大胆假设、小心求证、控制变量、逐步逼近真相。终于让我发现只要我改动 iconfont.css 里 .woff2 的 url 指向，页面图标就会全部消失，看来最终起作用的字体文件应该就是它
在搜索了这一行引入的含义之后，我发现 base64 后面的那串超长乱码就是 .woff2 文件编码所得。由于手头的机子没有 base64 编码工具，就找了个转码工具 Woff2Base
替换编码之后 lofter 图标果然成功显示了！但是看上去比别的图标大了一点。想到设置显示的大小都是一样的，估计问题出在图标本身。再用 FontEditor 对图标重新缩放一下好了。用了和 Github 图标一样的尺寸，强迫症表示这下终于舒服了！