前言

• pjax是什么

pjax是jquery的一个插件，它使用ajax + pushState两个技术改善用户的网页浏览体验。具体来说，当用户使用a标签切换页面时，可以实现局部刷新的技术。带来最直观的效果是整个网站变成单页应用。这样的效果将会极大的提升用户体验，并且可以减少https的请求的次数和内容。
为什么我现在要用到它，因为Qplayer悬浮播放器插件需要配合Pjax实现切换页面不中断播放，刚好我使用的这款主题Akina for Typecho 主题模板没有加入Pjax局部刷新，导致每点开一篇博文或者页面都会重新加载播放器就会跟着刷新，背景音乐就会重新开始播放。
此方法需要具备Html5+Js的基础知识，如果你不会这些基础知识恰好我们使用的是同一个主题，你可以跟着步骤复制粘贴。

演示

以我使用的这款Typecho主题为例 Akina for Typecho 主题模板

• 引入js文件

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>//一般主题都有引入，引入请忽略<script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.js"></script>

这个主题已经自带引入了我就略过了，在编辑主题的footer.php页面能看到。

• 选择局部刷新的容器

当然你也可以自定义命名一个div，这个主题的容器我选择了这里

<div id="content" class="site-content">·········</div>

这个位置比较适合作为局部刷新的地方，切换的时候只有这里有变化，其他地方都是公用。

• 在footer.php页面加入Pjax

<script>
    $(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', {
        container: '#content',//DIV容器的ID
        fragment: '#content',//作为整个pjax框架，必须写上
        timeout: 8000 //超时就会被迫页面就会完全刷新，单位毫秒
    });</script>

这个一定要写在引入的js文件后面，顺序错了就会失效。 到这里已经可以达到效果了，但还可以加入一下切换页面的动画。

• 加入切换页面的加载动画

这里以我使用的主题为例，这个主题本身就有加载动画我调用一下就可以了。

$(document).on(&#39;pjax:start&#39;,&nbsp;function()&nbsp;{&nbsp;$('body').append('<div id="preloader"><div id="preloader-inner"></div></div>'); });//Pjax开始$(document).on(&#39;pjax:end&#39;,&nbsp;&nbsp;&nbsp;function()&nbsp;{&nbsp;$('#preloader').remove(); });//Pjax结束

OK现在来看下效果

标签: none