新聞中心
隨著移動(dòng)互聯(lián)網(wǎng)的飛速發(fā)展,人們對(duì)于網(wǎng)頁(yè)打開(kāi)速度的要求越來(lái)越高。而Zblog作為一款優(yōu)秀的博客系統(tǒng),也需要不斷地適應(yīng)市場(chǎng)需求,在保證功能齊全的同時(shí)提高用戶體驗(yàn)。本文將介紹如何使用Zblog實(shí)現(xiàn)全站PJAX局部刷新,從而讓你的博客頁(yè)面加載更快。

創(chuàng)新互聯(lián)公司于2013年成立,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命,1280元冷水灘做網(wǎng)站,已為上家服務(wù),為冷水灘各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792
什么是PJAX?
首先我們來(lái)了解一下什么是PJAX(PushState + AJAX)技術(shù)。它可以使得頁(yè)面能夠在不重載整個(gè)頁(yè)面情況下更新內(nèi)容和鏈接地址欄,并且允許瀏覽器前進(jìn)后退按鈕正常工作。這樣就避免了每次請(qǐng)求都重新渲染整個(gè)頁(yè)面帶來(lái)的延遲和性能問(wèn)題。
Zblog支持哪些PJAX插件?
目前Zblog已經(jīng)內(nèi)置了兩種常用PJAX插件:OnePjax 和 Pjax4zBlog 2.0 。其中 OnePjax 是基于 jQuery 的 PJAX 插件;而 Pjax4zBlog 2.0 是專門(mén)針對(duì) Zblog 開(kāi)發(fā)并修改過(guò)源碼以適應(yīng) ZBLOG 特殊需求的 PJAX 插件。這兩個(gè)插件都可以實(shí)現(xiàn)全站PJAX局部刷新,但是具體使用方法略有不同。
OnePjax的使用方法
首先我們需要在主題目錄下找到header.php文件,在
標(biāo)簽中添加以下代碼:$(document).pjax('a[target!=_blank]', '#content', {
fragment: '#content',
timeout: 8000
});
$(document).on('pjax:start', function() {
NProgress.start();
$(document).on('pjax:end', function() {
NProgress.done();
$host 表示博客地址,#content 是指定 Pjax 刷新內(nèi)容所在區(qū)域。timeout 表示超時(shí)時(shí)間(毫秒),如果請(qǐng)求超過(guò)此時(shí)間則停止請(qǐng)求并提示錯(cuò)誤信息。NProgress 是一個(gè)進(jìn)度條插件,用于顯示頁(yè)面加載進(jìn)度。
Pjax4zBlog 2.0 的使用方法
與 OnePjax 不同的是,Pajax4zBlog 2.0 已經(jīng)內(nèi)置在 Zblog 中,不需要額外下載和安裝。我們只需要在后臺(tái)設(shè)置中啟用即可。具體步驟如下:
1. 登錄Zblog后臺(tái),進(jìn)入“全局設(shè)置”-“網(wǎng)站基本信息”,將 PJAX 開(kāi)關(guān)打開(kāi)。
2. 在主題的 header.php 文件中添加以下代碼:
$(document).ready(function() {
var cur_url = window.location.href.split('?')[0];
$('a').each(function(){
if($(this).attr('href') != undefined && $(this).attr('target') != '_blank' && !$(this).hasClass('no-pjax')) {
var href = $(this).attr('href').split('?')[0];
if(href == cur_url) {
$(this).addClass('current');
}
else{
$(this).removeClass('current');
}
});
bindPjax();
});
function bindPjax() {
$('a:not(.no-pjax)').on("click", function(event){
event.preventDefault();
$.pjax({
url: this.href,
container: '#content',
fragment:'#content',
timeout:8000
})
})
}
$host 表示博客地址,#content 是指定 Pjax 刷新內(nèi)容所在區(qū)域。timeout 表示超時(shí)時(shí)間(毫秒),如果請(qǐng)求超過(guò)此時(shí)間則停止請(qǐng)求并提示錯(cuò)誤信息。
注意事項(xiàng)
1. PJAX 技術(shù)需要瀏覽器支持 HTML5 History API 和 pushState 方法,請(qǐng)確保你的主題支持這兩個(gè)方法;
2. 為了兼容性,在使用 PJAX 技術(shù)時(shí)應(yīng)該盡量避免使用 document.write()、window.location.replace() 等會(huì)改變頁(yè)面 URL 的操作;
3. 如果你的網(wǎng)站有一些特殊需求(如異步加載廣告等),可以在鏈接中添加一個(gè) class="no-pjax" 屬性來(lái)禁用 PJAX;
通過(guò)本文介紹的方法,我們可以輕松地實(shí)現(xiàn)全站PJAX局部刷新功能,并且不影響原有功能和用戶體驗(yàn)。這樣能夠有效提高網(wǎng)頁(yè)打開(kāi)速度和用戶滿意度。希望本篇文章對(duì)大家有所幫助!
本文名稱:Zblog全站PJAX局部刷新的方法——讓網(wǎng)頁(yè)加載速度更快
瀏覽路徑:http://m.fisionsoft.com.cn/article/cdgodee.html


咨詢
建站咨詢
