研究了半天才研究了出了这个方法,上百度查了5个小时,都没有一个切实有用的。

网上现有的教程,不是少这段代码,就是少那段代码,东拼西凑出来是牛头马面的东西,坑!全然没有diao用!

还是最后我下载了一个Zblog的PJAX模板,自己慢慢扒出来的,按道理这个是方法是通用的。

以前写过一个Emlog的PJAX教程,当时也是一知半解,虽然依葫芦画瓢做出来了全站jpax,但站点内还存在一定程度的错误今天才解决。

本教程需要参考以下文章:

1.《Emlog无刷新翻页加载教程

2.《一些Loading(加载)动画效果

3.《两个pjax的loading的css代码


一、首先是header部分,需要引用两个js和一段css代码:

a.两段引用,引用在网页<title>标签前;

<!--PJAX header-->	
<script src="http://www.aswait.com/zb_users/upload/201905/jquery.js" type="text/javascript"></script>
<script src="http://www.aswait.com/zb_users/upload/201905/pjax.js" type="text/javascript"></script>

b.一段css,引用在网站的style.css内,更多方法、方式参见引用的第二、三篇文章;

.pjax_loading {position: fixed;top: 0;left: 0;z-index: 999999;display: none;width: 100%;height: 100%;background-color: #4c4c4c;opacity: 0.3;background: url('images/wpgo_loading.gif') #4c4c4c 50% 50% no-repeat;}

另一个封装一下:

<link href="http://www.aswait.com/zb_users/upload/201905/pjax.css" rel="stylesheet" type="text/css" />

二、在<body>标签下方插入<div>标签,</div>自己看着办

<body>
<div id="all">


三、在</body>上方添加以下代码

<!--PJAX footer-->
<div class="pjax_loading"></div>
<script>
    $(document).pjax('a[target!=_blank]', '#all', {fragment:'#all', timeout:8000});
	$(document).on('pjax:send', function() {
		$(".pjax_loading").css("display", "block");
	});
	$(document).on('pjax:complete', function() {
		$(".pjax_loading").css("display", "none");
		pajx_loadDuodsuo();
	});
	function pajx_loadDuodsuo(){
		var dus=$(".ds-thread");
		if($(dus).length==1){
			var el = document.createElement('div');
			el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));
			el.setAttribute('data-url',$(dus).attr("data-url"));
			DUOSHUO.EmbedThread(el);
			$(dus).html(el);
	   }
	}
</script>
<script>
$(document).on("submit", "form", "btnPost",
function(a) {
    $.pjax.submit(a, "#all", {
        fragment: "#all",
        timeout: 8000
    })
});
</script>

参数解释:
a[target!=_blank]:绑定本页面非新窗口打开的所有链接
#all:链接点击之后,仅仅更新#all容器的内容,页面其他内容不变,需自行修改这个参数
fragment:‘#contentleft‘:#contentleft选择器的碎片从Ajax响应提取
timeout:8000:Ajax超时时间为8秒,如果未响应则直接刷新网页
(不要考虑那么多,也不要修改,实在不行直接引用)


四*、在</body>下方插入你的音乐播放器

<!--music-->
<div id="contentleft"><script src="https://free.limh.me/api/player.php?id=79588724&jq=y&font=y" type="text/javascript"></script></div>

音乐插件获取地址:https://free.limh.me