The World Best ST.

Hexo插件

hexo
字数统计: 781阅读时长: 3 min
2020/04/04 Share

HEXO插件

今日机缘巧合看到了一个厉害的音乐播放JS（Aplayer.js），顺藤摸瓜又看到了它的好兄弟hexo-tag-aplayer，感觉开启了新世界的大门。
先放首歌听听

hexo-tag-aplayer

安装

在本地博客文件夹内执行
npm install --save hexo-tag-aplayer

入门使用

在想要嵌入的文章中加入如下代码: 

1
{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

参数解释

参数 描述 是否必选
title 曲目标题 必选
author 曲目作者 必选
url 音乐文件 URL 地址 必选
picture_url 音乐对应的图片地址 可选
narrow 播放器袖珍风格 可选
autoplay 自动播放，移动端浏览器暂时不支持此功能 可选
width:xxx 播放器宽度 (默认: 100%) 可选
lrc:xxx 歌词文件 URL 地址 可选

For Example

1
{% aplayer "あまねき祈り" "花たん" "https://m801.music.126.net/20200404170207/87f722be935b163cc15f0b4ee007cbf0/jdyyaac/0e5f/0509/0f5d/9585b41fd22cb749977b87573cdfc4f7.m4a" "http://p2.music.126.net/qgjTfkkpaSDB544TXpczNg==/7943971512497703.jpg?param=130y130" %}

PS：此方法需要有明确的播放链接

MeingJS

MetingJS 是基于Meting API 的 APlayer 衍生播放器，引入 MetingJS 后，播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。

开启MeingJS

在hexo配置文件_config.yml中设置

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

For Example

1
{% meting "33913985" "netease" "song" %}

自定义配置

可以在hexo配置文件_config.yml文件中进行如下配置：

1
2
3
4
5
6
7
8
9
10
aplayer:
  script_dir: some/place                        # Public 目录下脚本目录路径，默认: 'assets/js'
  style_dir: some/place                         # Public 目录下样式目录路径，默认: 'assets/css'
  cdn: http://xxx/aplayer.min.js                # 引用 APlayer.js 外部 CDN 地址 (默认不开启)
  style_cdn: http://xxx/aplayer.min.css         # 引用 APlayer.css 外部 CDN 地址 (默认不开启)
  meting: true                                  # MetingJS 支持
  meting_api: http://xxx/api.php                # 自定义 Meting API 地址
  meting_cdn: http://xxx/Meing.min.js           # 引用 Meting.js 外部 CDN 地址 (默认不开启)
  asset_inject: true                            # 自动插入 Aplayer.js 与 Meting.js 资源脚本, 默认开启
  externalLink: http://xxx/aplayer.min.js       # 老版本参数，功能与参数 cdn 相同

参考资料（超赞的）：
https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md

原文作者：itibanst

原文链接：https://st19950627.github.io/2020/04/04/Hexo插件/

发表日期：April 4th 2020, 4:53:12 pm

更新日期：April 4th 2020, 5:57:08 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. HEXO插件
    1. 1.1. hexo-tag-aplayer
      1. 1.1.1. 安装
      2. 1.1.2. 入门使用
        1. 1.1.2.1. 参数解释
        2. 1.1.2.2. For Example
      3. 1.1.3. MeingJS
        1. 1.1.3.1. 开启MeingJS
        2. 1.1.3.2. 食用方法
        3. 1.1.3.3. 参数解释
        4. 1.1.3.4. For Example
      4. 1.1.4. 自定义配置
Total : 39
2023
2022
2021
2020
2019
Apollo Docker Dynamic Datasource ELK 日志系统 Gradle hexo K8S Linux List Set Map SLF4J 日志 JDK8 Restful adobe 插件 Token Session Cookie SpringBoot LIVER 定时任务 leetcode Electron JAVA 算法 回溯法 资产托管 托管 测试 Redis Api 递归 设计模式 编程规范 推荐系统 前端 React vue