前言
之前搭建的博客基本功能已經實現了,現在就折騰著好好維護一下我的博客了,于是參考著別人的博客添加一些小功能,并且整理了下來。
新搭建的博客的默認主題都是landscape
,我的主題是基于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: 2017-12-03 00:00:00
---
<Excerpt in index | 首頁摘要>
<!-- more -->
<The rest of contents | 余下全文>
方法二: description
in Front-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:1287530995@qq.com"
#新浪微博: "sina weibo"
GitHub: https://github.com/nullcxy
#V2EX: "#"
#RSS: "/atom.xml"
設置 Email 時保留
mailto:
可考慮加密郵件地址 http://ctrlq.org/encode/
使用 RSS 需先安裝對應插件 https://github.com/hexojs/hexo-generator-feed
網站成立年份
themes/yelee/_config.yml
背景參數:
since: 2016
默認為
2016
,若填入年份小于當前年份,則顯示為2016-2018
類似的格式
背景圖片
背景圖文件所在路徑:
/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: 2017-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></section>里面。
<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>
運行效果