PHP全站pjax影响收录,typecho实现pjax全站加速

pushState + ajax = pjax 带来最直观的效果是整个网站变成单页应用。这样的效果将会极大的提升用户体验,并且可以减少https的请求的次数和内容。使用github上面的一个开源项目defunkt/jquery-pjax 可以很轻松的帮助我们实现pjax。

需要具备基础的html& javascript 知识。如果你连div和script标签仍然不认识,请忽略该篇文章。

a69e8cab74d4f3a0967cb4d9e8a42f4a.png

引入js

在header.php或者footer.php中添加下面代码

注意顺序,不能错哦!

实现代码

//pjax 刷新

$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', {

container: '#pjax-container',

fragment: '#pjax-container',

timeout: 3000

}).on('pjax:send',

function() {

NProgress.start();//加载动画效果开始

}).on('pjax:complete',

function() {

NProgress.done();//加载动画效果结束

imageeffct();//灯箱函数重载

setupContents();//某个函数重载

lue();//lue函数重载

reHighlightCodeBlock();//代码高亮函数重载

if ($('.ds-thread').length > 0) { if (typeof DUOSHUO !== 'undefined') DUOSHUO.EmbedThread('.ds-thread'); else $.getScript("https://www.ihewro.com/duoshuo/embedhw4.min.js"); }

});//多说模块重载

代码说明selector 给哪些selector绑定pjax事件,一般的为:"a", 如果要去掉一些外连的URL, 这里的selector可以为: "a[href^='

[container] 内容变换容器,是指哪个容器里的内容发生的变换,如: '#pjax-content'。就是页面中只刷新的这个部分。

options 官方文档提供了更多的选项,以便更好地自定义选项。具体查考官方文档。以下列出我使用的一些选项。container 替换的容器的css选择器。填你的替换容器ID即可。

timeout 超时就会被迫页面就会完全刷新,单位毫秒。

fragment 这个作为整个pjax框架,必须写上。

<?php Helper::options()->siteUrl()?>是typecho的自带函数,调用本站的首页地址!也就是只对本站的,并且没有_blank属性的,标签里不含no-pjax的链接实行pjax!局部刷新的区域是#pjax-container的部分!

a07bc16f155ce6b498f5d4b21690506c.png

版权属于:逍遥子大表哥

按照知识共享署名-非商业性使用 4.0 国际协议进行许可,转载引用文章应遵循相同协议。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值