更新记录

更新记录

2021-01-06

基于hexo-butterfly主题扩展:引入音频播放器、douban组件引入

hexo-butterfly-音频视频播放器嵌入

1.音乐引入

开发说明

​ 实现引入有两种方式,一种是在markdown中用原生的html编写(需开启配置文件中aplayerInject配置),一种则是借助hexo-tag-aplayer插件进行渲染(区分全局引用、部分引用)

原生html实现方式

1
<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插件

1
2
# 安装hexo-tag-aplayer插件
npm install hexo-tag-aplayer

全局引用

hexo项目根目录引入配置

1
2
3
aplayer:
meting: true
asset_inject: false

_config.butterfly.yml主题配置文件中配置aplayerInject

1
2
3
4
# Inject the css and script (aplayer/meting)
aplayerInject:
enable: true
per_page: true

插入代码到页脚

1
2
3
4
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 播放器风格色彩设置

局部引用

1
2
3
4
5
6
7
8
9
10
11
# 插件会在每个文件中都插入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插件

1
npm install hexo-butterfly-douban --save

<2>配置主配置文件_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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 shexo 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

如果访问失败,则确认相关的页面是否在生成