如何给zblog网站添加pjax无刷新
分类:zblog教程
40
博客加了悬浮音乐播放器后就一直在折腾换页音乐不中断的功能,在网上查找后发现想要实现换页音乐不中断的功能必须要为博客加pjax,于是又苦苦寻找并尝试了一番,最后发现网上实现pjax功能基本上是两种方法。
方法一
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script><script src="https://cdn.bootcss.com/jquery.pjax/1.9.6/jquery.pjax.min.js"></script><script>
$(document).pjax('a[href^="{$host}"]:not(a[target="_blank"], a[no-pjax])', {
container: '#pjax-container',
fragment: '#pjax-container',
timeout: 8000
})</script>将以上代码放入页脚文件foot.php或者footer.php文件的最下面。
解释一下上面代码:{$host}是zblog的自带函数,调用本站的首页地址!也就是只对本站的,并且没有_blank属性的,标签里不含no-pjax的链接实行pjax!局部刷新的区域是#pjax-container的部分!
其中#pjax-container是你的局部刷新部分,你可能没有这个div,你自己在添加一个包裹住你想局部刷新的部分就行了!
方法二
<script src="https://cdn.jsdelivr.net/npm/pjax/pjax.js"></script><script>
var pjax = new Pjax({
elements: "a", // 在页面进行 PJAX 时需要被替换的元素或容器,一条一个 CSS 选择器,数组形式
selectors: [
"title",
"meta[name=description]", // 如果是全部 meta 替换的话,只需要写 meta "main"
],
cacheBust: false
})</script>和第一种方法一样,将以上代码放入页脚文件foot.php或者footer.php文件的最下面。
局部刷新的区域是main的部分!
其中main是你的局部刷新部分,你可能没有这个div,你自己在添加一个<div id="main"></div>包裹住你想局部刷新的部分就行了
最新发布
-
zblog响应式自媒体博客主题63号
2026-04-08 -
zblog响应式资讯门户主题62号
2026-04-05 -
zblog响应式文章自媒体资讯主题61号
2026-04-01 -
zblog响应式自媒体资讯主题60号
2026-03-30 -
zblog响应式门户文章资讯主题59号
2026-03-29
热门文章
-
ZBLOG精品手赚APP应用下载主题19号
1225 -
zblog响应式机器设备企业主题10号
1220 -
zblog响应式生活分类信息主题2号
937 -
zblog响应式机械企业外贸主题6号
320 -
简洁大气zblog响应式文章主题52号
306