Hexo主題更改以及小功能的新增
之前搭建的部落格基本功能已經實現了，現在就折騰著好好維護一下我的部落格了，於是參考著別人的部落格新增一些小功能，並且整理了下來。
新搭建的部落格的預設主題都是 landscape ，我的主題是基於 ofollow,noindex"> yelee 風格的，作者也是在 hexo-theme-yilia 的基礎上進行的修改。
具體的使用可以參考官方文件
首先給大家介紹下新增的功能吧
主題更改
下載主題
git clone https://github.com/MOxFIVE/hexo-theme-yelee.git 複製程式碼
修改主題
開啟專案目錄下的_config.yml檔案
主題更改，注意的是在yelee前面有個空格
theme: yelee 複製程式碼
語言更換
開啟專案目錄下的_config.yml檔案
# Site language: zh-Hans 複製程式碼
目前可用語言:
| en | English | 英語 |
|---|---|---|
| zh-Hans | Chinese (Simplified) | 大陸簡體 |
| zh-Hant-HK | Chinese (Traditional) | 港澳繁體 |
| zh-Hant-TW | Chinese (Traditional) | 臺灣正體 |
個人頭像
預設頭像儲存於 yelee/source/img/avatar.png
配置中對應填寫 /img/avatar.png ，可替換圖片或指定新地址
themes/yelee/_config.yml 背景引數:
avatar: /img/avatar.png 複製程式碼
文章摘要
目前主題可使用兩種方式在首頁顯示文章摘要而不是全文。
方法一: <!-- more -->
title: Hello World date: 2015-12-03 00:00:00 --- <Excerpt in index | 首頁摘要> <!-- more --> <The rest of contents | 餘下全文> 複製程式碼
<!-- more --> 之前最好不要有空格等字元；
方法二: description inFront-matter
title: Hello World date: 2015-12-03 00:00:00 description: "Welcome to Hexo! This is your very first post." --- <Contents> 複製程式碼
通過 description 新增的摘要只能為純文字；
description 中的內容加引號，可以避免一些程式錯誤，例如當內容裡包含英文冒號時。
主選單
按下面格式新增邊欄選單，選單前的 # 表示註釋掉該行，即隱藏掉該條目
themes/yelee/_config.yml 背景引數:
menu: 主頁: / 所有文章: /archives/ #隨筆: /tags/隨筆 標籤雲: /tags/ 關於我: /about/ 複製程式碼
標籤雲
使用 Hexo 命令新建一個名為 tags 的頁面即可
hexo new page tags 複製程式碼
該頁面標題可以在檔案 \hexo\source\tags\index.md 中修改
同一篇文章設定多個分類後的問題 issue#4
關於我的頁面
使用 Hexo 命令新建一個名為 about 的頁面即可
hexo new page about 複製程式碼
該頁面內容在檔案 \hexo\source\about\index.md 中修改
本地搜尋
使用搜索需先安裝對應外掛，用於生成索引資料
外掛主頁: hexo-generator-search
#on: true 改為 on: true 即為啟用搜索
search: #on: true onload: false 複製程式碼
onload: true : 索引資料 search.xml 隨頁面一起載入 [效率優先]
onload: false : 當啟用搜尋框時再下載索引資料 `[按需載入]
站點小圖示
若將圖示儲存於 yelee/source/favicon.png
則配置中對應填寫 /favicon.png ，另外填網路圖片的地址也可
themes/yelee/_config.yml 背景引數:
favicon: /favicon.png 複製程式碼
社交圖示
去掉設定前的 # 再填寫連結即可
themes/yelee/_config.yml 背景引數:
subnav: Email: "mailto:[email protected]" #新浪微博: "sina weibo" GitHub: https://github.com/nullcxy #V2EX: "#" #RSS: "/atom.xml" 複製程式碼
設定 Email 時保留 mailto: 可考慮加密郵件地址ctrlq.org/encode/
使用 RSS 需先安裝對應外掛 github.com/hexojs/hexo…
網站成立年份
themes/yelee/_config.yml 背景引數:
since: 2016 複製程式碼
預設為 2016 ，若填入年份小於當前年份，則顯示為 2015-2016 類似的格式
背景圖片
背景圖檔案所在路徑:
/yelee/source/background/ 複製程式碼
themes/yelee/_config.yml 背景引數:
background_image: 5 複製程式碼
- 預設值為5，可按需修改
- "5": 設定
/yelee/source/background/資料夾中bg-1.jpg到bg-5.jpg這5張圖片為背景 - "0": 取消網頁背景圖，使用淳樸的灰白主題
文章目錄
配置中啟用目錄
themes/yelee/_config.yml 背景引數:
toc: on: true 複製程式碼
指定文章中關閉目錄 toc: false
title: Hello World date: 2015-08-19 00:00:00 toc: false --- 複製程式碼
版權
配置中啟用目錄
themes/yelee/_config.yml 背景引數:
copyright: true 複製程式碼
指定文章中關閉目錄 original: false
title: Hello World date: 2015-08-19 00:00:00 original: false --- 複製程式碼
原始連結設定
修改站點配置 檔案中 url 的值為你的網站域名
url: http://MOxFIVE.xyz 複製程式碼
左邊主選單鳥屋
themes/yelee/_config.yml 背景引數:
左邊欄鳥屋
關閉鳥屋
# 邊欄多標籤切換 tagcloud: false 複製程式碼
友情連結
## 編輯友鏈 friends: Hexo: https://hexo.io GitHub: https://pages.github.com/ MOxFIVE: http://moxfive.xyz/ ## 關閉友鏈 friends: false 複製程式碼
關於我
# 是否開啟“關於我”。 aboutme: 專注於前端 # 關閉“關於我” aboutme: false 複製程式碼
評論
來必力評論
介紹
yelee原生是支援Disqus、多說和有言的，可以參考官網-評論系統
但是多說已經關閉，有言支援又不友好，又發現Disqus在手機上展示不出來，發現還需要翻牆，那實在對使用者太不友好了，於是我選擇使用來必力評論系統
註冊
註冊後可以檢視資料分析
程式碼管理，我們需要用到這個data-uid
整合
新增data-uid
開啟 theme/yelee/_config.yml ，新增配置資訊
livere: on: true livere_uid: Your uid 複製程式碼
建立ejs檔案
在 themes/yelee/layout/_partial/comments 資料夾建立 livere.ejs 檔案，將程式碼拷貝進去，將你註冊後的程式碼拷貝到
裡面。
<section class="livere" id="comments">
<!-- 來必力City版安裝程式碼 -->
<div id="lv-container" data-id="city" data-uid="Your uid">
<script type="text/javascript">
(function(d, s) {
var j, e = d.getElementsByTagName(s)[0];
if (typeof LivereTower === 'function') { return; }
j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;
e.parentNode.insertBefore(j, e);
})(document, 'script');
</script>
<noscript> 為正常使用來必力評論功能請啟用JavaScript</noscript>
</div>
<!-- City版安裝程式碼已完成 -->
</section>
複製程式碼
追加邏輯判斷
開啟 themes/yelee/layout/_partial/article.ejs ，在下圖位置插入下面的邏輯判斷程式碼
else if (theme.livere.on) { %>
<%- partial('comments/livere') %>
<% }
複製程式碼
如此，就大功告成，可以進行留言了，看下效果：
文章字數統計以及閱讀時長
前言
next主題是已經整合這個功能的，但是yelee就需要我們自己配置了，可以看下官網對hexo-wordcount的介紹
整合
安裝hexo-wordcount
npm i --save hexo-wordcount 複製程式碼
檔案配置
在 yelee/layout/_partial/post/word.ejs 下建立 word.ejs 檔案：
<div style="margin-top:10px;"> <span class="post-time"> <span class="post-meta-item-icon"> <i class="fa fa-keyboard-o"></i> <span class="post-meta-item-text">字數統計: </span> <span class="post-count"><%= wordcount(post.content) %>字</span> </span> </span> <span class="post-time"> | <span class="post-meta-item-icon"> <i class="fa fa-hourglass-half"></i> <span class="post-meta-item-text">閱讀時長: </span> <span class="post-count"><%= min2read(post.content) %>分</span> </span> </span> </div> 複製程式碼
然後新增邏輯判斷
開啟 themes/yelee/layout/_partial/article.ejs
<% if(theme.word_count && !post.no_word_count){ %>
<%- partial('post/word') %>
<% } %>
複製程式碼
在下圖位置新增
word_count 是主題 _config.yml 中配置是否需要新增字數統計功能控制 flag，
no_word_count 即配置文章是否需要顯示字數統計的功能。
看一下效果吧
網易雲音樂
前言
對於一名 Android 開發者來講， 網易雲音樂 是必不可少的功能，那部落格也要新增這個功能咯。
整合
MarkDown 是支援 h5 程式碼的，所以整合過來很簡單，開啟網易雲音樂，搜尋你想要的音樂
點選對應的 生成外鏈播放器 ，當然前提是要有版權的，很多音樂還是沒有版權的，可以設定尺寸，是否自動播放，最後拷貝對應的程式碼，拷貝到你想要放置的位置即可。
看一下效果吧
滑鼠點選桃心效果
前言
如果滑鼠點選的時候出現特效，那一定會使整個部落格的顏值提升一大截
整合
拷貝需要的檔案
進入 我的備份 ，拷貝需要的檔案
新增配置
開啟 themes/yelee/layout/_partial/after-footer.ejs 檔案，新增剛剛新增檔案的配置。
<script type="text/javascript" src="/resources/float.js"></script> <script type="text/javascript" src="/resources/love.js"></script> <script type="text/javascript" color=0,104,183 opacity=1 zindex=-1 count=50 src="/resources/particle.js"></script> <script type="text/javascript" src="/resources/typewriter.js"></script> 複製程式碼
點選頁面檢視一下效果
新增可愛的萌妹子或者萌寵
前言
如果在頁面上添加個萌寵或者萌妹紙，那是不是很卡哇伊呢。大家可以檢視 原始碼 來挑選自己喜歡的模型。
整合
安裝
npm install --save hexo-helper-live2d 複製程式碼
配置
在站點的 _config.yml 下配置
live2d: enable: true scriptFrom: local model: use: live2d-widget-model-miku display: position: right width: 150 height: 300 mobile: show: true 複製程式碼
其中，live2d.model.use使用來配置對應的萌寵模型，我這邊是live2d-widget-model-miku
看一下效果吧
新增網站執行時間
前言
可以實時展示自己的部落格的執行時間，還是蠻有成就感的。
整合
在 hexo/themes/yelee/layout 資料夾下找到你的 footer 檔案，即腳佈局檔案，在對應的位置新增一下程式碼。
<span id="timeDate">載入天數...</span><span id="times">載入時分秒...</span>
<script>
var now = new Date();
function createtime() {
var grt= new Date("02/14/2018 12:49:00");//此處修改你的建站時間或者網站上線時間
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "本站已安全執行 "+dnum+" 天 ";
document.getElementById("times").innerHTML = hnum + " 小時 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()",250);
</script>
複製程式碼
執行效果
