在学习基础 javascript/css 等前端知识的过程中，对 ajax 的了解与使用是一个必不可少的过程，出于对学习知识加以利用的想法，决定在本博客实践基础的 ajax/pjax，并加以使用。
因为博客本身需要局部刷新的地方并不多，在成功使用 ajax 后，可以比较明显体验到的变化有两个：
- 背景图的加载
- 右上角背景音乐播放器可以实现切换页面继续播放，顺便右上播放器为：YoduBGM
而其他对服务器或者对页面渲染的好处暂且不提，可以自行查阅 pjax 文档。
typecho 通用教程
注：此节内容部分来自 typecho博客实现pjax，并加以修改
js文件的引入
js文件的引入通常有两种方法，这里推荐使用cdn直接引入，也可以下载js放入项目文件夹中。下方的代码建议放入 footer.php 中。如果使用下面的方法引入请注意仔细分辨原主题是否已引入 jQuery ，大部分主题已经在本地下载并引入了 jQuery，贸然引入可能会导致不可预料的问题，详情见下一节。
1.引入jquery.min.js
2.引入jquery.pjax.js：
一定要放在jquery.min.js的后面。
pjax 使用
基础
在 footer.php （上述js文件引入的后面）中加入：
$(document).pjax(selector, [container], options)
如果博客使用 typecho，通过自带的函数可以这么写：
$(document).pjax('a[href^=""]:not(a[target="_blank"], a[no-pjax])', {
container: '#pjax-container',
fragment: '#pjax-container',
timeout: 8000
})
是 typecho 的自带函数，调用本站的首页地址，对本站的，并且没有 _blank 属性的，标签里不含 no-pjax 的链接实行 pjax 。局部刷新的区域是 #pjax-container 的部分。其余参数请参阅 pjax 官方文档
方便起见，可以将整个 body 包入 #pjax-container 中，再在内部对不需要刷新的部分加入 _blank 属性，no-pjax 标签，例如 Moricolor 中，在 header.php 后，或者 后包一个新的 div :，并在相应位置补上 ，Moricolor 中即是在 footer.php 的最后 后加入 。
加载动画
在 footer.php 上述代码后加入如下代码，用于加载动画的呈现：
$(document).on('pjax:send',
function() {
$('#loader-wrapper').addClass("in");
})
$(document).on('pjax:complete',
function() {
$('#loader-wrapper').removeClass("in");
}）
可选择其他动画，可以使用搜索引擎和阅读官方文档进行自定。
其他通用问题
本博客并未采用多说，故如使用并遇到问题，可以参考typecho博客实现pjax，而常见的 js 失效问题的解决通过官网文档：在新页面中重新初始化插件/工具和相近的pjax加载多说的三种方法进行学习。
针对 Moricolor 的优化
js 引入的问题
Moricolor 作为主题早已使用 jQuery 并下载到本地加以引用，如果使用上面的方法引用 cdn 中 jQuery 的方法很有可能导致冲突，解决方案就是不用引入。。
加载动画的问题
Moricolor 本身已经自定义了一套 div 淡入的效果，具体是通过对主要 div 加入 style="display:none，并通过 footer.php 中自定的 $(document).ready(function() {}) 使用 .fadeIn() 的方法加强视觉效果。但是使用 pjax 后便存在不执行的问题，并导致所有 div 的 display 属性固定为 none，最终无法正常显示内容。
解决方案是手动删除 display：none 的属性，或是在上面的动画效果的函数中手动添加淡入效果，即
$(document).on('pjax:complete',
function() {后将所有 .fadeIn() 复制一遍。
Comments | NOTHING