最近對hexo和NexT博客又做了一次定製。
文章目錄
1 增加clustrmaps
這回在博客裏增加一個clustrmaps的地球點擊效果，之前嘗試了下，失敗了，這回成功顯示了。這個功能需要先在這個網頁註冊。效果如圖：
後面只需要把對應的代碼添加到文件中。有人推薦放到這個路徑下：themes\next\layout_partials\footer.swig。這個是放在底部的，最後我是放在了側邊欄下。側邊欄的路徑爲themes\next\layout_custom\sidebar.swig。也有人放在themes\next\layout_partials\header.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 增加天氣卡片
增加了一個右上角的天氣卡片。效果如圖。
首先在這個頁面註冊。然後在這裏輸入名稱生成代碼。
最後放到themes\next\layout_custom\header.swig中。
5 主題自定義設計
主要是做了背景圖切換之類的設置，比較簡單。參照以下的這個修改的。文件爲themes\next\source\css_custom\custom.styl。
https://github.com/reuixiy/reuixiy.github.io/blob/master/custom.styl
6 日曆雲功能
需要先安裝插件。
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文件請放在themes\next\layout_third-party\中，第二個styl文件請放在themes\next\source\css_common\components\third-party\中，加下來在themes\next\source\lib裏新建一個文件夾CloudCalendar，然後把剩下兩個js文件放在該文件夾下。
下一步在文件themes\next\source\css_common\components\third-party\third-party.styl的最後加入：
@import "CloudCalendar" if hexo-config('CloudCalendar.enable');
在文件themes\next\layout_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>
我是放在側邊欄。也就是\themes\next\layout_macro\siderbar.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做些配置即可以實現在線聊天功能。但是我目前覺得評論就夠了，所以這塊我後面放棄了。如果有需要的同學可以參考後面的鏈接。
參考鏈接：
8.Hexo日曆插件
