简单聊聊Pjax是如何整合进网站,实现全站无刷新加载的

talklee

温馨提示:这篇文章已超过1624天没有更新,请注意相关的内容是否还可用!

曾几何时Pjax很是盛行,但是近几年并没有特别大的动静,可能不想https那么刚需吧,我之前也没有研究过pjax,毕竟对于当时来说算是一门新技术,但是由于需要的人很多,做过一款Pjax的主题,就是brieflee,但是后期因为与某些插件不兼容也就未在继续更新。要说Pjax就目前ZBP而言,个人认为做的比较出色的就是小峰博客了,我之前的Pjax也是使用他网站的封装的JS代码。因为Pjax对收录不是很友好,大型网站还是不建议使用的,如果有技术大牛在,可以不影响收录又能实现pjax功能还是很牛掰的,最好是小型个人博客尝试体验,最新的微博秀主题刚刚实现这一功能,需要的朋友可以去体会下,今天简单聊聊Pjax是如何整合进网站,实现全站无刷新加载的。

简单聊聊Pjax是如何整合进网站,实现全站无刷新加载的 第1张

pjax工作原理

pjax 的实现是利用 HTML5 的 pushState() 和 replaceState() 新特性和 ajax 结合实现。pushState() 和 replaceState() 用来操作 State(状态)对象,即可添加和修改历史记录,进而更新 url 和提供前进、后退操作 ajax 实现数据的异步加载进而局部刷新。

准备工作

p了解pjax的工作原理之后,就要开始用它了!但是我们要写一套复杂的js去pushState么?答案是不需要的,已经有人封装好了JqueryPjax插件,我们只需用人家写好的插件即可。由于这款插件依赖于jquery,又依赖jq去操作pushState,所以必须下载1.7版本以上的JQ,当然ZBP已经是1.7以上的版本了,可以忽略这步,至于封装好的Pjax,可以前往百度云下载(封装pjax源自小峰博客):

链接: https://pan.baidu.com/s/1nk47gNXZplKIx2ZtJH6KXw
提取码: frkb 

下载完js代码,我们需要修改一下:

$(function() {
  $(document).pjax('a[target!=_blank]:not(.gn_nav li.nav_sub a,.gn_nav>li a)', '#WB_pjax', {fragment:'#WB_pjax', timeout:8000, scrollTo: false});
	$(document).on("submit",  function(a) {
		$.pjax.submit(a, "#WB_pjax", {
			fragment: "#WB_pjax",
			timeout: 6000,
      scrollTo: false
		})
	});
	$(document).on('pjax:send', function() {
		$(".pjax_loading").show();
	});
	$(document).on('pjax:complete', function() {
		WB_pjaxafter();
		prism_pjaxafter();
		if ($(".pjax_loading").hide());
	});
});

其中:.gn_nav li.nav_sub a,.gn_nav>li a ,代表不需要封装的页面链接,例如微博为主题顶部的登录,点击登录需要在后台实现,所以不能在pjax里面重新封装,那么我们就需要把顶部的a链接排除在外,div框架+a标签即可。

然后我们可以看到的是“#WB_pjax”这个是全站DIV容器,如果没有则需要替换你网站的div容器,比如在body内的一个div,如: 

<body>
  <div id="WB_pjax">
    网站内容部分... 
  </div>
</body>

这样就清晰多了是吧。继续,我们会看到“.pjax_loading”这个class,那么这个代码是写在全局底部的,就是启用一个缓冲的作用,在加载新页面的时候,过渡效果,代码如下:

<div class="pjax_loading"></div>
<script src='/jquery.pjax.js'></script>

就酱婶的就行了,如果是ZBP的话,放在footer模板文件里,如果用的是我的主题,那么写在“主题设置-广告设置-脚本代码接口(非广告代码)”接口里就行,哦,对了“jquery.pjax.js”目录地址需要自己上传,然后换成自己的目录地址就行了。

顺便把样式给大家,仅供参考:

/*pjax*/ 
.pjax_loading{position: fixed;top: 0;left: 0;z-index: 999999;display: none;width: 100%;height: 100%;background-color: #2C3E50;opacity: 0.88;background: url('images/pjax_loading.gif') #fff 50% 50% no-repeat;}

然后看见:

//重载
function WB_pjaxafter(){
  $(function() {
    重载JS代码
  });
}

上面的事情做完了,需要把我们常用的js重新封装加载,具体重载哪些代码因站而议,无法统一,这里不做演示,后续我会把“梦想家”和“锦鲤”主题封装好的js代码放在百度云,需要的自行下载,放在接口就能使用了。

好了,此时大功告成!

文章版权声明:除非注明,否则均为李洋个人博客原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
评论列表 (暂无评论,7304人围观)

还没有评论,来说两句吧...

目录[+]