【技巧】给网站添加pjax无刷新,换页音乐不中断
2023-02-18 16:46:48 时间
- 自从博客加了悬浮音乐播放器后就一直在折腾换页音乐不中断的功能
- 在网上查找后发现想要实现换页音乐不中断的功能必须要为博客加pjax,于是又苦苦寻找并尝试了一番
- 最后发现网上实现pjax功能基本上是两种方法。
方法一
- 第一种方法是来自大佬友人C的博客。
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery.pjax/1.9.6/jquery.pjax.min.js"></script>
<script>
$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', {
container: '#pjax-container',
fragment: '#pjax-container',
timeout: 8000
})
</script>
将以上代码放入页脚文件foot.php
或者footer.php
文件的最下面。
解释一下上面代码:siteUrl()?>
是typecho的自带函数,调用本站的首页地址!也就是只对本站的,并且没有_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,你自己在添加一个 包裹住你想局部刷新的部分就行了! 测试(joe主题) 两种方法我这边都测试过了,最终第二种方法是成功的,然后由于我主题的特殊性,在成功之后出现跳转页面后出现内容显示不完全的BUG,解决的方法是把index.php文件和post.php文件中主体部分所有引用页面的部分全部都放在放在各自的页面里面。 如index.php中引用的
<!-- 列表 -->
<?php $this->need('component/index.list.php'); ?>
就把component/index.list.php
文件里的所有代码全部复制到index.php文件的下面即可。
由于joe主题引用的文件实在是太多,其实是懒得弄所以就此搁置!有兴趣的话自己可以尝试下。
相关文章
- logstash处理多行日志-处理java堆栈日志
- Java High Level REST Client 使用地理位置查询
- 垃圾回收你懂,Java垃圾回收你懂吗?
- 几款Java开发者必备常用的工具,准点下班不在话下
- Ulysses for Mac(最好用的Markdown文本编辑写作工具)
- Xilinx MPSoC FSBL中的看门狗的用法总结
- 【FusionCompute】使用VMware Workstaion安装部署VRM(三)
- 【FusionCompute】添加CNA主机到VRM管理节点(四)
- RabbitMQ:安装配置
- RabbitMQ:消息模型
- 【FusionCompute】基于FreeNAS部署并使用虚拟存储(五)
- 【FusionCompute】创建虚拟机失败(六)
- Xshell同步复制粘贴Windows的东西
- 【OpenFiler】使用虚拟机安装openfiler
- 什么是BPM系统?BPM流程管理系统介绍
- Online DDL和Cardinality
- MRR和ICP
- 犀牛鸟中学科学人才培养计划喜报:祝贺北京一零一中学李一昕同学获丘成桐中学科学奖全球总决赛金奖!
- 耗时减半?腾讯云OCR只做了3件事
- 开箱即用区块链是一种什么体验?Lighthouse长安链给你答案