跳转到帖子
  • 游客您好,欢迎来到黑客世界论坛!您可以在这里进行注册。

    赤队小组-代号1949(原CHT攻防小组)在这个瞬息万变的网络时代,我们保持初心,创造最好的社区来共同交流网络技术。您可以在论坛获取黑客攻防技巧与知识,您也可以加入我们的Telegram交流群 共同实时探讨交流。论坛禁止各种广告,请注册用户查看我们的使用与隐私策略,谢谢您的配合。小组成员可以获取论坛隐藏内容!

    TheHackerWorld官方

typecho实现pjax全站加速


Ken1Ve

推荐的帖子

pushState + ajax = pjax 带来最直观的效果是整个网站变成单页应用。这样的效果将会极大的提升用户体验,并且可以减少https的请求的次数和内容。使用github上面的一个开源项目defunkt/jquery-pjax 可以很轻松的帮助我们实现pjax
需要具备基础的html & javascript 知识。如果你连divscript标签仍然不认识,请忽略该篇文章。

PJAX.jpg

引入js

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

<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery.pjax/1.9.6/jquery.pjax.min.js"></script>

注意顺序,不能错哦!

实现代码

<script>
//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^='http://www.ihewro.com']"
  • [container] 内容变换容器,是指哪个容器里的内容发生的变换,如: '#pjax-content'。就是页面中只刷新的这个部分。

options 官方文档提供了更多的选项,以便更好地自定义选项。具体查考官方文档。以下列出我使用的一些选项。

  • container 替换的容器的css选择器。填你的替换容器ID即可。
  • timeout 超时就会被迫页面就会完全刷新,单位毫秒。
  • fragment 这个作为整个pjax框架,必须写上。

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


版权属于:逍遥子大表哥

本文链接:https://blog.bbskali.cn/499.html

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

链接帖子
意见的链接
分享到其他网站

黑客攻防讨论组

黑客攻防讨论组

    You don't have permission to chat.
    • 最近浏览   0位会员

      • 没有会员查看此页面。
    ×
    ×
    • 创建新的...