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站视频展示

希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦

有好的文章也可以向博主投稿哦