typecho pjax + QPlayer 实现博客切换页面保留播放进度

一阵子不到捣鼓捣鼓戳泣戳泣群晖就浑身难受，经过上次的数据救回我的博客暂时恢复了:trollface:，看着稍显单调的界面，心思着要不加点插件啥的吧然后就联想到了qq空间不是有背景音乐吗所以立马行动:squirrel:

这次我直接找的QPlayer
附上传送门:

https://www.moleft.cn/post-39.html

装插件是很简单的，typecho支持组件插件的嵌入方式，下载后在typecho后台启用即可
简单的操作成功安装后发现写这个小插件的原作者可能好久没有维护了其中的网易云解析已经无法使用(也有可能是我使用姿势不对:panda_face:)
我找了个开源api网站解析音乐地址
附上传送门:

https://docs.tenapi.cn/
(这个解析地址我估计有访问次数限制我差不多刷新了10次就给我403了 emmm)

音乐是正常播放了但是切换页面会出现音乐重新从头播放的问题
看到帖子中提到建议使用pjax 立马去度娘找了一大圈发现这个需要改主题的代码可能会用到少量js知识(其实就是个复制粘贴的动作:alien:)
说下流程

分享一个cdn的网站比较好用
https://www.bootcdn.cn/
我用的版本是jquery.min.js版本3.1.1
jquery.pjax.js版本2.0.1

files Station 找到web/typecho/usr/themes/你的主题
找到header.php 查看js版本(有些主题可能写的较早,用的js版本比较老,根据上面网址找到最新版本复制script直接替换一下就可以)

找到footer.php 在

</body>

之前加入代码

 <!-- <script src='<?php $this->options->themeUrl('js/jquery.pjax.js'); ?>'></script> --> <!-- 可以下载到本地引入 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
 <script>
     function getBaseUrl() {
       var ishttps = 'https:' == document.location.protocol ? true : false;
       var url = window.location.host;
       if (ishttps) {
         url = 'https://' + url;
       } else {
         url = 'http://' + url;
       }
       return url;
     }
     let url = '"'+getBaseUrl()+'"';
     $(document).pjax('a[href^='+ url +']:not(a[target="_blank"], a[no-pjax])','#pjaxs', {
       fragment: '#pjaxs',
     })
     $(document).on('pjax:start',function() { NProgress.start(); });
     $(document).on('pjax:end',function() { NProgress.done(); });
     if(typeof lazyload === "function") {
       $(document).on('pjax:complete', function () {
         jQuery(function() {
           jQuery("div").lazyload({effect: "fadeIn"});
         });
         jQuery(function() {
           jQuery("img").lazyload({effect: "fadeIn"});
         });
       });
     }else{
       console.log('lazyload is closed');
     }
 </script>

刷新下切换页面即可验证

--end

typecho pjax + QPlayer 实现博客切换页面保留播放进度

评论 (0)