随着移动互联网的飞速发展,人们对于网页打开速度的要求越来越高。而Zblog作为一款优秀的博客系统,也需要不断地适应市场需求,在保证功能齐全的同时提高用户体验。本文将介绍如何使用Zblog实现全站PJAX局部刷新,从而让你的博客页面加载更快。
创新互联公司于2013年成立,是专业互联网技术服务公司,拥有项目网站制作、成都网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元冷水滩做网站,已为上家服务,为冷水滩各地企业和个人服务,联系电话:13518219792
首先我们来了解一下什么是PJAX(PushState + AJAX)技术。它可以使得页面能够在不重载整个页面情况下更新内容和链接地址栏,并且允许浏览器前进后退按钮正常工作。这样就避免了每次请求都重新渲染整个页面带来的延迟和性能问题。
目前Zblog已经内置了两种常用PJAX插件:OnePjax 和 Pjax4zBlog 2.0 。其中 OnePjax 是基于 jQuery 的 PJAX 插件;而 Pjax4zBlog 2.0 是专门针对 Zblog 开发并修改过源码以适应 ZBLOG 特殊需求的 PJAX 插件。这两个插件都可以实现全站PJAX局部刷新,但是具体使用方法略有不同。
首先我们需要在主题目录下找到header.php文件,在
标签中添加以下代码:$(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 刷新内容所在区域。timeout 表示超时时间(毫秒),如果请求超过此时间则停止请求并提示错误信息。NProgress 是一个进度条插件,用于显示页面加载进度。
与 OnePjax 不同的是,Pajax4zBlog 2.0 已经内置在 Zblog 中,不需要额外下载和安装。我们只需要在后台设置中启用即可。具体步骤如下:
1. 登录Zblog后台,进入“全局设置”-“网站基本信息”,将 PJAX 开关打开。
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 刷新内容所在区域。timeout 表示超时时间(毫秒),如果请求超过此时间则停止请求并提示错误信息。
1. PJAX 技术需要浏览器支持 HTML5 History API 和 pushState 方法,请确保你的主题支持这两个方法;
2. 为了兼容性,在使用 PJAX 技术时应该尽量避免使用 document.write()、window.location.replace() 等会改变页面 URL 的操作;
3. 如果你的网站有一些特殊需求(如异步加载广告等),可以在链接中添加一个 class="no-pjax" 属性来禁用 PJAX;
通过本文介绍的方法,我们可以轻松地实现全站PJAX局部刷新功能,并且不影响原有功能和用户体验。这样能够有效提高网页打开速度和用户满意度。希望本篇文章对大家有所帮助!
当前文章:Zblog全站PJAX局部刷新的方法——让网页加载速度更快
URL标题:http://www.shufengxianlan.com/qtweb/news20/285220.html
网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联