现在换 Hexo,能找到比较成熟的预设方案,且目前使用的主题已有预配置 Pjax,(左下角)播放器问题得到解决。


我仅仅只是想加个不间断的音乐播放器,仅此而已!!!

在逛网上一些个人博客,或是自定义程度较高的博客平台时,常见一播放器于其中。多数位于屏幕左下,小巧美观,功能丰富,吾甚是羡慕,便着手尝试。

APlayer 的官方文档还是很详细的,而且引入并不繁琐,只需 jsdelivr 之类 cdn 引入一条,之后使用一 div 及一段 js 即可。阅读文章时还能听点歌曲,确实是不错。然而……

这播放器好是好,但点击文章时便整个刷新了,包括播放进度什么的。其实这不是播放器的问题,毕竟网页跳转这种,播放器自然跟着刷新。但听得好好的,突然给我断了;而且每点一下,整个页面全部刷新,对于我这种使用免费主机的人来说,实在有点难受(╯‵□′)╯︵┴─┴……

于是乎吾上网搜索,见到不少解决方案,不过大多都提到了“Pjax”这个技术,遂进一步了解:

AJAX 是异步的 JavaScript 和 XML 的简称……可以在不刷新整个网页的情况下,对网页的某部分进行更新加载。

pjax = pushState + ajax。它在对网页部分刷新的前提下,保持了真实的地址、网页标题,浏览器的后退(前进)按钮也可以正常使用……当然,pjax 也有不依赖 jQuery 的版本。

仔细思索,这恰是我想的效果,顺便还能提高下加载速度(你猜这个博客所在虚拟主机有没有付费)。
  我现在没有时间听什么 Pjax 不利于 SEO,我 tm 只想要个不间断的音乐播放器!!!

官方文档写得比较简单,而且给的是 jQuery 写法。无 jQuery 版本非常精简,并且写法更方便。按照网上的教材来看,大概也能摸索一些。假设一个网页的结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html class="...">
<head>
...
</head>
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
<div class="pjax-container">
...
</div>
</body>
</html>

对于博客来说,一般情况下,title 和 meta 标签是会变化的,示例中 main 是网站的主要内容自然要变化,footer 一般情况下保持不变。那么在网页末尾处的 js 可以这样写(已经引入 Pjax):

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
var pjax = new Pjax({
selectors: [
"title",
"meta[name=description]",
"main"
".pjax-container"
//按照 CSS 选择器的写法,将需要变化的标签添加至此处
],
})
</script>

播放器引入位置不在上文 js 的 selectors 中任何标签内即可。非常简单,播放器正常播放,问题解决……

个鬼!这样写将导致大部分 js 均失效。当前网页的内容已经发生了变化,js 绑定的元素已经消失。而 pjax 只会部分刷新网页,这些 js 没有变化。也就是说,需要通过“重载”再次加载所需 js,方可让这些功能重新出现。

1
2
3
4
5
6
7
8
<script type="text/javascript">
function pjax_reload(){
//需重新加载的 js 代码
}
document.addEventListener('pjax:complete', function (){//当 pjax 完成时执行
pjax_reload();//上方的函数
});
</script>

(其实将需重载的 js 包裹在上文示例

中即可,而且貌似无论是否是 script 标签内直接写的,还是第三方引入的,都能重新加载。由于本人较懒,简单粗暴加了个 div 用于刷新,细节方面暂未调整,故还有诸多 js 问题未能解决。这个坑以后慢慢填 (๑´ㅂ`๑))

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
/* 此处可自定义 loading 动画,须与下文 js 所写相同。此处例为。loading */
</style>
<script type="text/javascript">
document.addEventListener('pjax:send', function (){
$(".loading").css("display", "block");
});

document.addEventListener('pjax:complete', function (){
$(".loading").css("display", "none");
});
</script>

上述代码将添加一个加载动画,加载时显示,加载完成后消失,避免让访问者以为点击未生效。

至此,pjax 基本配置完毕。更多配置详见 github 上作者官方文档。