typecho (Moricolor) 实现 pjax

发布于 2019-03-14  185 次阅读


在学习基础 javascript/css 等前端知识的过程中,对 ajax 的了解与使用是一个必不可少的过程,出于对学习知识加以利用的想法,决定在本博客实践基础的 ajax/pjax,并加以使用。

因为博客本身需要局部刷新的地方并不多,在成功使用 ajax 后,可以比较明显体验到的变化有两个:

  1. 背景图的加载
  2. 右上角背景音乐播放器可以实现切换页面继续播放,顺便右上播放器为: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() 复制一遍。


Fly me to the moon