Hexo添加Subnav社交图标CSDN

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

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

                                         

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

                                                                             

下面是具体步骤

---

1.下载需要的图片

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

                                                                                

---

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

比如我的目录是这样：

                                                            

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

---

3.制作图片文字

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

                         

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

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

                              

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

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

              

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

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

                            

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

                                                              

左上角点“字形信息”：

                                         

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

                                                                          

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

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

                                                       

这样就制作完成了。

---

4.配置Hexo

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

                                                                               

然后在themes/yilia/source-src中，修改fonts.scss和social.scss

• fonts.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了。

---

我在每次运行这两个命令的时候总会卡住不动，也不会报错，这时候只要ctrl + C即可，因为其实重要的部分已经执行完毕，估计是卡在检查版本的代码行了。

---

最后，欢迎大家访问我的博客