Hexo自定义主题(六)
1.文章置顶
只需要重写index生成器就可以了,在主题的scripts文件夹下的某个js文件中添加(hexo启动时会自动执行该文件夹下的所有js文件)
1 | var pagination = require('hexo-pagination'); |
然后在需要置顶的文章中,添加top属性,top值的大小决定了置顶的顺序。
或者直接修改scaffolds文件夹中的post.md,添加top属性,为所有新建的文章添加top属性。
2.添加视频功能
音频就用aplayer,视频就用dplayer,dplayer还支持弹幕功能。
1.打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化
2.hexo-tag-aplayer
3.hexo-tag-dplayer
4.MoePlayer/DPlayer
3.简化文章地址
使用hexo这么长时间以来,终于受不了了,默认的路由了。默认的文章路由,是以文章标题来命名的,所以在分享或者是再浏览器中输入的时候,都是会有一长串的百分号,因为文章的中文标题被转义了。
刚开始想到的是以文章的id号为永久链接的默认格式,但是好像会有问题,在执行hexo clean时,文章的id号会被清空,重新生成新的id号了。
后来尝试了新的方式,hexo-abbrlink 插件。
(1) 安装插件
1 | npm install hexo-abbrlink --save |
(2) 修改站点配置文件
1 | # permalink: :year/:month/:day/:title/ |
(3) 执行清理->生成->部署
1 | ## 清理 |
结果可以看出文章的链接已经变成了一串数字了。
查看文章,发现它会在每一篇文章中添加一个属性:abbrlink,通过这个来,生成自定义的路径,其实和使用id号作为文章的永久链接的原理差不多吧,也是需要这么一个唯一值属性。不过,这个插件,就是将需要手动添加的abbrlink属性改成了自动添加的。
注意,安装了这个插件之后,vscode中编辑文章,有时候会文件会突然抽风,编写的文件内容全部都没有了,只剩下了一个abbrlink,刚开始我还以为是我不小心动了触摸板,就用Ctrl+Z恢复了文件,后来多次之后,才发现,原来不是我操作失误,是有人在搞鬼。特别是在同时编辑文件,及开启了hexo s 的情况下
4.新建文章时自动执行脚本
这个需求主要是这么产生的,就是我使用了hexo-abbrlink为每一篇文章生成唯一id号,但是我使用了azure devops 进行自动部署,也就是说,我的hexo g,hexo clean命令都是在远程服务器执行的,这个时候,新建的文章就有可能还没有生成这个abbrlink属性,但是我又需要这个属性,所以我就想,在每一篇文章新建的时候,就自动为其生成abbrlink标签,而不是在执行hexo g的时候再生成。在主题的scripts文件夹下新建hexo_init.js(叫什么无所谓,hexo都会执行到) 具体代码如下:
1 | var rf=require("fs"); |
1.Hexo添加文章时自动打开编辑器 这里提供了监听new事件的方法,创建完文件后,直接打开该文件
2.事件 除了new事件,还有其他的事件:deployBefore、deployAfter、exit、generateBefore、generateAfter
5.随机图片
我网页上加了一个滚动轮播点图片,于是就想着用些好用的获取Bing图片的接口。 我尝试了
- api.vvhan.com (失效了)
- picsum.photos
- source.unsplash.com
1.随机图片API 我暂时用这个进行了配置,出了必应,还有其他的类型比如:美女、风景和动漫。但是我使用这个的时候,总是出不了,或者说带宽很慢,我只能换地址了。
2.一些好的随机图API
3.Bing Pictures Interface | 必应壁纸接口 这个接口返回比较慢
4. 墨涩 / 获取每日必应壁纸的api源码服务
5.Bing每日图片API接口 这个地址也挺快的,可以随机显示不同的照片,最后我选择了这个作为动态图片来使用。(后来失效了)
6.Lorem Picsum 这个接口也挺好的
7.十五个免费随机图片api接口网站[超详细](不定时更新)
8.调用文档 这里有很多的调用接口,我这里选取了Bing的接口。
9.[更新中]随机图片API接口
6.添加广告
自己的博客已经有十几万的阅读量了,虽然很少有人会二次光顾,但是我觉得还是接一个广告吧。
(1) 登陆Adsense
(2) 获取代码
点击广告,获取广告代码,插入到博客的 head 里面就可以了。
(3) 等待审核
我这里审核了好几天,一直没有动静。审核通过之后,也不会有通知的。
(4) 之后就会出现广告了,有些浏览器会屏蔽掉这个广告,或者是自己安装了屏蔽插件,看不到。
7.网站统计
网站统计,就是统计网站的整个的访问情况,比如PV/UV,独立IP等。
1.卜算子
刚开始的时候,我用的是卜算子,直接加入js代码就可以了。
1 | <!--- 引入 --> |
2.百度统计
(1) 登录百度统计平台
(2) 点击使用设置
(3) 创建站点
(4) 获取站点代码,放到自己的网站中即可
3.谷歌统计
(1) 登录谷歌分析平台
(2) 选择行业和其他的信息
(3) 添加媒体资源
(4) 获取代码,并放置到自己的网站中
1.一分钟!不写代码!给网站添加【统计分析】 这是百度统计的接入,但是新版本之后,略微有些区别。
2.百度站长平台和百度统计的区别在哪里?
3.自己建网站怎么添加Google Analytics统计代码查看每日流量 这个挺简单的,写了谷歌统计加入
4.使用入门 百度统计账户类型:站长版账户、站长版账户、客户版账户、移动统计版账户