【Hexo】yilia主题 添加 Subnav 社交图标 CSDN STEAM PSN等等

最近在捣鼓个人博客，github上有一个比较简洁美观的theme：yilia-theme：

                                         

想在Subnav上添加自己的PSN、Steam还有CSDN博客地址。。像这样：

                                                                             

查阅了F!redent同学的博客，整体思路和原理可以参看他的修改Yilia左下角SubNav的社交图标，不过个人感觉有的地方没说清楚，所以修改一下。

---

1.下载需要的图片

去Font Awesome搜索自己想要的图标，比如：

                                                                                

找到想要的之后，直接右键保存就行了

                                                                           

如果上面搜不到自己想要的，比如CSDN的“C”，那就自己F12在网页中找SVG标签。这里我提供一下CSDN的，保存为svg格式即可。

---

2.拷贝yilia theme下的font文件到本机

比如我的目录是这样：

                                                            

你可以先备个份，以防不测。然后把iconfont.svg拷贝到本机。

---

3.制作图片文字

去百度字体平台，左上点“新建”，创建一个新项目。

                         

然后，点中间的“导入”，选择“导入svg”，把刚才拷贝过来的iconfont.svg导入进来。

导入完毕后，就出现了yilia自带的图标文字：

                              

接下来，再选“导入”——“导入图片”，导入你需要加入图片或者是SVG格式的图片。

比如，我导入了PSN的图片，下面，就对图片的大小和位置，进行调整。

              

一定要鼠标全选整个图片元素！一定要鼠标全选整个图片元素！一定要鼠标全选整个图片元素！

然后shift+-调整大小和位置，调整完毕后，左上角，有一个“保存（S）”，保存即可，然后最右边，退出。

                            

选中刚才编辑的图片文字：

                                                              

左上角点“字形信息”：

                                         

输入Unicode和名字，并记住！因为等会儿会用到！

                                                                          

接下来，一样画葫芦，添加其他图标。

最后，点“保存项目”，然后点旁边的“ZIP”，下载下来。

                                                       

这样就制作完成了。

---

4.配置Hexo

下载下来解压之后包含这些文件，我们仅仅需要eot，svg，ttf，woff这四个文件。

                                                                               

接下来，我就直接拿F!redent同学的图了。。去/themes/yilia/source-src中，修改font.scss和social.scss。

在font.scss中，很简单，直接添加.icon-yourApp:before{ content: "刚才的unicode"}。 

在social.scss中，也很简单，添加颜色即可。。注意最后的}，不要搞错。

再用yilia根目录下设置_config.yml，直接添加刚才的图形名字和链接即可，注意，有空格。

                                     

修改完毕后，将上面的4个文件重命名后，拷贝到：

                                                      

然后，切换目录到themes/yilia，运行

npm run dev

进行打包 ，是的，我知道肯定有很大几率会报node-sass的错误。报错等会儿解决。

假如能够打包成功，再执行：

npm run dist

是的，我知道这里依然会报错。假如不报错，恭喜你，成功啦！

回到Hexo根目录，hexo g hexo s就行了。

---

5.错误解决

①npm run dev时报node-sass错误。

一般而言先卸载，再重装，或者重建。

npm uninstall node-sass
npm install node-sass
npm rebuild node-sass

如果还是不行，注意看错误信息，看是不是有“permission denied”的错误，有的话：

sudo npm install node-sass --unsafe-perm --save-dev

这样，就能成功安装node-sass。

② npm run dist时报错

我这里时报了运行环境不兼容的错误，这个node-sass要在6.x版本的Nodejs运行环境才能运行。

而我装的是9.x版本。。。

当我卸载了9.x版本，重装了一个6.x版本的Nodejs后，就能成功dist了。

---

好了，祝大家成功，本人小站搭建中