Hexo博客使用aplayer音乐播放插件

闪光桐人

已于 2022-07-28 14:37:49 修改

阅读量2.6k

点赞数 3

分类专栏：个人博客文章标签： blog Hexo aplayer 博客 javascript

于 2022-07-28 14:30:28 首次发布

本文链接：https://blog.csdn.net/qq_38677092/article/details/126033414

版权

个人博客专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先：本文基于CentOS 8.5 64位，其他操作系统请注意修改对应命令关键字，并且本文只介绍Hexo部署的方法和过程，

文章目录

前情提要
〇、懒人版
一、独立部署
- 写法1
- 写法2
二、插件配置
三、PJAX

前往闪闪の小窝获取更佳的阅读体验

前情提要

老样子，专为Hexo做的适配版不一定好用，加上年久失修我也没能力自己解决bug，部署的时候有这样那样的问题，所以还是用原版的来，文档也比较全，适合我这样的菜鸡

aplayer项目地址

aplayer文档地址

效果查看：闪闪の小窝
效果1
效果2

〇、懒人版

也就是使用cdn，省去独立部署的部分

首先，你要参照二、插件配置完成配置，再进行下面这一步

在主题配置文件（以我的fluid主题举例）自定义添加html的地方添加以下内容（或者你去你hexo的layout里加上），这样可以在所有页面都显示这个底部插件

注意：aplayer是可以单独插入在博客内容里的，比如小黑盒一些新闻页面有的人就会专门放一个当前文章内容里用的bgm等，部署十分灵活，可以自定义

custom_html: '

              <!--aplayer-->
              <link rel="stylesheet" href="https://unpkg.com/browse/aplayer@1.10.1/dist/APlayer.min.css">
              <div id="aplayer"></div>
              <script src="https://unpkg.com/browse/aplayer@1.10.1/dist/APlayer.min.js"></script>
              <script src="https://你的域名/js/useaplayer.js"></script>

'

然后传统艺能

pm2 delete 0
hexo g
pm2 start hexo_run.js

结束

一、独立部署

cd /usr/local/blog/source/js
git clone https://github.com/DIYgod/APlayer.git

写法1

在主题配置文件（以我的fluid主题举例）自定义添加html的地方添加以下内容（或者你去你hexo的layout里加上），这样可以在所有页面都显示这个底部插件

# 自定义底部 HTML 内容（位于 footer 上方），注意不要和 `post: custom` 配置冲突
# Customize the HTML content at the bottom (located above the footer), be careful not to conflict with `post: custom`
custom_html: '

              <!--aplayer-->
              <link rel="stylesheet" href="https://你的域名/js/APlayer/dist/APlayer.min.css">
              <div id="aplayer"></div>
              <script src="https://你的域名/js/APlayer/dist/APlayer.min.js"></script>
              <script src="https://你的域名/js/useaplayer.js"></script>

'

写法有很多，看你的主题是怎么支持的，比如fluid还支持custom_js，比较追求整洁、追求完美分类的可以这样……（就是矫情）

写法2

# 指定自定义 .js 文件路径，支持列表；路径是相对 source 目录，如 /js/custom.js 对应存放目录 source/js/custom.js
# Specify the path of your custom js file, support list. The path is relative to the source directory, such as `/js/custom.js` corresponding to the directory `source/js/custom.js`
custom_js: 
	- /js/useaplayer.js
	- /js/APlayer/dist/APlayer.min.js

# 指定自定义 .css 文件路径，用法和 custom_js 相同
# The usage is the same as custom_js
custom_css:
	- /js/APlayer/dist/APlayer.min.css

二、插件配置

在你blog文件夹的source文件夹的js文件夹里新建一个useaplayer.js，内容根据官方文档自行配置
参数配置
以下是我的个人配置，供参考：

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
    lrcType: 3,
    audio: [
        {
            name: '花の塔',
            artist: 'さユり',
            url: 'http://music.163.com/song/media/outer/url?id=1956534872.mp3',
            cover: 'https://p2.music.126.net/fS_5RbP_4qg-RYreqp2tGg==/109951167558017839.jpg?param=130y130',
            lrc: 'https://moechun.fun/music/lrc/さユり - 花の塔.lrc'
        },
        {
            name: '花の塔',
            artist: 'さユり',
            url: 'http://music.163.com/song/media/outer/url?id=1956534872.mp3',
            cover: 'https://p2.music.126.net/fS_5RbP_4qg-RYreqp2tGg==/109951167558017839.jpg?param=130y130',
            lrc: 'https://moechun.fun/music/lrc/さユり - 花の塔.lrc'
        },
    ]
});