hexo-butterfly-音频播放器&豆瓣信息嵌入本篇记录如何在hexo项目中引入音频播放器（aplayer）和do

「这是我参与2022首次更文挑战的第19天，活动详情查看：2022首次更文挑战」

前言本篇记录如何在hexo项目中引入音频播放器（aplayer）和douban插件（展示个人豆瓣影音列表）

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.（"個人主頁"处查看）参考地址信息："www.douban.com/people/xxxx…" ，其中的"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

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

hexo-butterfly-音频播放器&豆瓣信息嵌入