研究了半天才研究了出了這個方法,上百度查了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.cvhabu.tw/zb_users/upload/201905/jquery.js" type="text/javascript"></script>
<script src="http://www.cvhabu.tw/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.cvhabu.tw/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