yilia是一款非常不錯的博客主題，它滿足幾乎大多數博主對個人博客網站的要求，主題作者推崇簡約模式，設計的界面非常nice！

入門要求比較低，適合所有人群，并且可以自己定制喜歡的分風格，比如添加特效、插件等等。

子導航幾乎集成了大多社交網站的圖標，不過還有些并未補充，這里主要介紹一下如何在子導航社交界面添加自定義的圖標。

制作圖片文字

1.下載社交網站圖標

去網上搜索想要編輯的社交網站圖標，有的網站圖標，在瀏覽器中按 F12 找到圖標位置，是有可能找到圖標網址的，這時直接下載（如碼云），如果沒有可以到一些知名搜索引擎查找，或者到 EasyIcon 網站搜索。

2.編輯圖標

2.1.復制 iconfont.svg 到下載目錄

打開文件目錄 themes\yilia\source-src\css\fonts，找到 iconfont.svg 并復制到下載目錄。

2.2.打開百度字體編輯器

編輯剛剛下載的圖標，點 [新建]，創建一個新項目。然后，點中間的 [導入]，選擇 [導入svg]，把剛才拷貝過來的 iconfont.svg 導入進，導入完畢后，就出現了yilia自帶的圖標文字：

導入下載好的社交網站圖片(需要加入的圖片，可以是SVG格式的圖片)，調整大小位置，保存并退出，我導入的是碼云網站的圖片，如圖：

接著，選中剛編輯完的圖片，在左上角點擊 [字形信息] ，輸入[Unicode]和[圖標名]，記下來，會在css文件中用到，最后，點擊 [保存項目]，下載 [ZIP] 壓縮包。

3.配置hexo主題

3.1.解壓剛剛下載的 [ZIP] 壓縮包

保留 eot，svg，ttf，woff 這四個文件。

3.2.修改css文件

• 到 /themes/yilia/source-src/css 中，修改 font.scss 和 main.0cf68a.css，添加：

.icon-gitee:before {
  content: "\E87A"
}

.icon-statistics:before {
  content: "\E87B";
}

即 .icon-yourApp:before{ content: “剛才的unicode”}。

• 修改 /themes/yilia/source-src/css/social.scss 文件，添加：

a.gitee {
  background: #086ef6;
  border:1px solid #086ef6;
  &:hover {
      border:1px solid #086ef6;
  }
}
a.statistics {
  background: #333435;
  border:1px solid #086ef6;
  &:hover {
      border:1px solid #086ef6;
  }
}

即 a.yourApp:before{顏色配置}。

3.3.更新子導航配置

修改 yilia 主題配置文件 _config.yml，在subnav下添加圖標名和鏈接：

# subNav-子導航
subNav:
  gitee: ''  # 碼云

3.4.更新圖標配置

將上面的4個文件重命名后，替換 /themes/yilia/source-src/css/fonts 目錄下的原文件。

然后，控制臺切換目錄到 themes/yilia 下，

• 安裝依賴：

nom install

• 運行打包命令：

npm run dev

• 如果打包成功，執行：

npm run dist

回到Hexo根目錄，重新生成部署 hexo s -g 就行了

錯誤Error：

1.npm install 時，node-sass 錯誤

如果出現 [email protected] postinstall: node scripts/build.js, Failed at the [email protected] 這樣的提示，可能是安裝源的問題，修改源后再安裝：

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

npm install

如果還有問題，出現 ./source is not an absolute path 錯誤，修改 webpack.config.js 文件，在 module.exports中，改成：

output: {
    path: __dirname + "./source",
    publicPath: "./",
    filename: "[name].[chunkhash:6].js"
  }

2.npm run dev 時，node-sass 錯誤

先卸載，再重裝，或者重建。

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

如果錯誤信息是 permission denied ，執行：

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

3.npm run dist 報錯

檢查node版本。

---

參考：
yilia 添加社交圖標
npm 安裝報錯
output.path Error