hexo-butterfly-音频视频播放器嵌入
hexo-butterfly-音频视频播放器嵌入
更新记录
2021-01-06
基于hexo-butterfly主题扩展：引入音频播放器、douban组件引入
hexo-butterfly-音频视频播放器嵌入
1.音乐引入
开发说明
实现引入有两种方式，一种是在markdown中用原生的html编写（需开启配置文件中aplayerInject配置），一种则是借助hexo-tag-aplayer插件进行渲染（区分全局引用、部分引用）
原生html实现方式
<div class="aplayer" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-mutex="true" data-preload="auto" data-theme="#3F51B5"></div>引用hexo-tag-aplayer插件
# 安装hexo-tag-aplayer插件
npm install hexo-tag-aplayer全局引用
hexo项目根目录引入配置
aplayer:
meting: true
asset_inject: false_config.butterfly.yml主题配置文件中配置aplayerInject
# Inject the css and script (aplayer/meting)
aplayerInject:
enable: true
per_page: true插入代码到页脚
inject:
head:
bottom:
- <div class="aplayer no-destroy" data-id="xxx" data-server="xxx" data-type="artist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div> 如果在切换页面的时候音乐不中断，则将主题配置文件中的pjax设置为true
参数配置说明
参数配置最核心的内容就是data-id、data-server的配置（如果播放器没有正常加载则检查相关的配置是否正常），以网易云为参考，可以选择歌单生成相应的外链播放器：
网页版访问任意指定歌单列表：
如果是通过app端访问，则自定义歌单列表（公开）通过分享的方式获取到链接，摘取其中的data_id
- 其余参数配置说明
相关参数配置参考APlayer官方文档说明
选项 | 默认值 | 描述 |
|---|---|---|
data-id | 必须值 | 歌曲 id / 播放列表 id / 相册 id / 搜索关键字 |
data-server | 必须值 | 音乐平台: netease, tencent, kugou, xiami, baidu |
data-type | 必须值 | song, playlist, album, search, artist |
data-fixed | false | 开启固定模式 |
data-mini | false | 开启迷你模式 |
data-loop | all | 列表循环模式：all, one,none |
data-order | list | 列表播放模式： list, random |
data-volume | 0.7 | 播放器音量 |
data-lrctype | 0 | 歌词格式类型 |
data-listfolded | false | 指定音乐播放列表是否折叠 |
data-storagename | metingjs | LocalStorage 中存储播放器设定的键名 |
data-autoplay | true | 自动播放，移动端浏览器暂时不支持此功能 |
data-mutex | true | 该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停 |
data-listmaxheight | 340px | 播放列表的最大长度 |
data-preload | auto | 音乐文件预载入模式，可选项： none, metadata, auto |
data-theme | #ad7a86 | 播放器风格色彩设置 |
局部引用
# 插件会在每个文件中都插入js、css，3.0版本中内置了aplayer依赖的js、css，需要进行相应配置
# 1.项目根目录主配置文件_config.yml文件中配置asset_inject为false
aplayer:
asset_inject: false
# 2.在需要用aplayer的页面中的Front-matter中添加配置
aplayer: true
# 插件引入语法格式
{% meting "000PeZCQ1i4XVs" "tencent" "artist" "theme:#3F51B5" "mutex:true" "preload:auto" %}2.电影引入
电影界面引入插件hexo-butterfly-douban
<1>安装hexo-butterfly-douban插件
npm install hexo-butterfly-douban --save<2>配置主配置文件_config.yml
douban:
user: mythsman # 豆瓣ID
builtin: false # true:hexo g执行则生成相关页面;false:hexo g & hexo douban指令组合方生成页面
book:
title: 'This is my book title' # 页面标题
quote: 'This is my book quote' # 页面开头的一段话（支持html语法）
meta: true
comments: true # 是否显示评论
top_img: https://cccccc.png # 是否显示顶部图
aside: true # 是否显示侧边栏
path: books # 生成的网址地址: 默认为/blog/设定的path 可自定义分级管理
limit:
movie:
title: 'This is my movie title'
quote: 'This is my movie quote'
meta: true
comments: true
top_img: https://cccccc.png
aside: true
path: movies
limit:
game:
title: 'This is my game title'
quote: 'This is my game quote'
meta: true
comments: true
top_img: https://cccccc.png
aside: true
path: games
limit:
timeout: 10000 # 数据爬取超时控制参数配置说明
參數 | 解釋 |
|---|---|
user | 你的豆瓣ID.（”個人主頁”处查看） 参考地址信息：”https://www.douban.com/people/xxxxxx/“ ，其中的”xxxxxx”就是個人ID |
builtin | 是否將生成頁面的功能嵌入hexo s和hexo g中，默認是false,另一可選項為true(1.x.x版本新增配置項) |
title | 該頁面的標題 |
quote | 寫在頁面開頭的一段話,支持 html 語法. |
timeout | 【可選】爬取數據的超時時間，默認是 10000ms ,如果在使用時發現報了超時的錯(ETIMEOUT)可以把這個數據設置的大一點 |
meta | 【可選】插入 <meta name="referrer" content="no-referrer"> 到頁面，可解決部分瀏覽器無法顯示豆瓣圖片的問題（會導致一些插件出錯，例如不蒜子計數器。） |
comments | 【可選】是否顯示評論 |
top_img | 【可選】是否顯示頂部圖 |
aside | 【可選】是否顯示側邊欄 |
path | 【可選】生成的網址 movie頁面默認為 /blog/movies book 頁面默認為 /blog/books game 頁面默認為 /blog/games |
limit | 【可選】限制爬取的頁數 |
如果設置中 builtin 設為 true 的，直接運行 hexo g 就會自動生成。
如果設置中 builtin 設為 false 的,需要在 hexo g 後再運行 hexo douban
如果访问失败，则确认相关的页面是否在生成
腾讯云开发者
