给Typecho添加pjax的方法,可用来代替InstantClick

尚寂新

最近发现instantclick有一些bug 以前也尝试过让instantclick改变刷新对象,改刷新body为其他这几天就看到了友人C的一篇文章按照他的方案成功的把instantclick换成了pjax 下面分享一下我的方法
pjax = pushState + ajax

准备工作

首先...那就是干掉InstantClick 把footer里相关的引用啊什么的都给删掉,和重载函数部分(建议备份一下这里) 然后删除所有data-no-instant和data-instant的标记如果删的够干净的话 instantclick就从你站点里彻底卸载了
然后准备接入pjax
首先,你需要指定一个需要被重载(刷新)的区域一般是文章展示的地方然后引入jq和相关js 下面是我这里的例子(仅展示body内内容)

 <body>
  <div class="sidebar">
    <!-- 侧栏里的内容 不需要被刷新 -->
  </div>
  <div class="main" id="pjax-container">
    <!-- 主容器 需要被刷新 -->
  </div>
<!-- jQuery引用 -->
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<!-- pjax引入 -->
<script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script>
$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', {
    container: '#pjax-container',
    fragment: '#pjax-container',
    timeout: 8000
})
</script>
</div>
</body>

注:此方案中的pjax依赖jquery 并且jq版本还不能太高(之前我引用的高版本jq结果console爆红还不好使然后去友人C那里一看原来他引用的是低版本2.1.4版本的jq 于是也跟着引用了2333) 必须先引用jq 后引用jquery-pjax 链接可以换成自己的不用cdn公共库也可以
下面复制一下友人C的原文解释一下上面代码框里12-18行的内容

解释一下上面代码：<?php Helper::options()->siteUrl()?>是typecho的自带函数，调用本站的首页地址！也就是只对本站的，并且没有_blank属性的，标签里不含no-pjax的链接实行pjax！局部刷新的区域是#pjax-container的部分！
其中#pjax-container是你的局部刷新部分，你可能没有这个div，你自己在添加一个<div id="pjax-container"></div>包裹住你想局部刷新的部分就行了！

弄完了上面这些之后站点的pjax的基本功能已经弄上了但还是有点东西需要被自定义

加载动画

参考了下友人C的文章我也用的是他原文的方案用的是nprogress来实现进度条的实现如果你想让这个进度条在特定位置展现就把对应div的位置加上id="process-container"的标记就可以了然后对上面代码框上的17行的位置进行拼接拼接后如下

<script>
$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', {
    container: '#pjax-container',
    fragment: '#pjax-container',
    timeout: 8000
}).on('pjax:complete',
function() {
NProgress.done();
//此处可添加其他的pjax完成之后执行的事件
}).on('pjax:send',
function() {
NProgress.configure({ parent: '#process-container' });
NProgress.inc();
$('body').animate({scrollTop:'0'},500);
//此处可添加其他的pjax开始加载时执行的事件
});
</script>

注:14行的目的是加载的时候自动回顶如果不加这个的话在手机阅读的话滚动条会留在上一个页面的滚动条位置造成文章从一半的位置开始阅读
也可以按照这篇文章进行照葫芦画瓢一下虽然是InstantClick的方案稍微改一下就可以具体方法就是在原文的基础上回调函数的写法有一点点差别把上面代码框的第8行内容换成$("#loading").hide();,把第12和13行换成$("#loading").show();就可以其实两者的道理都是一样的就是刷新过程中需要干什么刷新完了的时候需要做些什么

重载代码

重载代码的插入位置大家应该从上面看出来了就是对应第9行注释的那个位置上
jquery-pjax和instantclick他们俩的本质都是应用了pjax刷新技术所以他们两个的重载代码是可以通用的
下面列一下需要用到的重载代码

//Highlight.js重载和添加行号
$("pre code").each(function(i, block) {hljs.highlightBlock(block);});
$("pre code").each(function(){
  $(this).html("<ul><li>" + $(this).html().replace(/\n/g,"\n</li><li>") +"\n</li></ul>");
});
//ajax评论
ajaxc();
//百度统计
 if (typeof _hmt !== 'undefined'){
      _hmt.push(['_trackPageview', location.pathname + location.search]);
}

注:ajax评论可参照此文章(注意处理好TypechoComment的那段js的问题要把这段js放在主题的comments.php里)
其他重载代码请参照泽泽的文章(和Instantclick的按理都是通用的)

音乐不断

把音乐播放器插入到非pjax刷新区域就可以了

已有 8 条评论 (旧评论在前)

回复

行者

2018-02-04 23:06 Android 7.0

用你这上面的方法，能实现ajax评论和评论翻页吗？
1. 博主
  回复
  
  尚寂新
  
  2018-02-05 08:12 Android 5.1
  
  表单提交的话还得用老方案翻页的话...没搞懂你什么意思这个站里黑名单之外的a标签都能触发pjax 新标签页和外站也不会触发

夏目贵志

Windows NT10


$(document).pjax('a[href^=""]:not(a[target="_blank"], a[no-pjax])', {
    container: '#pjax-container',
    fragment: '#pjax-container',
    timeout: 8000
}).on('pjax:complete',
function() {
NProgress.done();
//此处可添加其他的pjax完成之后执行的事件
}).on('pjax:send',
function() {
NProgress.configure({ parent: '#process-container' });
NProgress.inc();
$('body').animate({scrollTop:'0'},500);
//此处可添加其他的pjax开始加载时执行的事件
});

成功,感谢！

回复

tt

2019-04-28 13:57 iOS 12.1.1

音乐不中断这个应该怎么实现啊，都是插件，需要改插件代码么？
1. 博主
  回复
  
  尚寂新
  
  2019-04-28 17:13 Android 9
  
  把音乐播放器相关的js放到pjax容器外面就好
回复

辰

2019-08-19 15:36 Windows 7

试了一下，有些恼火，不过确实有用，我还是不搞了，太麻烦了。谢谢分享
友链
回复

泽泽

2023-12-17 20:20 辽宁省 macOS

挖坟，我现在有的主题用pjax有的还用InstantClick，InstantClick的速度太诱人了
1. 博主
  回复
  
  尚寂新
  
  2023-12-17 20:27 黑龙江省 Windows NT10
  
  就是得费点心处理回调的东西，其实排除这个，instantClick这玩意真挺不错的

添加新评论 (Markdown Supported)

正在回复其他人取消回复

给Typecho添加pjax的方法,可用来代替InstantClick

相关链接

准备工作

加载动画

重载代码

音乐不断