基于Hexo框架Next主题的个人博客(文章内音乐播放和视频播放)

效果预览:

文章内添加音乐播放器:

文章内使用视频:

音乐播放器插件

一款好用的音乐播放器插件,通过对Meting API的引用,播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。

github项目地址:https://github.com/MoePlayer/hexo-tag-aplayer

官方文档:https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md

安装:npm install --save hexo-tag-aplayer

在站点配置文件里添加如下的内容:

1
2
3
# 文章内音乐播放器 不能在自定义配置文件里添加,只能在站点配置文件里添加
aplayer:
meting: true

使用示例:

1
2
3
4
5
<!-- 简单示例 (id, server, type)  -->
{% meting "60198" "netease" "playlist" %}

<!-- 进阶示例 -->
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

有关选项表如下:

选项 默认值 描述
id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server 必须值 音乐平台: netease, tencent, kugou, xiami, baidu
type 必须值 song, playlist, album, search, artist
fixed false 开启固定模式
mini false 开启迷你模式
loop all 列表循环模式:all, one,none
order list 列表播放模式: list, random
volume 0.7 播放器音量
lrctype 0 歌词格式类型
listfolded false 指定音乐播放列表是否折叠
storagename metingjs LocalStorage 中存储播放器设定的键名
autoplay true 自动播放,移动端浏览器暂时不支持此功能
mutex true 该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停
listmaxheight 340px 播放列表的最大长度
preload auto 音乐文件预载入模式,可选项: none, metadata, auto
theme #ad7a86 播放器风格色彩设置

视频播放插件

Embed dplayer in Hexo posts/pages

GitHub项目地址:https://github.com/MoePlayer/hexo-tag-dplayer

安装:npm install hexo-tag-dplayer --save

使用:在文章内调用

no url specified, no dplayer _(:3」∠)_

参考:https://github.com/MoePlayer/hexo-tag-dplayer/blob/master/README.md#usage

文章不错哟,快快打赏吧!
0%