hexo添加音乐需要几个步骤?
添加音乐当然可以用其他网站的外链,但是一般外链是<iframe>
,这个影响网站的SEO,逼格也不够高。
下面我就隆重介绍一款html5音乐播放器:Aplayer。把Aplayer加入hexo需要用到hexo-tag-aplayer插件。
切换到hexo目录,运行:
1 | npm install hexo-tag-aplayer@2.0.1 |
这里直接运行npm install hexo-tag-aplayer
只会安装2.0.0,这个版本会出现以下错误:
1 | FATAL Cannot find module '/Users/hechao/Documents/TechBlog/CniceToUpp/node_modules/hexo-tag-aplayer' |
作者给出来解决方案是用2.0.1版本,FATAL Cannot find module解决办法。
安装完成后,在需要添加音乐的地方加上:
1 | {% aplayer "平凡之路" "朴树" "https://xxx.com/%E5%B9%B3%E5%87%A1%E4%B9%8B%E8%B7%AF.mp3" "https://xxx.com/1.jpg" "autoplay" %} |
就会出现你想要的音乐啦,这里我把音乐和专辑封面添加到七牛上,加载速度嗖嗖的。
如果你想加入歌单,把上面的代码换成下面代码就行,参数的用法可以参照插件的使用说明。
1 | {% aplayerlist %}{"narrow": false,"autoplay": true,"showlrc": 3,"mode": "random","music": [{"title": "平凡之路","author": "朴树","url": "http://xxx.com/%E5%B9%B3%E5%87%A1%E4%B9%8B%E8%B7%AF.mp3","pic": "https://xxx.com/1.jpg","lrc": "http://og9ocpmwk.bkt.clouddn.com/%E5%B9%B3%E5%87%A1%E4%B9%8B%E8%B7%AF.txt"},{"title": "野子","author": "苏运莹","url": "http://xxx.com/01%20%E9%87%8E%E5%AD%90.m4a","pic": "http://xxxx.com/%E9%87%8E%E5%AD%90.jpg","lrc":"https://xxx.com/%E9%87%8E%E5%AD%90.txt"}]}{% endaplayerlist %} |
当然,Aplayer的作者还有一款html5的视频播放器,叫Dplayer,对应有一款hexo的插件,叫hexo-tag-dplayer,有需求的可以去看看,用法都差不多。
一起high一下
这个功能是我在Hexo high一下小功能上看到的,觉得很有意思,于是就引进来,改造了一下。
首先是重新封装了一个high.js文件,代码中注释的地方可下载下来放到七牛,加快国内访问速度:
1 | function shake() { |
把这个文件保存在七牛上,在themes—>next—>layout—>_partials—>head.swig中加入这样一段代码,引入high.js文件(src里的内容请替换成自己的外链):
1 | <script type="text/javascript" src="https://xxx.com/high.js"></script> |
然后在themes—>next—>layout—>_macro—>sidebar.swig中加入注释包围中的代码:
1 | <div class="links-of-author motion-element"> |
style中我用了红色,这样显眼一点,不喜欢的话可以改掉。
接下来点击high这个按钮,会出现一下效果:
大坑
当我吭哧吭哧的弄完后,突然发现我运行hexo g
命令后,出现下面两行提示后就不动了~
1 | INFO Start processing |
我用了各种方法,包括版本回退,好像都没用。于是我就尝试切换到hexo默认主题,结果又可以hexo g
,估计是next主题出问题了,于是我重新下了next主题,把我的配置都重新弄了一遍,结果好了~~,不过页脚的地方与之前博客不同,少了”power by hexo”这几个字眼。
更新next后遇到的第一个问题是,不显示文章发表时间了,github上的解答是这样的,文章标题下的发表时间不见了,在主题配置文件里面加上下面的配置,然后就出来了。
1 | # Post meta display settings |
第二个问题,我hexo s
成功后,登陆localhost:4000,发现出现下面的提示:
原因是,我开了shadowsocks的全局模式,切换到自动代理模式,就可以显示网页了。