草长得老高了,一次除个干净

工作了才发现时间是可以过得这么快,还有两个月就工作一年了。日复一日,似乎周一开始上班,周五(周末?)下班两个时间点才比较有时间感。刚出来工作,大部分时间都得围绕着工作转悠,工作用的C++,不相关的博客就被冷落到一边了,难得闲下来,就做个大扫除,把instantclick下了,换成pjax,再做些小优化。

instantclick的预加载效果的确很好,加载飞快,但使用时前进后退网页还有一些小问题个人无法解决,最后还是折腾下pjax,加上网站本身速度也还行,也还是不错的。

正常网页加载时整个网页会闪一下,再加载内容,体验不大好,而pjax是jquery库中的一个局部刷新的技术,只刷新pjax容器内或加上pjax标签的内容,在提高体验性的同时,还能降低服务器资源消耗。更具体的原理如需了解还请自行搜索,下面就班门弄斧地介绍一下本站部署pjax的一些步骤。

一、首先添加pjax容器,就是需要pjax局部刷新的部分,这个一般是网页的body部分,容器id为content;

 <body>
    <div id="content">
      //需要pjax局部刷新的部分
   </div>
 </body>

二、添加过渡动画和jq.js、pjax.js支持,需要在body标签之外,比如在header.php的head标签之间或footer.php的footer标签之间加入以下代码;

/*过渡动画,自行调整显示大小及替换动画img、svg的网址*/
<div style="display:none;z-index:999;position: fixed;top:50%;left:50%;transform: translate(-50%,-50%);opacity:0.8" class="pjax_loading"><img width="120px" src="//loading.io/spinners/flask/index.svg"></div> 

/*引用jq和pjax,pjax一定要在jq之后*/
<script src="//cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script src="//cdn.staticfile.org/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>

三、添加pjax支持及一些函数重载,三个重载函数有需的再加上,添加位置和上一步一样;

<script>
$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', '#content', {fragment:'#content', timeout:5000});//只在本站链接启用pjax,加_blank跳转的(外部)链接和no-pjax标签的链接不启用
$(document).on('submit', 'form', function (event) {$.pjax.submit(event, '#content', {fragment:'#content', timeout:5000});});//支持submit和form标签,一般是提交评论等操作
$(document).on('pjax:send', function() {  $(".pjax_loading").css("display", "block");});//过渡动画开始
$(document).on('pjax:complete', function() { 
$(".pjax_loading").css("display", "none");//过渡动画结束
if (typeof aplayers !== 'undefined'){loadMeting();} //Aplayer播放器重载
if (typeof hljs !== 'undefined'){document.querySelectorAll('pre code').forEach((block) => { hljs.highlightBlock(block);});} //highlight代码高亮重载
if (typeof _hmt !== 'undefined'){_hmt.push(['_trackPageview', location.pathname + location.search]);} //百度统计重载          
});
</script> 

四、排查错误,鉴于每个主题及使用的插件不同,对pjax的兼容差异也不同,本站在启用后,发现Aplayer播放器和highlight代码高亮插件在pjax加载后不显示,需要刷新才显示,这时需要在上一步中pjax:complete加载完成后的回调函数中对其进行重载。

还有一些js加载也出现问题,比如外链自动新窗口打开的js、js加载的评论样式、,最简单粗暴的办法就是把原本在footer标签加载的js放到pjax容器content中;

另外一些点击事件也会失效,比如本站打赏js使用的是匿名函数,如:

$('#id').on('click', function()
{
    ...
});

改成元素绑定事件即可修复:

<div id='id' onclick='myClick()'></div>
<script text='javascript/text'>
function myClick()
{
    ...
}
</script>

到此pjax的改造结束,如发现错误还请帮忙指出。

参考文章:
typecho博客实现pjax
pjax(InstantClick)常用的重载函数
pjax 局部刷新后js事件失效

标签: Typecho 大扫除 pjax

已有 25 条评论

  1. 又长草了。。

    1. 最近会除除 pao.gif

      1. quan.png 我换域名了 把友链换一下吧
        换成 acg.blue

  2. 咱来帮你除除草! gan.png

    1. 又养了一波,可以除了 gan.png

  3. 好像pjax并没生效?

    1. 评论部分还有点问题

  4. 写的很好,支持一下

    1. 多多交流 huaji.png

  5. 也不经常更新博客了。 jingya.png

    1. 鸽变常态 pao.gif

  6. Sakura Sakura

    看看是啥样的

  7. pen.gif 撒玩意

    1. 不服让落叶大大打我啊 pai.gif

  8. 为啥我评论不起!!!就因为我太美了吗 nu.png

    1. 基你太美?提示什么啊 meng.png

  1. 1
  2. 2
选择表情