hexo NexT主题插入音乐

发表于   |   分类于

获取网易云音乐插件外链

  • 找到选中的歌的地址：

  • 获取外链，选择是否播放模式，并复制箭头指向的那段代码

  • 将外链插入到hexo/themes/next/layout中的文件中

我选择把播放器放在sidebar里面，所以我就选择了_macro文件夹中的 sidebar.swig文件，将之前复制的代码到了该文件中

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/outchain/player?type=2&id=31284032&auto=1&height=66"></iframe>

我选择将音乐盒子放在这个div下面

  • 如果选择放到主页的话，就放到_layout.swig文件中去就行了
    最后，保存，提交。

hexo g -d

效果图如下：

BUG

然后我发现两个bug

  • 这个音乐插入只能在本地播放，就是说blog同步到线上的时候就没有音乐了
  • 还有就是切换页面的时候，比如我从首页点到日志，音乐播放器就会暂停，网页重新加载一次，音乐会重新播放一次

解决问题

bug1

在发布本地博文的过程中，页面解析时可能因为跨域的原因，播放器无法加载出来，会报如图的错误

诺，最下面的两个错误，所以音乐播放器才显示不出来

那么！重点来了！！这个问题怎么解决呢！！！

很简单，把http改成https就好啦

然后hexo deploy就可以完美的看到播放器惹~~~

bug2

原则上不同的页面，资源重新加载，音乐的播放会被重置。

要实现音乐的连续播放，可以尝试使用如下的一些方法：

主页面使用frame

<html>
    <frameset cols="0%,100%">
        <frame src="music.html">
        <frame src="index.html">
    </frameset>
</html>

实际上是隐藏了music.html，只显示index.html，然后页面切换只是在index.html所在的那个frame发生，而主页面和music页面实际未重新加载。

这样音乐可以连续播放，但缺点是没办法在index.html页面中控制音频播放。

使用ajax+HTML5 history API

Ajax动态加载非音乐部分的页面，使用HTML5 history API来控制浏览器的前后跳转。

history.pushState(null, null, link.href);

在按下浏览器回退时，触发popState事件，

window.addEventListener("popstate", function(e) {
    //loadPreviousPage();
}
客官，打赏一下嘛~~