特别声明：
看不懂没关系，往下读，因为我写的逻辑可能不是很清晰~
本人源码在github上实在不懂的 git clone自己扣一扣，github在博客中有连接
本人博客mmmmmm.me
背景：
我有强迫症，遇到好的东西就想给自己整上去，在这里想忠诚的奉劝大家一句，不要再搭建自己的博客了，这是一个无底洞，就跟打游戏一样，当你到达六十级之后，你发现版本更新了，顶级变成了八十级，而且，目前看来你自己只有三级，只是自己感觉自己是六十级~~~~ 就像我，这个东西我足足花了一周多，当然也有我经常加班的原因吧，好了不吐槽了~~
进入正题
pjax初体验–instantclick
首先本人加了一个不蒜子的群，看到有人说instantclick能够实现自己的博客实现不中断的播放（大家都知道博客一刷新，一换页，播放的歌曲插件肯定也会刷新，歌也就断了），看到这里是不是有感觉了~~，这个时候我就开始拼命的往里面加，大概花了两天放弃了，可是无奈中文文档也比较少，而且，bug巨多，最大的原因也是bug巨多，适配起来十分麻烦，比如多说评论系统等等。但是速度确实蛮快的，因为可以1鼠标放到标签上实现预加载2鼠标点下去的瞬间实现预加载，而且可以自己设定预加载的时间。（好像是这么回事，时间太久远了）
下面贴出我找到的几个教程，对于bug多这点不介意，喜欢钻研的同学可以看看：
https://www.ihewro.com/archives/515/
https://qqdie.com/archives/instantclick.html
https://www.jianshu.com/p/c306360e4270
https://www.songhaifeng.com/razt/32.html
好了就先这么多，google上也有好多，赶紧让我们进入正题吧~
真正的pjax
官方介绍：pushState + ajax = pjax 带来最直观的效果是整个网站变成单页应用。这样的效果将会极大的提升用户体验，并且可以减少https的请求的次数和内容。使用github上面的一个开源项目defunkt/jquery-pjax 可以很轻松的帮助我们实现pjax。
这样可以实现，刷新的时候只加载局部的html和css js 大大加快速度。
真诚提醒：如果对前端一点点基础都没有的话，要不就放弃吧。
第一步
找到theme->next->layout->_layout.swig文件
在开头加入以下代码：
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script src="/js/src/pjax/pjaxBase.js"></script>
解释一下：前两行是引入jq文件和pjax的js文件，jq文件必须在pjax文件前面引入，第三行是引入我自己的文件，这个文件是我自己diy的目录如图。在第二行下面中间加入内容是一样的效果。
第二步
还是在这个文件中在底部加入
{# 在这里依次加载pjax需要的js文件 #}//swig文件中的注释是这样子的
<script type="text/javascript" src="/js/src/pjax/category_js.js" ></script>
<script type="text/javascript" src="/js/src/pjax/opacity_js.js" ></script>
<script type="text/javascript" src="/js/src/pjax/motion_js.js" ></script>
<script type="text/javascript" src="/js/src/pjax/velocity.ui_js.js" ></script>
<script type="text/javascript" src="/js/src/pjax/velocity_js.js" ></script>
<script type="text/javascript" src="/js/src/pjax/bootstrap_js.js" ></script>
<script type="text/javascript" src="/js/src/pjax/scrollspy_js.js" ></script>
<script type="text/javascript" src="/js/src/pjax/utils_js.js" ></script>
<script type="text/javascript" src="/js/src/pjax/post-details_js.js" ></script>
注意这里的文件是有顺序的，具体的我会在下文详细讲述。
第三步
第二步中的这些文件都是我自己加入的，原因是因为（划重点了！！！）
在pjax中是局部刷新的也就是局部加载的，而以上的文件，next主题中本身是没有的，原来的文件名称没有我的_js后缀，在目录next->source->js->src下面，
源文件大部分都是
(document).ready()去掉，然后用function xxx包住，这样就可以外部调用了，我会在下面讲到，很有用哦。
为什么这么麻烦，因为next的js是相互调用的，本人比较懒，实在没有时间阅读全部的源码。
目录：
第四步
第四步
如上面的目录，我单独还建了一个/js/src/pjax/pjaxBase.js，你可能就懂了第一步了。这个js是pjax的核心，下面贴出源码：
$(document).pjax('a[target!=_blank]', '#main', {
fragment: '#main',
timeout: 5000,
});
$(document).on('pjax:complete',
function() {
// 分类的js
category_js();
// 局部刷新后文章内容不显示bug的js
opacity_js()
// 点击有目录的文章sidebar不显示的bug解决
motion_js()
velocity_js()
velocityui_js()
// bootstrap_js()
scrollspyyyyyyy()
utils_js()
postdetails_js()
// 来必力评论系统js
$.getScript("https://cdn-city.livere.com/js/embed.dist.js")
//下面的js是调用别的文件是我之前试的一种方法，屏蔽了
// $.getScript("/js/src/category.js")
// 这段是针对于muse还是mist主题来着，点击有目录的文章，右面的sidebar会自动浮出来的js，这个是核心。
var $tocContent = $('.post-toc-content');
var isSidebarCouldDisplay = CONFIG.sidebar.display === 'post' ||
CONFIG.sidebar.display === 'always';
var hasTOC = $tocContent.length > 0 && $tocContent.html().trim().length > 0;
if (isSidebarCouldDisplay && hasTOC) {
NexT.utils.displaySidebar();
}
})
解释一下：
$(document).pjax(‘a[target!=_blank]’ ‘#main’, {
fragment: ‘#main’,
timeout: 5000,
});
这个函数是pjax的核心，
'a[target!=_blank]'是你将会点击的标签[target!=_blank]，是当你的标签是blank的时候就是需要点击出现一个新的窗口，比如友链之类的，这个时候就不进行局部加载了，没有类似a标签的可以省略。
‘#main’是你将会刷新的地方
fragment: ‘#main’,是把那个地方的代码刷新然后放到’#main’中
timeout，懂js得都懂就不解释了。
$(document).on(‘pjax:complete’,
function() {}
划重点了：这个函数是在局部加载完之后自己需要diy的js，因为pjax是局部加载我已经强调了很多遍了，这个时候有的js会失效比如说评论功能。
这个时候引入我们之前定义好的函数。完成！
贴几个对我很有帮助的博文和hexo next的博客和一个github，实在不懂得可以扒一扒别人的github源码，有很大的帮助。
https://www.ihewro.com/archives/354/comment-page-3#comments
https://www.jimoe.cn/archives/typecho-add-pjax.html
http://yelog.org/2017/02/08/pjax/
https://www.jianshu.com/p/808a647dc324
https://blog.dyboy.cn/
https://blog.flysay.com/
https://github.com/DIYgod/hexo-theme-sagiri
http://www.qingpingshan.com/m/view.php?aid=355579
https://diygod.me/
中间有个小技巧:chrom的审查元素里面的内容是可以移动和删除的，更利于我们的检查。