搭个博客嘛，肯定要加点个人的一些账号。然后呢，我想加个B站的链接，但是在 Anatolo 的模板里没有，这下只能自己动手了。

一些约定的符号

./ 表示 hexo 博客的根目录

<0x00> 分析

我先是在 ./themes/Anatolo/source/images 里找，发现里面只有网站的 icon 和主要图标，没有那些社交媒体的图标
(比如这样的图标，B站的图标原来是没有的)
然后就又去找 ./themes/Anatolo/layout/partial 下面的各种文件，发现有个叫 sidebar.pug 和 social_links.pug 这两个文件。问题来了，.pub 是啥文件啊(之前真没接触过)。百度了以下，这是个排版引擎的语言。行吧，直接在线学习。

然后打开了 sidebar.pug 简单分析下，感觉关系不大。打开 social_links.pug

// social_links.pug
ul.social-links
    if theme.github
        li
            a(href= theme.github)
                i.fa.fa-github
    if theme.mail
        li
            //- a(href= "javascript:alert(\"" + theme.mail +"\")" )
            a(href= "mailto:" + theme.mail )
                i.fa.fa-envelope
    if theme.QQ
        li
            a(href= "http://sighttp.qq.com/authd?IDKEY=" + theme.QQ)
                i.fa.fa-qq
    if theme.zhihu
        li
            a(href= theme.zhihu)
                i.fa.fa-mortar-board
    if theme.twitter
        li
            a(href= theme.twitter)
                i.fa.fa-twitter
    if theme.instagram
        li
            a(href= theme.instagram)
                i.fa.fa-instagram
    if theme.rss
        li
            a(href= url_for(theme.rss))
                i.fa.fa-rss
    if theme.weibo
        li
            a(href= theme.weibo)
                i.fa.fa-weibo
    if theme.facebook
        li
            a(href= theme.facebook)
                i.fa.fa-facebook

感觉很有关系

<0x01> 简单的尝试

于是我就直接很粗暴的在 social_links.pug 里加上这个

if theme.bilibili
    li
        a(href= theme.bilibili)
            i.fa.fa-bilibili

还有在 ./themes/Anatolo/_config.yml 里加上这个

bilibili: https://space.bilibili.com/13629146

一编译，一部署，一看，果不其然，直接是空白。 然后看看开发者工具，发现在对应地方的 html 代码里多了这些

<li>
    <a target="_blank" rel="noopener" href="https://space.bilibili.com/13629146">
        <i class="fa fa-bilibili">
        </i>
    </a>
</li>

也就是说，其实添加是添加进去了，但就是没有对应的图标而已
问题来了，<i class="fa fa-bilibili"> 里面的 fa 指的是什么呢?

<0x02> 二度分析

搜索了一下，fa 指的是 Font awesome，是有各种常见图标的字体。找的官网，看了看图标列表，果然没有B站
这下不得不自己做字体了(如果直接插入图片会更简单倒是)

翻了翻 ./themes/Anatolo/source/fonts 果然有 FontAwesome 的字体文件
(有 .otf .eot .svg .ttf .woff .woff2)

<0x03> 制作图标

首先需要一个工具网站，用来做字体。然后还需要一个矢量图编辑器。
网站是 icomoon.io 直接点击右上角的 IcoMoon App 即可
矢量图编辑器随意，我这里用的是 inkscape

进入 IcoMoon App 后，点击左上角 Import Icons，选择 .svg 文件
左上角选择铅笔，然后随便选一个图标，点击 Download(SVG) 下载这个图标的 .svg 文件。

然后在本地用矢量图编辑器打开，把原来的图清掉，然后再在上面画矢量图就可以了。

画的时候注意不要用描边，要用填充来构成图形。如果不小心用描边构成了图形，那么也可以选中路径，然后找到这个

点一下就会自动转换成填充了
画的时候要尽可能把画布填满，如果上下留白很多的话可以适当减小。
画布大小可以在文件→文档属性里修改
如果贝塞尔曲线画不好的话可以先用有理B样条来画，后者好画一点，但画出来就是比较圆润。
用贝塞尔曲线画的画，尽可能让每个节点的手柄要么水平，要么垂直，这样画会相对简单一点
如果图标有一定的对称性，那么节点要对称，而且手柄的长度也要对称

我的成果供大家参考。

然后，保存文件，回到之前的网页。导入我们制作的 .svg 文件。

然后选择右上角移动工具

把我们的图标移到列表的最后一个。
最后选择 Generate Font 生成字体文件。下载前找到我们新制作的图标，可以先检查下有没有什么问题。

<0x04> 替换原有字体

下载后解压缩，里面有个 demo.html 可以用来查看字体和字体编号(字体编号很重要)，还有 fonts 文件夹，里面就是我们生成的字体了。

打开 demo.html，找到我们的图标，记下图标的编号(这个编号在字体生成里也能改)，比如我的字体编号是 f2e1。

把 fonts 文件下的文件复制到 ./themes/Anatolo/source/fonts
在 ./themes/Anatolo/source/css 里找到 font-awesome.css 和 font-awesome.min.css (建议每个复制一个作备份)，打开。
在 font-awesome.css 修改

/*原来的*/
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*修改为*/
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot');
  src: url('../fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

我这里的字体名还是 fontawesome-webfont 这里名字按自己的来

然后加上这些

.fa-bilibili-alt:before {
  content: "\f2e1";
}

反正有很多长差不多的，加在那里面就可以。
\f2e1 这里要看你的编号填，.fa-bilibili-alt 这个算是给图标起个名字，随意就好。
font-awesome.min.css 就是 font-awesome.css 去掉所有缩进的版本，也要加上并修改些东西，在这里就不讲了。

<0x05> 部署试试

(记得加上<0x02>的多出来的代码)
编译，部署。访问下网页看看有没有新图标出现。如果没有，清除或禁用网页缓存后再试试。理论上自己加入的图标就会出现。

就像这样。