最近對hexo和NexT部落格又做了一次定制。
1 增加clustrmaps
這回在部落格裡增加一個clustrmaps的地球點選效果,之前嘗試了下,失敗了,這回成功顯示了。這個功能需要先在這個
網頁注冊。效果如圖:

後面隻需要把對應的代碼添加到檔案中。有人推薦放到這個路徑下:themesnextlayout_partialsfooter.swig。這個是放在底部的,最後我是放在了側邊欄下。側邊欄的路徑為themesnextlayout_customsidebar.swig。也有人放在themesnextlayout_partialsheader.swig。但這個路徑不适合我目前這個NexT的樣式。
2 視訊播放
增加了一個視訊播放的功能,首先先安裝dplayer。
npm install hexo-tag-dplayer --save
然後使用方法如下,給一個樣例。詳細文檔參見
官方位址{% dplayer key=value ... %}
3 pdf預覽
以防以後展示ppt和論文等功能,這裡添加一個pdf預覽功能。也是先安裝插件。
npm install --save hexo-pdf
使用方法如下:
正常的pdf(有直鍊)。
{% pdf http://xxx.pdf %}
或者
{% pdf ./xxx.pdf %}
此外也可以用google drive和slideshare。
4 增加天氣卡片
增加了一個右上角的天氣卡片。效果如圖。
首先在這個
頁面注冊。然後在這裡輸入名稱生成代碼。
最後放到themesnextlayout_customheader.swig中。
5 主題自定義設計
主要是做了背景圖切換之類的設定,比較簡單。參照以下的這個修改的。檔案為themesnextsourcecss_customcustom.styl。
https://github.com/reuixiy/reuixiy.github.io/blob/master/custom.styl6 月曆雲功能
需要先安裝插件。
npm install --save git://github.com/icecory/theme-next-calendar#hexo
由于我是參考YouForever的部落格進行修改的,外加我的NexT是在5.X版本,是以這裡就沒有直接從icecory的Github倉庫git clone。我使用的月曆雲檔案請從
這裡下載下傳
接着就是修改配置檔案。檔案夾裡一共四個檔案。分别是CloudCalendar.swig,CloudCalendar.styl,CloudCalendar.js,languages.js。第一個swig檔案請放在themesnextlayout_third-party中,第二個styl檔案請放在themesnextsourcecss_commoncomponentsthird-party中,加下來在themesnextsourcelib裡建立一個檔案夾CloudCalendar,然後把剩下兩個js檔案放在該檔案夾下。
下一步在檔案themesnextsourcecss_commoncomponentsthird-partythird-party.styl的最後加入:
@import "CloudCalendar" if hexo-config('CloudCalendar.enable');
在檔案themesnextlayout_layout.swig的最後加入:
{% include '_third-party/CloudCalendar.swig' %}
在主題配置檔案config.yml 中加入:
# 月曆雲
CloudCalendar:
enable: true
language: zh-CN
single: true
root: /calendar/
在以上工作完成後,最後一步就是把月曆雲放在指定位置。這個倒是比較泛。根據需求放置。
<!-- CloudCalendar -->
<div class="widget-wrap" style="width: 90%;margin-left: auto;margin-right: auto; opacity: 0.97;">
<div class="widget" id="CloudCalendar"></div>
</div>
我是放在側邊欄。也就是themesnextlayout_macrosiderbar.swig的檔案夾中,具體位置如下圖。
并且根據這個我調整了詞雲的大小,使得側邊欄會舒服一些。效果如下:
7 右上角Fork me改版
在
這個網址找到最新的版本,替換原來的代碼。效果如圖。
8 Valine擴充郵件通知
這裡在前文Valine的基礎上擴充郵件通知。這裡使用的是國内大神擴充的
Valine-admin。
首先進入到leancloud的應用頁面裡,點選雲引擎→設定。填寫這個倉庫名:
https://github.com/DesertsP/Valine-Admin.git接下來設定雲引擎的環境變量,這個變量說明請參照
文檔QQ的授權碼設定見
官方說明,
163郵箱的設定也是類似,提醒:請選用用于注冊leancloud的郵箱。
并且設定二級域名和注冊管理者賬戶。
注冊管理者賬戶即在二級域名後面加/sign-up,如果無法跳轉,删除user裡的所有賬戶即可。
切換到部署标簽頁,點選git源碼部署,分支選master。接着經曆過一段時間,出現如下頁面。
後面設定個定時任務既可以。參照上面的文檔即可。
9 将部落格同時部署到國内伺服器
首先先配置伺服器上git環境。
apt-get install git
然後設定Linux上一個賬号為git,進行配置。
useradd git
password git #設定密碼,自己輸入
mkdir /home/git #建立git檔案夾
chown git:git /home/git #設定git權限
su git #切換git賬戶
cd /home/git #切換路徑
mkdir -p projects/blog #建立項目的目錄
mkdir repos && cd repos #建立并切換至倉庫的目錄
git init --bare blog.git #建立倉庫
vim ./blog.git/hooks/post-receive #用vim建立鈎子函數
vim編輯器基本操作,需要先按i,進入插入編輯模式,然後即可開始編輯。編輯結束後,需要先按esc鍵,然後輸入:wq表示儲存并退出。輸入内容如下。
#!/bin/sh
git --work--tree=/home/git/projects/blog --git-dir=/home/git/repos/blog.git checkout -f
接着添加各類權限。
chmod +x ./blog.git/hooks/post-receive #添加執行權限
exit #回到根目錄
chown -R git:git /home/git/repos/blog.git #添權重限
以上做完後,在電腦上找一個檔案夾,測試是否能從伺服器上拉下來檔案。
git clone git@server_ip:/home/git/repos/blog.git
利用這個語句測試,如果能拉下來空的檔案夾,說明成功了。
接下來先部署nginx,nginx的安裝和基本配置見我之前的部落格:
阿裡雲安裝nginx配置網站這裡弄下nginx的配置檔案。
然後啟動nginx。
後續的操作參照這幾篇部落格:
優化hexo通路速度-将hexo部署到雲主機VPS,
Hexo部落格部署到阿裡雲伺服器 Hexo + Github/Vps部署你的個人部落格10 DaoVoice線上聊天功能
這個需要現在
這個網站注冊,但是需要邀請碼,邀請碼請去參考連結後面檢視。接着利用app id做些配置即可以實作線上聊天功能。但是我目前覺得評論就夠了,是以這塊我後面放棄了。如果有需要的同學可以參考後面的連結。
參考連結:
1.
reuixiy.github.io2.
hexo 添加視訊播放功能3.
HEXO建站備忘錄4.
Website FAQ5.
hexo 添加插入 pdf 功能6.
Hexo next主題下添加天氣插件7.
給hexo部落格的NEXT主題添加一個雲月曆8.
Hexo月曆插件9.
分享一個精緻實用的HEXO部落格小插件:月曆雲10.
添加月曆雲挂件-hexo小書11.
theme-next-calendar12.
hexo-next 主題添加月曆雲13.
Hexo 優化 --- Valine 擴充之郵件通知14.
zhaojun1998/Valine-Admin15.
Valine Admin 配置手冊16.
hexo 部落格添加 Valine 評論系統17.
18.
19.
Hexo部落格Next主題DaoVoice實作線上聯系20.
Hexo部落格添加線上聯系功能21.
hexo的next主題個性化教程:打造炫酷網站22.
Hexo NexT主題美化2.0