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主题下添加天气插件