切換到 yilia 主題后，可以對博客進(jìn)行很多個(gè)性化配置，網(wǎng)上有很多針對的教程，這里對我做的配置做一些記錄。

內(nèi)容主要有：

• 基本信息的修改
• 頭像圖標(biāo)的修改
• 添加所有文章處的缺失模塊
• 完善代碼行號顯示錯(cuò)亂
• 添加訪問量統(tǒng)計(jì)
• 添加上方進(jìn)度條
• 文章顯示目錄
• 文章內(nèi)插入圖片
• 文章顯示摘要和插入標(biāo)簽

開頭先說明一下，所有做出的修改保存后，還需要執(zhí)行 hexo clean -> hexo g -> hexo d 這三條基本命令將修改部署到網(wǎng)上，而有時(shí)候執(zhí)行這三條命令的地方有所不同，最保險(xiǎn)的方法是 cd themes 執(zhí)行一次，然后 cd.. 回到根目錄再執(zhí)行一次。

如圖

基本信息的修改

• 網(wǎng)頁基本信息的修改 ：打開 BLOG\_config.yml 配置文件，修改 site 欄目下的 title 和 author ，這兩個(gè)分別是 網(wǎng)站名字 和 博客頁面作者名字。
• 博客左邊信息欄的修改 ：打開 BLOG\themes\yilia\_config.yml 配置文件，修改 smart _menu 欄目下的 friends 和 about me ，這兩個(gè)是博客左邊信息欄中點(diǎn)擊會出現(xiàn)的信息。
• 博客左邊下方圖標(biāo)外接鏈接的修改：也是 BLOG\themes\yilia\_config.yml 配置文件，修改 subnav 欄目下的信息，我把自己需要讓人能看到的外鏈填進(jìn)去，不需要的就加 # 隱藏了。
  
  如圖
  
  PS：這里有個(gè)小插曲，我想把自己掃一掃添加我微信的截圖放進(jìn)去，結(jié)果只能放鏈接，所以找了個(gè)通過 GitHub 把圖片上傳生成鏈接的方法。參考： 這里 。

頭像圖標(biāo)的修改

• 博客頭像的修改：頭像存放在 BLOG\themes\yilia\source\ 的任意位置，我參考網(wǎng)上新建了個(gè) assert 文件夾，把頭像存放在里面，地址為 \themes\yilia\source\assert\1.jpg 。然后打開 BLOG\themes\yilia\_config.yml 配置文件，修改 favicon 一欄為 /themes/yilia/source/，修改 avatar 頭像一欄為 /assert/1.jpg。
• 網(wǎng)頁圖標(biāo) icon 的修改：先去 比特蟲 網(wǎng)站生成 icon 圖標(biāo)；圖片放到hexo/source/img文件夾下，地址為 \BLOG\source\img\bitbug_favicon.ico；找到BLOG\themes\modernist\layout_partial\head.ejs，設(shè)置為

<% if (theme.favicon){ %>
    <link rel="icon" href="/img/bitbug_favicon.ico">
  <% } %>

添加所有文章處的缺失模塊

用 cmd 控制臺打開博客根目錄 \BLOG ，輸入命令 npm i hexo-generator-json-content --save ，再用編輯器打開 BLOG\_config.yml 配置文件，在最后添加以下代碼：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true

完善代碼行號顯示錯(cuò)亂

用編輯器打開 \BLOG\themes\yilia\source\main.0cf68a.css 文件，刪除 white-space:pre-wrap; 這行代碼。

添加訪問量統(tǒng)計(jì)

用編輯器打開 \BLOG\themes\yilia\layout\_partial 文件，用以下代碼替換：

<footer id="footer">
  <div class="outer">
    <div id="footer-info">
      <div class="footer-left">
        &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %>
      </div>
      <div class="footer-right">
          <a  target="_blank">Hexo</a>  Theme <a  target="_blank">Yilia</a> by Litten
      </div>
    </div>
    <div calss="count-span">
      <span id="busuanzi_container_site_pv">
          總訪問量: <span id="busuanzi_value_site_pv"></span>
    </div>
  </div>
</footer>


<script async src="http://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

其中最后一句 <script async src="http://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script> 是用來添加 不蒜子統(tǒng)計(jì) 。中間 <div calss="count-span"> <span id="busuanzi_container_site_pv"> 總訪問量: <span id="busuanzi_value_site_pv"></span> </div> 是用來添加站點(diǎn)訪問量。
還有一些添加 總訪客數(shù)、文章閱讀量 的操作，覺得自己不需要就沒添加了，可以參考 這個(gè) 。

添加頂部加載條

用編輯器打開 BLOG\themes\yilia\layout\_partial\head.ejs 配置文件。
在這段代碼：

<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<link rel="dns-prefetch" href="<%= config.url %>">
<title><% if (title){ %><%= title %> | <% } %><%= config.title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

下方添加：

<script src="http://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
  <link  rel="stylesheet">
    <style>
    .pace .pace-progress {
        background: #6d6d6d; /*進(jìn)度條顏色*/
        height: 2px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px     #6d6d6d; /*陰影顏色*/
    }
    .pace .pace-activity {
        border-top-color: #6d6d6d;    /*上邊框顏色*/
        border-left-color: #6d6d6d;    /*左邊框顏色*/
    }
  </style>

文章顯示目錄

有兩種方式顯示目錄。

• 一種方式是每篇文章右下方都顯示目錄。
  用編輯器打開 BLOG\themes\yilia\_config.yml 配置文件，修改 toc: 2 。
  
  如圖
• 另一種方式是單獨(dú)一篇文章右下方顯示目錄。
  修改 toc: 1 ，而在每篇新建文章開頭填入 toc = ture 。
  例如：

---
title: new
date: 2019-07-24 13:44:30
tags:
toc: ture
---

文章內(nèi)插入圖片

• 用 cmd 控制臺打開博客根目錄 \BLOG ，輸入 npm install hexo-asset-image –save 命令，安裝一個(gè)可以上傳本地圖片的插件。
• 用編輯器打開 BLOG\_config.yml 配置文件，修改 post_asset_folder: true 。
  這時(shí)每次用 hexo new filename 新建文章時(shí)，就會出現(xiàn)一個(gè)同名文件夾 filename ，把需要插入的圖片 1.jpg 放進(jìn)去。
• 最后在用 markdown 寫文章時(shí)，就用 ![](filename/1.jpg) 插入圖片就好了。

文章顯示摘要和插入標(biāo)簽

• 在文章需要截?cái)嗖糠謱懭?

  <!-- more -->
  

  就會自動渲染出文章摘要。
• 在新建的文章開頭部分寫入

  ---
  title: 學(xué)習(xí)使用 GIT
  date: 2019-07-23 12:44:13
  tags:
  - git 
  - xxx （這就是標(biāo)簽）
  ---
  

  就能插入多標(biāo)簽。

后記
還有更多個(gè)性化配置可以參考網(wǎng)上或者自己探索，基本上以上這些配置就能滿足我的需求了，或許以后還需要學(xué) 更改代碼樣式 、插入音樂 和 插入數(shù)學(xué)公式，但目前還不用。
更改代碼樣式其實(shí)是花了很多時(shí)間去弄，但是還沒弄懂。其實(shí)如果了解得更深，了解 Hexo 的構(gòu)建，了解 yilia 的構(gòu)建，和 前端 等等的相關(guān)知識，搭建的博客可以更好，各種樣式都能自己設(shè)置，嘗試修改代碼樣式時(shí)就試用了下 F12控制臺 和 css 的相關(guān)內(nèi)容，但是還是沒搞懂。目前還是了解一下，點(diǎn)到為止了。

參考和鳴謝
頭像 摘要 頂部加載條 目錄 插入圖片 插入圖片 網(wǎng)頁圖標(biāo) 訪問量 代碼行號顯示錯(cuò)亂
待看
數(shù)學(xué)公式 其他渲染引擎 主題自定義 Hexo構(gòu)建