歌曲封面 未知作品
  • 歌曲封面あの日のままのぼくら雨宮天
  • 歌曲封面やさしさに包まれたなら松任谷由実
  • 歌曲封面夜、萤火虫和你AniFace
  • 歌曲封面Rum and Coca ColaThe Andrews Sisters
  • 歌曲封面ShelterPorter Robinson

萌ICP备20210005号

辽ICP备2021005644号

绯色之喵 @2009

网站已运行 4 年 274 天 11 小时 27 分

Powered by Typecho & Sunny

2 online · 22 ms

歌曲封面 未知作品
  • 歌曲封面あの日のままのぼくら雨宮天
  • 歌曲封面やさしさに包まれたなら松任谷由実
  • 歌曲封面夜、萤火虫和你AniFace
  • 歌曲封面Rum and Coca ColaThe Andrews Sisters
  • 歌曲封面ShelterPorter Robinson

萌ICP备20210005号

辽ICP备2021005644号

绯色之喵 @2009

网站已运行 4 年 274 天 11 小时 27 分

Powered by Typecho & Sunny

4 online · 28 ms

Title

使Typecho实现PJAX无刷新访问

绯色之喵

·

Typecho

·

Article
⚠️ 本文最后更新于2021年11月19日,已经过了1115天没有更新,若内容或图片失效,请留言反馈

使Typecho实现PJAX无刷新访问

因为新建了一个typecho博客,界面很干净简洁,加载速度也异常迅速。因此打算在左侧侧边栏创建一个网易云音乐的音乐外链,但是并没有全站无刷新。因此百度了一下,解决了问题。下面是解决方法,具体效果欢迎访问吃糖博客 【地址现已失效】

在服务器中新建pjax.js文件,用于操作 PJAX 组件。内容暂时留空。
打开网站的footer.php文件, 在文件底部</body>的前面添加下面代码:

♾️ 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文件:

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

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

动画一

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

♾️ 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文件,在文件底部添加下面两个函数

♾️ javascript 代码:
document.addEventListener('pjax:send', function (){
    NProgress.start();
});

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

动画二

这个动画来自于https://blog.dyboy.cn/program/56.html利用Pjax实现网页无刷新加载的详细方法 - DYBOY - 专注程序开发与信息安全
在header.php文件中的</body>前面添加这行代码:

♾️ php 代码:
 <!-- pjax 动画 -->
 <div class="loading"> <div id="loader"></div></div>

接着去css文件中,添加:

♾️ 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文件:

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

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

我用的就是第一种动画效果。

现在已有 260 次阅读,4 条评论,3 人点赞
Comment:共4条
发表
  1. 头像
    @
    我按这个方法添加了 但是不管点哪里,无刷新加载变成了网站头部我的一言内容 为啥
    · Chrome

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 5 💖 4 💯 4 💦 3 😄 3 🪙 3
  2. 头像
    @
    -
    好多料。但这个看的我似懂非懂进入新页面后,js怎么再加载一遍?
    · QQ浏览器

    👍

    💖

    💯

    💦

    😄

    🪙

    👍 4 💖 4 💯 3 💦 2 😄 2 🪙 2
    1. 头像
      @

      博主

      火喵酱
      @-
      评论区发不了代码,发图片了{IMG}https://s1.xptou.com/2022/08/07/62ef855252e0f.png{/IMG}我这个写的不太好,百度有好多写的很好的,互相对照参考一下就好了
      · Chrome

      👍

      💖

      💯

      💦

      😄

      🪙

      👍 5 💖 3 💯 3 💦 3 😄 3 🪙 2
      1. 头像
        @
        天呐!这样子就是大工程
        · QQ浏览器

        👍

        💖

        💯

        💦

        😄

        🪙

        👍 3 💖 3 💯 3 💦 3 😄 3 🪙 3
搜 索 消 息 足 迹
你还不曾留言过..
你还不曾留下足迹..
博主 欢迎访问喵喵的博客,记录每日好心情! 不再显示
博主