TYPECHO启用全站PJAX

林尽欢 编程技术 阅读量

How to start

引用公共库

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>(已引入JQUERY请忽略)
<script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.js"></script>

定义一个ID给DIV容器包裹你要PJAX的页面,如

<div id='pjax'>
</div>

再在footer.php调用PJAX(放于JQUERY之后)

<script>
//获取网站当前域名
function getBaseUrl() {
  var ishttps = 'https:' == document.location.protocol ? true : false;
  var url = window.location.host;
  if (ishttps) {
    url = 'https://' + url;
  } else {
    url = 'http://' + url;
  }
  return url;
}
let url = '"'+getBaseUrl()+'"';
$(document).pjax('a[href^='+ url +']:not(a[target="_blank"], a[no-pjax])', {
  container: '#pjax',//DIV容器的ID
  fragment: '#pjax',//作为整个pjax框架,必须写上
  timeout: 8000 //超时就会被迫页面就会完全刷新,单位毫秒
})
</script>

加载动画

动画我用的是nprogress
引入js和css(JQUERY一定要先加载):

<link rel='stylesheet' href='https://unpkg.com/nprogress@0.2.0/nprogress.css'/> 这个我是放在header
<script src='//unpkg.com/nprogress@0.2.0/nprogress.js'></script>放在footer

然后加入代码

$(document).on('pjax:start', function() { NProgress.start(); });
$(document).on('pjax:end',   function() { NProgress.done(); });

完整代码

function getBaseUrl() {
  var ishttps = 'https:' == document.location.protocol ? true : false;
  var url = window.location.host;
  if (ishttps) {
    url = 'https://' + url;
  } else {
    url = 'http://' + url;
  }
  return url;
}
let url = '"'+getBaseUrl()+'"';
$(document).pjax('a[href^='+ url +']:not(a[target="_blank"], a[no-pjax])', {
  container: '#pjax',
  fragment: '#pjax',
  timeout: 8000
})
$(document).on('pjax:start',function() { NProgress.start(); });
$(document).on('pjax:end',function() { NProgress.done(); });
if(typeof lazyload === "function") {
  $(document).on('pjax:complete', function () {
    jQuery(function() {
      jQuery("div").lazyload({effect: "fadeIn"});
    });
    jQuery(function() {
      jQuery("img").lazyload({effect: "fadeIn"});
    });
  });
}else{
  console.log('lazyload is closed');
}
喵~
林尽欢
我最不喜欢做选择,但我选择了,就一定不后悔。
开学了~
开学了~

坐标 顺德职业技术学院 出发 12点半,踩点坐上高铁前往学校~ 签到 校园很大,很满意,但今天太阳太大了!真·晒黑了,等了一个多小时才能进场签到~班级签到->银行卡激活->领取军训装备->找宿舍,缘分让我和我的舍友相遇~ 整理 整理之前,先下去找了个餐厅吃饭,直至下去之前都没有吃过任何东西,太可怜了我。点了一份13块钱的鸡扒饭,分量挺足,配汤好评,噢 对餐厅名字叫花餐厅,还点了一杯蜜桃乌龙,甜过头了。 最后放上宿舍1.0高清图一发。

1 分钟阅读
TYPECHO文章页/独立页实现lazyload懒加载完美
TYPECHO文章页/独立页实现lazyload懒加载完美

TYPECHO实现图片懒加载

1 分钟阅读