hexo+NexT博客最新定制记录

大兔子大兔子 提交于 2019-12-24 01:10:10

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!