今天,当我在介绍技术高人的博客时,发现他们面向生活的博客上登载了自己喜欢的音乐,我很向往。 以我的好奇心和好苦的个性,需要赋予我的博客这个功能。
这篇文章始于我的技术博客Timbok.top
正文10多分钟百度加谷歌看到了两种可行的方法。
方法安装hexo-tag-aplayer后
NPM install---- savehexo-tag-a player
引进到需要的地方
{% aplayer '曲名' '作者' '音乐_url ' '封面图片_url' 'autoplay' %}
参数列表
title :音轨标题author:音轨作者url:音乐文件URL地址picture_url: (可选)对应于音乐的图像地址narrow: (可选)播放器口袋width:xxx: (可选)播放器宽度(默认值: 100% ) lrc:xxx: )选项)歌词文件的URL地址注意:建议将此URL放在七牛中。 加载速度是两倍。
此插件的GitHub还建议了其他更有用的方法。 使用邮件
以下是GitHub的原话
MetingJS是基于Meting API的APlayer派生播放器,引入MetingJS后,播放器支持QQ音乐、网易云音乐、虾、酷比、百度等平台的音乐播放。
如果此插件使用MetingJS,请在Hexo配置文件_config.yml中设置以下内容:
a复制aplayer: meting: true代码后,您可以使用{% meting .%}在文章中使用MetingJS播放器。
! -简单示例(id、server、type )、) % meting ' 60198 ' ' Netease ' ' playlist ' % )! -高级示例--{ % meting ' 60198 ' ' Netease ' ' playlist ' ' autoplay ' ' mutex 3360 false ' ' list max height 3360340 px ' ' prelo aaaax
方法2利用网络易云提供的音乐iframe标签,配置到ejs模板中。 这样的好处是添加歌曲的位置更自由。
因为网络易云中也有没有iframe的歌曲,所以博客没有使用这个方法
想看总结前添加了音乐效果的东西的人请看。