给网站添加pjax无刷新，换页音乐不中断

自从博客加了悬浮音乐播放器后就一直在折腾换页音乐不中断的功能，在网上查找后发现想要实现换页音乐不中断的功能必须要为博客加 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 文件的最下面。

  解释一下上面代码：<?php Helper::options()->siteUrl()?>是 typecho 的自带函数，调用本站的首页地址！也就是只对本站的，并且没有 _blank 属性的，标签里不含 no-pjax 的链接实行 pjax！局部刷新的区域是 #pjax-container 的部分！
  其中 #pjax-container 是你的局部刷新部分，你可能没有这个 div，你自己在添加一个 <div id="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> 包裹住你想局部刷新的部分就行了！

测试（joe 主题）

两种方法我这边都测试过了，最终第二种方法是成功的，然后由于我主题的特殊性，在成功之后出现跳转页面后出现内容显示不完全的 BUG，解决的方法是把 index.php 文件和 post.php 文件中主体部分所有引用页面的部分全部都放在放在各自的页面里面。
如 index.php 中引用的

<!-- 列表 -->
                        <?php $this->need('component/index.list.php'); ?>

就把 component/index.list.php 文件里的所有代码全部复制到 index.php 文件的 下面即可。

由于 joe 主题引用的文件实在是太多，其实是懒得弄所以就此搁置！有兴趣的话自己可以尝试下。