MENU

给博客加入了PJAX无刷新

• 2020 年 06 月 01 日 • Typecho

今天在单位突发奇想想给博客加入pjax功能,可惜对pjax是一窍不通,但是奈何咱有颗好学的心,找了个pjax文档开始研究,在单位没有工具,中午回到家后说干就干,别说还真折腾成了。
在服务器中新建pjax.js文件,用于操作 PJAX 组件。内容暂时留空。
打开网站的footer.php文件, 在文件底部的前面添加下面代码:

<script src="https://cdn.jsdelivr.net/npm/pjax/pjax.js"></script>
<script src="https://tuziang.com/usr/themes/Fantasy/static/pjax.js"></script>

其中第二行需要替换成你自己的路径。
现在开始填写刚才新建的pjax.js文件:

 var pjax = new Pjax({
      // 在页面进行 PJAX 时需要被替换的元素或容器,一条一个 CSS 选择器,数组形式
      selectors: [
        "title",
        "meta[name=description]",
        "main"
      ],
      cacheBust: false
    })

selectors中是每次刷新都要改变的元素。

加载动画

使用nprogress的加载动画: http://ricostacruz.com/nprogress/
同样在footer.php底部添加两行代码

<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<link href="https://unpkg.com/nprogress@0.2.0/nprogress.css" rel="stylesheet" type="text/css">

再接着修改刚才我们自己新建的pjax.js文件,在文件底部添加下面两个函数

document.addEventListener('pjax:send', function (){
    NProgress.start();
});

document.addEventListener('pjax:complete', function (){
    NProgress.done(); ;
});

接着修改css,添加以下代码

/*pjax 动画*/
.loading{display:none}
.loading{height:100%;width:100%;position:fixed;top:0;left:0;z-index:999999;background-color:rgba(250,250,250,.9)}
.loading img{width: 280px;height:210px;position: relative;top: 45%;left: 50%;margin-left:-140px;margin-top: -105px;}
#loader{display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #ff5a5a; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite;}
#loader:before{content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #5af33f; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite;}
#loader:after{content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #6dc9ff; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite;}
@-webkit-keyframes spin{0%{-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}}
@keyframes spin{0%{-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}}

最后修改刚才我们自己新建的pjax.js文件:

document.addEventListener('pjax:send', function (){
     $(".loading").css("display", "block");
});

document.addEventListener('pjax:complete', function (){
    $(".loading").css("display", "none");
});

大功告成,最后发现音乐插件有冲突,需要回调函数,在我们建的pjax.js中
加入停止播放

if (typeof aplayers !== 'undefined'){
    for (var i = 0; i < aplayers.length; i++) {
        try {aplayers[i].destroy()} catch(e){}
    }
}

回调播放器函数

loadMeting();

至此博客pjax彻底完工,快按F5来感受吧。

感谢@油老师、@海了个螺的大力帮助。
添加新评论

已有 4 条评论
  1. 这样风格的就算不用pjax应该也是秒开吧 就这么点资源 - -!

    1. @小宇 ::huaji:: 加了pjax不是显得高大上吗,我正研究灯箱呢,, ::erha::

  2. ::outwater::
    看来还需要一个代码高亮 ::unhappy::

  3. ::good::

0:00