hexo部落格yili主題個性化自定義教程（1） ——借鑒中學習，初認yili主題
- 2019 年 11 月 2 日
- 筆記
文章轉載於：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: '' # Google分析 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.頭像不顯示
進入文章後，頭像就不顯示。
修改themesyilialayout_partialleft-col.ejs的第六行，改為
<img src="<%=theme.root%><%=theme.avatar%>" class="js-avatar">
同時，還要修改themesyilialayout_partialmobile-nav.ejs
裡面的第10行，修改為
<img src="<%=theme.root%><%=theme.avatar%>" class="js-avatar">
3.打賞二維碼不顯示
修改themesyilialayout_partialarticle.ejs
找到<img class=」reward-img」``這個標籤，改後面src的值 支付寶的改成這個<%=theme.root%><%= theme.alipay%>微信的改成這個<%=theme.root%><%= theme.weixin%>`
4.微信分享不成功
因為百度網盤取消了生成二維碼的功能，導致之前的鏈接不可用了。
修改themesyilialayout_partialpostshare.ejs
把第49行中的//pan.baidu.com/share/qrcode?url=修改為
//api.qrserver.com/v1/create-qr-code/?size=150x150&data=
即可
5.在左側顯示總文章數
修改themesyilialayout_partialleft-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方法，右上角頭像-管理頁面-程式碼管理獲取
新建themesyilialayout_partialpostlivere.ejs
內容直接複製程式碼管理裡面的內容
然後編輯themesyilialayout_partialarticle.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
然後打開themesyilialayout_partialleft-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>顯示單篇字數和預計閱讀時長的話
編輯themesyilialayout_partialarticle.ejs`` 在第一個
`下，添加程式碼
<div align="center" class="post-count"> 字數：<%= wordcount(post.content) %>字 | 預計閱讀時長：<%= min2read(post.content) %>分鐘 </div>即可
效果如下
8.取消訪問litten.me:9005
關於訪問litten.me:9005的問題，這個主題的作者之前為了更好地完善這個主題，有時候會收集用戶的客戶端資訊，詳情請見這裡，如果不想被統計，就將themesyiliasource-srcjsreport.js裡面的內容清空即可
主題簡單美化與完善
1.添加百度統計
先打開百度統計 ，添加站點，複製獲得的程式碼，粘貼到
themesyilialayout_partialfooter.ejs中如下程式碼塊
即可（如果沒有可以自己寫上去。）
<div> 這裡粘貼程式碼 </div>即可
注意：程式碼塊<div>和</div>一定要在<footer>和</fotter>之間
2.修改文章標題樣式
打開themesyiliasource-srccssarticle.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; } }再打開themesyilialayout_partialarticle.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標籤設置顏色，讓我們繼續來解決。
繼續修改文件，找到themesyiliasourcemain.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
打開themesyilialayout_partialfooter.ejs修改如下：
<div class="footer-right"> </div>當然也可以改成其他內容。其他內容怎麼修改以後再慢慢說(比如建站時間什麼的。)
當然各位也可以先自己嘗試一下。
4.文章添加版權聲明
在themesyilialayout_partialarticle.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即可。
後語
更多消息請關注我們: 奧怪的小棧
未完待續……
