侧边栏壁纸
  • 累计撰写 44 篇文章
  • 累计收到 113 条评论
  • 今日撰写 0 篇文章
    登录/注册
    ——————————————————————————

给 Typecho博客 配置PJAX无刷新访问的 教程

Yang
2021-07-04 / 0 评论 / 335 阅读 / 正在检测是否收录...

前言

在测试的时候,如果不生效的话,可以用浏览器的无痕窗口,或者清除浏览器缓存。

配置

在服务器中新建pjax.js文件,用于操作 PJAX 组件。内容暂时留空。

打开网站的footer.php文件, 在文件底部</body>的前面添加下面代码:

<script src="https://cdn.jsdelivr.net/npm/pjax/pjax.js"></script>
<script src="https://cccoa.cn/usr/themes/joe/js/pjax.js"></script>

其中第二行是我创建的,需要替换成你自己的路径。

现在开始填写刚才新建的pjax.js文件:

var pjax = new Pjax({
// 在页面进行 PJAX 时需要被替换的元素或容器,一条一个 CSS 选择器,数组形式
selectors: [

"title",
"meta[name=description]",
"main"

],
cacheBust: false
})
selectors中是每次刷新都要改变的元素。
具体问题具体分析,每个模板不一样,你的模板未必有上面的main标签。所以需要你有点html基础

动画

动画一

使用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(); ;
});

动画二

这个动画来自于利用Pjax实现网页无刷新加载的详细方法 - DYBOY - 专注程序开发与信息安全

在header.php文件中的</body>前面添加这行代码:

<!-- pjax 动画 --><div class="loading"> <div id="loader"></div></div>
接着去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");
});

之前我用的就是第二种动画效果。
如图:
给 Typecho博客 配置PJAX无刷新访问的 教程

成功

这样就简单配置成功了
更详细移步 Test

本文共 364 个字数,平均阅读时长 ≈ 1分钟
1

评论 (0)

取消