Next主题插件笔记

本文记录我在使用Next主题过程中重点关注的插件/功能,包括Hexo-tag-aplayer,Fastclick,Lazyload,Quicklink,Valine,Chatra等

Hexo-tag-aplayer

基于Aplayer的Hexo音乐播放器。[需手动安装]

Aplayer:https://github.com/MoePlayer/APlayer

Hexo-tag-player:https://github.com/MoePlayer/hexo-tag-aplayer

由于安装Hexo-tag-aplayer会自动安装相关依赖,即自动安装Aplayer和MetingJS到../Hexo/node_modules/所以只需要在/Hexo目录下执行

1
npm install --save hexo-tag-aplayer

然后按照官方说明的语法在页面中加入播放器即可,可以播放自己上传的音乐,也支持网易云和QQ音乐等的歌曲/歌单。

我遇到的问题是以下形式的代码加载不出来歌词文件,先mark一下,还没有找到问题在哪里

1
{% aplayer "歌曲名" "歌手名" "https://music.mp3" "https://封面图.jpg" "lrc:https://歌词.txt" %}

另:附一个可能有用的链接,修复Aplayer导致包含中文的toc目录点击无法跳转的bug:https://blog.wangriyu.wang/2018/06-Aplayer.html

Fastclick

FastClick是一个简单易用的库,用于消除物理点击和click在移动浏览器上触发事件之间300毫秒的延迟。目的是使您的应用程序感觉不那么迟钝和响应更快,同时避免干扰您当前的逻辑。

注意:截至2015年底,大多数移动浏览器(尤其是Chrome和Safari)不再具有300毫秒的触摸延迟,因此fastclick对新浏览器没有任何好处,并且可能会在您的应用程序中引入错误。仔细考虑您是否真的需要使用它。

[需手动安装]Next主题官方支持的安装方式:https://github.com/theme-next/theme-next-fastclick

Fastclick插件官方页面:https://github.com/ftlabs/fastclick

可用可不用。我激活了这个插件,目前没有发现问题。

建议不要启用,在移动端会导致Valine评论框点击不灵敏,需要点击两次。

在Next主题配置文件_config.yml里设置:

1
fastclick: true

Lazyload

延迟加载长网页中的图像。在用户窗口没有滚动到图片所在位置前,将不会加载图像。这与图像预加载相反,对于图片多的页面尤其有效。

[需手动安装]

Next主题官方支持的安装方式:https://github.com/theme-next/theme-next-jquery-lazyload

Lazyload插件官方页面:https://github.com/tuupola/lazyload

安装方法:在/Hexo目录下执行

1
git clone https://github.com/theme-next/theme-next-jquery-lazyload source/lib/jquery_lazyload

然后在Next主题配置文件_config.yml里设置:

1
lazyload: true

通过在空闲时间预取视口内链接,加快后续页面加载速度。说白了就是在用户访问你的网站的某个网页时,顺便预加载你设定的几个页面,提前缓存下来

[需手动安装]

Next主题官方支持的安装方式:https://github.com/theme-next/theme-next-quicklink

Quicklink插件官方页面:https://github.com/GoogleChromeLabs/quicklink

推荐安装。

安装方法:在/Hexo目录下执行

1
git clone https://github.com/theme-next/theme-next-quicklink.git source/lib/quicklink

然后在Next主题配置文件_config.yml里设置:

1
2
3
4
5
quicklink:
enable: true

home: true
archives: true

把需要预加载的页面设为为true即可。

实测发现这个还是很有效果的

Valine

[Next原生支持]

官网:https://valine.js.org/

借助于国内的Leancloud实现,速度有保证。

这个评论插件是我强烈推荐的,Next主题原生支持,配置详见Next主题配置文件_config.yml的Valine选项

Chatra

[Next原生支持]

在线聊天/留言工具。官网:https://chatra.io/cn/

在Next主题配置文件_config.yml的Chatra选项中启用和配置

我用了两天,网络连接倒是没问题。感觉有点儿花里胡哨,比较占用加载时间,还好不怎么影响网页首屏时间。如果你的博客没有多少人发消息给你,就别用了吧,个人认为这个是不需要炫的技。(即使发了,多半也只是试一下为了好玩,实际价值不大)

阅读量/访问量统计

[Next原生支持]

最好还是用基于Leancloud的统计插件,保证稳定性。

然而Next原生支持的leancloud_visitors好像是只支持文章阅读量统计,没有网站访问量统计的选项。

所以busuanzi_counthttp://busuanzi.ibruce.info/)可以用来统计网站访问量,只是我ping了一下它的域名,发现服务器在美国,(其实也完全ok啦)

但是我在启用后,在控制台把busuanzi.pure.mini.js保存下来放到了网站服务器上,并在busuanzi-counter.swig里修改了js来源:

1
2
3
- <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

+ <script async src="https://www.dovins.com/js/busuanzi.pure.mini.js"></script>

这个插件直接在Next主题配置文件_config.yml中启用即可。

一些有趣的插件

Tag-plugins: https://theme-next.org/docs/tag-plugins/

Tag Plugin是一种使Hexo支持特殊样式内容的方法

PDF在线阅读插件: https://github.com/theme-next/theme-next-pdf

这是一个允许在博客页面中预览PDF文件的插件

hexo-related-popular-posts: https://github.com/tea3/hexo-related-popular-posts

可生成相关文章和热门文章的链接列表。此外,此插件可以在帖子上获得访客计数(PV)。

另外,可以在https://github.com/theme-next里找到Next主题官方适配过的插件。

也可以在Hexo官网查找插件:https://hexo.io/plugins/

写在最后

①尽量不要追求花里胡哨的效果。静态网站≠随心所欲,不要引入过多的js或者静态资源,这会拖慢网页的响应速度。

②任何新插件可能会带来意想不到的问题,所以要精挑细选,认真配置插件,并仔细检视你的网站各部分的显示和功能是否正常,有问题的插件请果断弃用。

0%