前言
博客上线后，很久都没有折腾了，大约从一年前开始，陆续的访问统计功能失效，评论功能失效，背景音乐无法播放。
拖延了很久，直到最近部门聊天谈到博客，才突然决定动手修一修。
统计
统计功能使用的是 busuanzi(不蒜子) ，由于七牛强制过期 busuanzi 原来的域名，busuanzi 只能更换到新域名，导致了统计失效。 解决办法也很简单，还是以前的嵌入方案，将脚本中的老域名替换为新域名即可：
- <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
+ <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
评论
评论使用的是 gitment，需要登录 github 账号。
object ProgressEvent
gitment 访问 github oauth 获取 github access token 的时候需要加 CORS header 进行跨域访问。通过 https://imsun.github.io/gitment/dist/gitment.browser.js 的代码可以看出 gitment 是通过作者自己搭建的一个服务来解决跨域访问，目前该服务网站证书过期，导致无法获取 token，从而无法登录评论。该问题参考 gitment issue。
解决办法有二：
-
浏览器信任网站。
很明显，该方法不具有实用性，评论者不可能知道登录前还得信任这么一个网站，即使知道也很繁琐。 -
gitment 作者将该跨域服务的源码进行了开源，可以利用开源代码自己搭建一个服务。
这里偷了个懒，使用 issue 讨论里 shlyren 搭建的临时服务。
Validation Failed
github issue label 有 50 个字符限制，超过长度则会报 Error: Valication Failed，该问题参考 gitment issue。
最终解决方案参考了 issue 评论里的 heropoo 和 cywd
的解决思路，通过判断字符长度是否大于 50，若大于等于 50 则使用文章的 date（转换为 unix 时间戳）作为 label，小于 50 则继续使用原来默认的 window.location.href。这样的好处是完全兼容了那些长度没问题且已存在的正常评论。
<script>
// https://github.com/imsun/gitment/issues/116#issuecomment-388001420
// https://github.com/imsun/gitment/issues/116#issuecomment-414540375
var id = window.location.href;
if(id.length>=50){ // 兼容长度没问题且使用window.location.href已开通的评论
id = String(+ new Date('2019-07-25 03:30:00 +0000'));
}
const gitment = new Gitment({
id: id,
owner: 'xxx',
repo: 'xxx',
oauth: {
client_id: 'xxx',
client_secret: 'xxx',
},
theme: myTheme,
})
gitment.render('gitment')
</script>
背景音乐
背景音乐使用的是网易云音乐的外链播放。出现背景音乐无法播放一般可能来自两个因素：
-
云音乐某首歌曲的外链播放版权没了。
国内对版权这块越来越重视了，这是经常发生的事儿。碰上这种情况只能把该曲子从背景音乐里撤掉。 -
浏览器禁止自动播放
- chrome
-
方案一
在浏览器输入chrome://flags/#autoplay-policy，第一个选项 Autoplay policy 设置为 no user gesture is required。
该方案有两个缺陷，一是 policy:autoplay 是试验性的 flag，在 chrome 76 上已被移除；二是该方案必须在每个用户端的浏览器上设置一遍。 -
方案二
在 BGM iframe 上增加属性allow="autoplay"，参考 Autoplay Policy Changes。
该方案存在的问题：chrome 76 及以上首次打开页面时无法自动播放，但是点击任一页面后即会自动播放。
可以简单理解为，有了用户行为交互就获取了自动播放权限。哪怕是点击当前页面空白处也会获取自动播放权限，重新刷新一下页面便会开始自动播放。
这就是 google 的设计意图，当前页面没有用户交互行为，那么不希望用户受到打扰；如果有了用户交互行为，说明用户注意力已集中在了当前页面，那么这个时候就允许自动播放了。
-
- safari
参考 Safari 浏览器使用手册
- chrome