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

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

3. 找到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