Hexo+yilia主题 添加 Subnav 社交图标

Hexo+yilia主题 添加 Subnav 社交图标

想在Subnav上添加自己的CSDN博客地址、简书。。像这样操作

制作图片文字

我推荐一个可以搜索到自己想要图标的网址，下载即可

https://www.easyicon.net/

下载好图标（png格式），接下来搜索网址http://fontstore.baidu.com/store#!/进入到如下图：

点击FontEditor编辑你下载的图标，点“新建”，创建一个新项目。然后，点中间的“导入”，选择“导入svg”，把刚才拷贝过来的iconfont.svg导入进，导入完毕后，就出现了yilia自带的图标文字：

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

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

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

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

接下来，选中刚才编辑的图片文字左上角点“字形信息”，输入Unicode和名字，并记住！因为等会儿会用到！最后，点“保存项目”，然后点旁边的“ZIP”，下载下来。

配置Hexo

下载下来解压之后包含这些文件，我们仅仅需要eot，svg，ttf，woff这四个文件。
到/themes/yilia/source-src/css中，修改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就行了。

错误解决

①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

② npm run dist时报错

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

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

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