文章轉載於：hexo部落格yili主題個性化自定義教程（1） ——借鑑中學習，初認yili主題

這個部落格跌跌撞撞也弄了好多天了，由於Next主題不知道什麼情況，被我玩壞了。所以換了一個主題。
大名鼎鼎的yilia主題，崇尚簡約優雅，以及極致的效能，符合我的性格。以後很長一段時間都用這個主題啦。
接下來來說一下一些yili主題個性化自定義的方法和自己走過的坑。

本教程適用於yilia主題

前言

由於yilia已經不維護了，坑還挺多的，所以下面這些方法都是我試過了才敢拿出來的。
如果有錯誤，請原步驟返回檢查錯誤，或者參考官方教程↓
yilia主題github開源地址

本篇收集了全網目前最全的攻略啦，各位湊活著看。
這是一個系列，第一步先借鑑一下別人的程式碼，哈哈哈哈嗝。

如何正確使用yilia主題

安裝

$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

配置

修改hexo根目錄下的_config.yml ： theme: yilia

自定義配置

主題配置檔案在主目錄下的_config.yml，請根據自己需要修改使用。 完整配置例子，可以參考作者的部落格

主題配置詳細介紹

接下來我來說一下主題配置中的基本配置有哪些可以自定義的地方，詳細看下面的備註
部分程式碼我會用我自己的配置來講解具體用法

# Header
// 這段程式碼是左側欄的相關展示內容，後期可以加上分類，關於等。每個頁面後面是它的存放路徑
menu:
  主頁: /
  隨筆: /tags/隨筆/

# SubNav // 這段程式碼是左側欄的相關聯絡方式圖示，後期可以修改圖示等。
subnav:
  github: "#" //不需要就改成 "#"這個是github
  weibo: "#" //微博
  rss: "#" //RSS
  zhihu: "#" //知乎
  #qq: "#" //QQ
  #weixin: "#" //微信
  #jianshu: "#" //簡書
  #douban: "#" //豆瓣
  #segmentfault: "#" //思否segmentfault
  #bilibili: "#" //嗶哩嗶哩
  #acfun: "#" //acfun
  #mail: "mailto:[email protected]" //比如你想展示郵箱，就把這裡的地址改成你自己的郵箱即可。前面的 mailto: 不要去掉
  #facebook: "#" //facebook
  #google: "#" //google
  #twitter: "#" //twitter
  #linkedin: "#" //linkedin

rss: /atom.xml

# 是否需要修改 root 路徑
# 如果您的網站存放在子目錄中，例如 http://yoursite.com/blog，
# 請將您的 url 設為 http://yoursite.com/blog 並把 root 設為 /blog/。
root: 

# Content

# 文章太長，截斷按鈕文字
excerpt_link: more //這個文字是可以自己修改的，比如我的就改成了展開全文
# 文章卡片右下角常駐連結，不需要請設定為false，如果上面改成了展開全文，這個建議改為false
show_all_link: '展開全文'
# 數學公式
mathjax: false
# 是否在新視窗開啟連結
open_in_new: false

# 打賞
# 打賞type設定：0-關閉打賞； 1-文章對應的md檔案裡有reward:true屬性，才有打賞； 2-所有文章均有打賞
reward_type: 2
# 打賞wording
reward_wording: '謝謝你請我吃糖果' //這個是打賞時候顯示的文字，可以修改
# 支付寶二維碼圖片地址，跟你設定頭像的方式一樣。比如：/assets/img/alipay.jpg ，網路圖片直接用 https://xxx.png 即可
alipay: 
# 微信二維碼圖片地址
weixin: 

# 目錄
# 目錄設定：0-不顯示目錄； 1-文章對應的md檔案裡有toc:true屬性，才有目錄； 2-所有文章均顯示目錄
toc: 1
# 根據自己的習慣來設定，如果你的目錄標題習慣有標號，置為true即可隱藏hexo重複的序號；否則置為false
toc_hide_index: true
# 目錄為空時的提示
toc_empty_wording: '目錄，不存在的…'

# 是否有快速回到頂部的按鈕
top: true

# Miscellaneous
baidu_analytics: '' # 百度分析
google_analytics: '' # 谷歌分析
favicon: /favicon.png # 站點logo

#你的頭像url
avatar:

#是否開啟分享
share_jia: true

#評論：1、多說；2、網易雲跟帖；3、暢言；4、Disqus；5、Gitment
#不需要使用某項，直接設定值為false，或註釋掉
#具體請參考wiki：https://github.com/litten/hexo-theme-yilia/wiki/

#1、多說
duoshuo: false

#2、網易雲跟帖
wangyiyun: false

#3、暢言
changyan_appid: false
changyan_conf: false

#4、Disqus 在hexo根目錄的config裡也有disqus_shortname欄位，優先使用yilia的
disqus: false

#5、Gitment
gitment_owner: false      #你的 GitHub ID
gitment_repo: ''          #儲存評論的 repo
gitment_oauth:
  client_id: ''           #client ID
  client_secret: ''       #client secret

# 樣式定製 - 一般不需要修改，除非有很強的定製慾望…
style:
  # 左側欄頭像上面的背景顏色
  header: '#4d4d4d'
  # 右滑板塊背景
  slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'

# slider的設定
slider:
  # 是否預設展開tags板塊
  showTags: false

# 智慧選單
# 如不需要，將該對應項置為false
# 比如
#smart_menu:
#  friends: false
smart_menu:
  innerArchive: '所有文章'
  friends: '友鏈'
  aboutme: '關於我'

friends:
  友情連結1: http://localhost:4000/
  友情連結2: http://localhost:4000/
  友情連結3: http://localhost:4000/
  友情連結4: http://localhost:4000/
  友情連結5: http://localhost:4000/
  友情連結6: http://localhost:4000/

aboutme: 很慚愧<br><br>只做了一點微小的工作<br>謝謝大家 //這個是出現在 關於我 頁面的一句話 <br> 是換行的意思。
 

請照著上面的備註，一條一條修改看看效果，就能大概掌握最基礎的主題自定義啦。

主題BUG修復

參考

1.執行伺服器，發現出現錯誤提示

<%- partial('_partial/head') %>
<%- partial('_partial/header') %>
<%- body %>
<% if (theme.sidebar && theme.sidebar !== 'bottom'){ %> <%- partial('_partial/sidebar') %> <% } %>
<%- partial('_partial/footer') %>
<%- partial('_partial/mobile-nav') %> <%- partial('_partial/after-footer') %>
 

如果出現上述錯誤提示，說明少裝了外掛，逐條執行以下命令安裝外掛：

npm install hexo-renderer-ejs --save
npm install hexo-renderer-stylus --save
npm install hexo-renderer-marked --save

然後hexo clean清除清除快取檔案和已生成的靜態檔案再次執行即可。

2.左滑塊“所有文章”按鈕的安裝

首先確保使用版本是不是大於6.2.
使用命令node -v檢查
然後在hexo的配置檔案_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

重啟伺服器即可

2.頭像不顯示

進入文章後，頭像就不顯示。
修改themes\yilia\layout_partial\left-col.ejs的第六行，改為
<img src="<%=theme.root%><%=theme.avatar%>" class="js-avatar">
同時，還要修改themes\yilia\layout_partial\mobile-nav.ejs
裡面的第10行，修改為
<img src="<%=theme.root%><%=theme.avatar%>" class="js-avatar">

3.打賞二維碼不顯示

修改themes\yilia\layout_partial\article.ejs
找到<img class=”reward-img”``這個標籤，改後面src的值 支付寶的改成這個<%=theme.root%><%= theme.alipay%>微信的改成這個<%=theme.root%><%= theme.weixin%>`

4.微信分享不成功

因為百度網盤取消了生成二維碼的功能，導致之前的連結不可用了。
修改themes\yilia\layout_partial\post\share.ejs
把第49行中的//pan.baidu.com/share/qrcode?url=修改為
//api.qrserver.com/v1/create-qr-code/?size=150x150&data=
即可

5.在左側顯示總文章數

修改themes\yilia\layout\_partial\left-col.ejs
在

<nav class="header-menu">
    <ul>
    <% for (var i in theme.menu){ %>
        <li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
    <%}%>
    </ul>
</nav>

後面加入

<nav>
    <a>總文章數 <%=site.posts.length%></a>
</nav>

效果如下

6.新增來必力評論系統

yilia預設帶了幾個系統，但我是從next這個主題轉過來的，之前用的是來必力(livere)，不想換了，就得手動在yilia裡面加。
按網上的方法我試了好久才成功.....原因就是他們的教程不夠詳細。
首先是去註冊livere，然後獲取到自己的id
檢視ID方法，右上角頭像-管理頁面-程式碼管理獲取

新建\themes\yilia\layout\_partial\post\livere.ejs
內容直接複製程式碼管理裡面的內容

然後編輯themes\yilia\layout\_partial\article.ejs
找到<% if (!index && post.comments){ %> 在它的下方加入以下程式碼

 <% if (theme.livere){ %>
  <%- partial('post/livere', {
        key: post.slug,
        title: post.title,
        url: config.url+url_for(post.path)
    }) %>
  <% } %>

接下來需要在主題配置檔案**_config.yml**中新增以下內容：

#7.來必力
livere: 這裡填你的ID

並把其他的評論系統程式碼遮蔽

然後hexo clean和hexo d重新部署即可。
效果如圖

7.新增字數統計

安裝hexo-wordcount
npm i --save hexo-wordcount

!!Node 版本7.6.0之前,請安裝 2.x 版本 (Node.js v7.6.0 and previous)!!
npm install hexo-wordcount@2 --save

然後開啟themes\yilia\layout\_partial\left-col.ejs
如果需要在左側新增的話，在之前顯示總文章數的程式碼位置下新增程式碼
<a>總字數 <span class="post-count"><%= totalcount(site, '0,0.0a') %></span></a>
即

<nav>
    <a>總文章數 <%=site.posts.length%></a>
    <a>總字數 <span class="post-count"><%= totalcount(site, '0,0.0a') %></span></a>
</nav>

顯示單篇字數和預計閱讀時長的話
編輯themes\yilia\layout\_partial\article.ejs`` 在第一個`下，新增程式碼

<div align="center" class="post-count">
    字數：<%= wordcount(post.content) %>字 | 預計閱讀時長：<%= min2read(post.content) %>分鐘
</div>

即可
效果如下

8.取消訪問litten.me:9005

關於訪問litten.me:9005的問題，這個主題的作者之前為了更好地完善這個主題，有時候會收集使用者的客戶端資訊，詳情請見這裡，如果不想被統計，就將themes\yilia\source-src\js\report.js裡面的內容清空即可

主題簡單美化與完善

參考：
Yilia個性設定- CSDN部落格

1.新增百度統計

先開啟百度統計 ，新增站點，複製獲得的程式碼，貼上到
\themes\yilia\layout\_partial\footer.ejs中如下程式碼塊

  <div>
      這裡貼上程式碼
  </div>

即可
注意：程式碼塊<div>和</div>一定要在<footer>和</fotter>之間

2.修改文章標題樣式

開啟\themes\yilia\source-src\css\article.scss新增如下樣式（喜歡什麼樣式可以自己修改）：

.article-title_code_ant {
  color: black;
  margin-left: 0px;
  font-weight: 50;
  line-height: 1em;
  margin-bottom: 1em;
  font-size: 27px;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  transition: color 0.3s;
  &:hover{
    color: #B0A0AA;
  }
}

再開啟\themes\yilia\layout\_partial\article.ejs，
搜尋<%- partial('post/title', {class_name: 'article-title'}) %>
修改為

<%# 註釋掉-partial('post/title', {class_name: 'article-title'}) %>
<%# 修改模板 %>
<center><p><%- partial('post/title', {class_name: 'article-title_code_ant'}) %></p></center>

如圖所示

即可，但是現在發現標題的顏色為a標籤設定顏色，讓我們繼續來解決。
繼續修改檔案，找到\themes\yilia\source\main.0cf68a.css，開啟編輯，新增如下程式碼：

.article-inner h1.article-title_code_ant, .article-title_code_ant {
    color: #000000;
    margin-left: 0;
    font-weight: 50;
    line-height: 1em;
    margin-bottom: 1em;
    font-size: 27px;
    transition: color .3s
}

解決√
效果如下

3.刪除或修改部落格底部Hexo Theme Yilia by Litten

開啟\themes\yilia\layout\_partial\footer.ejs修改如下：

<div class="footer-right">
</div>

當然也可以改成其他內容。其他內容怎麼修改以後再慢慢說(比如建站時間什麼的。)
當然各位也可以先自己嘗試一下。

4.文章新增版權宣告

在\themes\yilia\layout\_partial\article.ejs中如下的位置新增程式碼

    <% } %>
    
    <-- 在此處新增程式碼-->
    
    <% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>

新增的程式碼如下

<%# 新增文章版權 %>
        <%
          var sUrl = url.replace(/index\.html$/, '');
          sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
        %>
        <% if ((theme.declare_type === 2 || (theme.declare_type === 1 && post.declare)) && !index){ %>
          <div>
            <blockquote>
                <strong>本文作者：</strong>
                <% if(config.author != undefined){ %>
                  <%= config.author%>
                <% }else{%>
                  <font color="red">請在部落格根目錄“_config.yml”中填入正確的“author”</font>
                <%}%>
                <br>
                <strong>本文連結：</strong>
                <%= sUrl%>
                <br>
                <strong>版權宣告：</strong>
                本作品採用
                <a rel="license" href="<%= theme.licensee_url%>"><%= theme.licensee_name%></a>
                進行許可。轉載請註明出處！
                <% if(theme.licensee_img != undefined){ %>
                  <br>
                  <a rel="license" href="<%= theme.licensee_url%>"><img alt="知識共享許可協議" style="border-width:0" src="<%= theme.licensee_img%>"/></a>
                <% } %>
            </blockquote>
            
            <%# 新增文章底部標語 %>
            <hr>
                <center><strong><%= theme.licensee_slogan%></strong></center>
            <hr>
          </div>
        <% } else {%>
          <div hidden="hidden"></div>
        <% } %>

具體如圖

繼續修改yilia主題配置檔案_config.yml，新增如下程式碼

#版權
# 版權基礎設定：0-關閉宣告； 1-文章對應的md檔案裡有declare: true屬性，才有版權宣告； 2-所有文章均有版權宣告
declare_type: 2 #所有文章均有版權宣告
licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/ # 當前應用的版權協議地址。
licensee_name: '知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議' # 版權協議的名稱
licensee_img: https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png # 版權協議的Logo
licensee_slogan: 樂於分享,專注網際網路生活.  # 標語

如果需要章對應的md檔案裡有declare: true屬性，才有版權宣告的話，在需要進行版權宣告的文章的md檔案頭部，設定屬性declare: true即可。

後語

更多訊息請關注我們: 奧怪的小棧

未完待續...