Hexo给materialX主题添加pjax支持
pjax
pjax = pushState + ajax
博主使用的是jquery-pjax是一个jQuery插件,它使用ajax和pushState通过真正的永久链接,页面标题和工作后退按钮提供快速浏览体验。
pjax的工作原理是通过ajax从服务器获取html,并用ajax请求得到 html替换页面上容器的内容。然后,它使用pushState更新浏览器的当前URL,而无需重新加载页面的布局或任何资源(JS,CSS),从而提供快速,完整页面加载的外观。但实际上它只是ajax和pushState。
主题materialX
咳咳,主题好不好,主要看自己喜欢。我这里就只是简单的介绍下:
一个简约卡片式的Hexo博客主题 MaterialXoxuu.com/wiki/material-x/ 是博主xaoxuu基于Material Flow(已停止维护)改编的一个Hexo主题。
我选择这个主题作为教程嘛也是有原因的,它的页面框架比较适合进行pjax修改(next的有款主题也挺适合,自行琢磨)
主题的一些下载安装使用啊这就不做介绍了。主要说下添加pjax支持的过程:
完整的修改代码在github(照自己喜好多改了些其他东西),以下是几个关键的几个修改内容列一下:
第一步:添加id
位置materialX\layout\layout.ejs
第二步:引入js
先把js文件放在\materialX\source\js\jquery.pjax.min.js
再在\materialX\layout_partial\scripts.ejs引入js(注意需要jquery支持)
在\materialX\source\js\app.js该js文件开头加入pjax代码:(这是一些页面特效等js控制的会失效,需要在pjax后在再处理一些,异步通病)
第三步:修改样式
在\materialX\source\less_base.less这个文件中有个visibility: hidden;会把首页隐藏掉,给他注释了,没有深究。想弄明白可以询问原作者xaoxuxu
完成
咳咳!只能说脸好的情况下pjax功能是实现了的,毕竟这是个看脸的时代。
优化完善
交给广大materialX主题使用者们啦~~
推荐一个hexo主题博客flysay,可能是hexo第一个支持pjax的主题@(献黄瓜),而我改的这个吗,不知道第几~@(调皮)
B站视频展示
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦
您的喜欢是作者写作最大的动力
QQ群和公众号