博客主页
标签

pjax

下的文章

Blog:

火喵博客・日记本
使Typecho实现PJAX无刷新访问
使Typecho实现PJAX无刷新访问因为新建了一个typecho博客,界面很干净简洁,加载速度也异常迅速。因此打算在左侧侧边栏创建一个网易云音乐的音乐外链,但是并没有全站无刷新。因此百度了一下,解决了问题。下面是解决方法,具体效果欢迎访问吃糖博客 【地址现已失效】在服务器中新建pjax.js文件,用于操作 PJAX 组件。内容暂时留空。打开网站的footer.php文件, 在文件底部</body>的前面添加下面代码:<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(); ; });动画二这个动画来自于https://blog.dyboy.cn/program/56.html利用Pjax实现网页无刷新加载的详细方法 - DYBOY - 专注程序开发与信息安全在header.php文件中的</body>前面添加这行代码: <!-- pjax 动画 --> <div class="loading"> <div id="loader"></div></div>接着去css文件中,添加: .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"); });我用的就是第一种动画效果。
辽ICP备2021005644号-1 辽公网安备 21021102000984号 萌ICP备20210005号 本站已运行 2 年 159 天 16 小时 28 分 自豪地使用 typecho 建站,并使用 MyDiary 主题 百度统计 Copyright © 2009 ~ 2022. 火喵博客 All rights reserved.
历史足迹
分类目录
  • 日常
  • 🤣 晒物
  • 🦙 代码
  • 🏗️ 建站
  • 📷 生活
  • 📭 撰稿