hexo+NexT博客最新定製記錄

最近對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 ... %}

這裏展現一個上海陸家嘴變化的視頻。

{% dplayer "url=http://blog.gisersqdai.top/shanghaiurbandevlopment.mp4" "api=https://api.prprpr.me/dplayer/" "pic=http://blog.gisersqdai.top/shud.jpg" "id=9E2E3368B56CDBB4" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}

3 pdf預覽

以防之後展現ppt和論文等功能，這裏添加一個pdf預覽功能。也是先安裝插件。

npm install --save hexo-pdf

使用方法以下：

正常的pdf（有直鏈）。

{% pdf http://xxx.pdf %}

或者

{% pdf ./xxx.pdf %}

此外也能夠用google drive和slideshare。

這裏顯示下以前的一篇論文。

{% pdf "http://gisersqdai.top/mycv/201702.pdf" %}

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

參考連接：

1.reuixiy.github.io

2.hexo 添加視頻播放功能

3.HEXO建站備忘錄

4.Website FAQ

5.hexo 添加插入 pdf 功能

6.Hexo next主題下添加天氣插件