html切网页音乐会停,hexo NexT主题插入音乐

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

找到选中的歌的地址：

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

将外链插入到hexo/themes/next/layout中的文件中我选择把播放器放在sidebar里面，所以我就选择了_macro文件夹中的 sidebar.swig文件，将之前复制的代码到了该文件中我选择将音乐盒子放在这个div下面

如果选择放到主页的话，就放到_layout.swig文件中去就行了

最后，保存，提交。

hexo g -d

效果图如下：

BUG

然后我发现两个bug这个音乐插入只能在本地播放，就是说blog同步到线上的时候就没有音乐了

还有就是切换页面的时候，比如我从首页点到日志，音乐播放器就会暂停，网页重新加载一次，音乐会重新播放一次

解决问题

bug1

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

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

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

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

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

bug2

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

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

主页面使用frame

实际上是隐藏了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();

}

html切网页音乐会停,hexo NexT主题插入音乐相关推荐

Hexo主题插入音乐之aplayer音乐播放器
原文首发自:https://wiki.hushhw.cn/posts/a84d1ef1.html 今天折腾的点是给博客中插入音乐,找到的具体可行的方案有: 使用音乐平台提供的插件体验很差使用hex ...
hexo yilia主题添加音乐
又无法发布,到底为什么,我的个人博客:http://www.lookk.cn/2017/12/09/heox-%E6%B7%BB%E5%8A%A0%E9%9F%B3%E4%B9%90%E6%B5%8B ...
hexo博客插入音乐播放器
搭建好自己的博客之后,想要在博客中添加音乐播放器.需要hexo-tag-aplayer插件. 使用Git Bash进入本地hexo的文件夹.输入以下命令(异常或网络太慢可以考虑将npm换成cnpm) ...
Hexo+next主题配置踩的坑
Hexo+next主题配置踩的坑下载安装完next主题后才发现一堆的坑.由于next的版本不同.所以有的配置文件和网上的教程不大一样.自己踩了N多坑,于是打算记录一下.于是自己试了好几天才差不多配置 ...
Hexo next主题中添加播放器Aplayer
Hexo next主题中添加播放器Aplayer 下载首先,先下载Aplayer源码:APlayer dist文件夹再将文件中的dist文件夹复制到路径:blog/themes/next/sour ...
2021 hexo matery主题个性魔改
hexo matery主题个性修改一.雪花飘落先来看看效果: 找到你的博客目录,在主题在/themes/matery/layout/layout.ejs 中写下如下代码即可 [外链图片转存失败, ...
hexo next 主题安装 livere 评论插件
之前用gitalk评论插件,但是访问github登录授权感人,有时还要开代理,体验不佳,而且每次都要初始化评论,偶然访问别人的博客发现了一款比较好用的评论插件:livere , 我按照官网研究了一会, ...
web网页设计——体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码
web网页设计--体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
采取HEXO+NexT主题+github.io的方式建立自己的个人主页
采取HEXO+NexT主题+github.io的方式建立自己的个人主页主要知识点注册github帐号,建立io仓库. 本地配置HEXO博客. 克隆NexT主题到本地仓库建立本地博客与github ...

html切网页音乐会停,hexo NexT主题插入音乐

html切网页音乐会停,hexo NexT主题插入音乐相关推荐

最新文章

热门文章