APlayer 博客框架插件汇总

为什么需要插件

博客框架插件的意义在于：让你不需要写任何 JavaScript 代码，只需要在文章里写一个简短的标签或短代码，就能渲染出完整的 APlayer 播放器。插件帮你处理了引入 CSS/JS、管理静态资源、缓存歌词等脏活累活。

Typecho

插件名：APlayer-Typecho-Plugin 作者：zgq354 GitHub 地址：搜索 zgq354/APlayer-Typecho-Plugin

使用方式：

1. 下载插件解压到 Typecho 的 usr/plugins/ 目录
2. 在后台启用插件
3. 文章里写：

[aplayer]http://example.com/song.mp3[/aplayer]

或者配合 Meting：

[meting]netease://song/198239[/meting]

Hexo

插件名：hexo-tag-aplayer 作者：grzhan GitHub 地址：搜索 grzhan/hexo-tag-aplayer

安装：

npm install hexo-tag-aplayer

启用 Meting 支持（可选），在 _config.yml 中：

aplayer:
  meting: true

文章中使用：

{% aplayer "歌曲名称" "艺术家" "your-song.mp3" "your-cover.jpg" %}
{% endaplayer %}

或者配合 Meting：

{% meting "198239" "netease" "song" %}

WordPress

Hermit-X

插件名：Hermit-X (APlayer for WordPress) 作者：liwanglin12

特点：后台有完整设置面板，可以在 WordPress 后台管理音乐列表，支持 Meting API 接入。

使用方式：

1. 从 WordPress 插件库搜索 "Hermit-X" 安装
2. 在 WordPress 后台添加歌曲或歌单
3. 文章中使用简码 [hermit]

APlayerHandle

插件名：APlayerHandle 作者：kn007

特点：轻量插件，在文章中通过简码插入 APlayer。

Z-BlogPHP

插件名：APlayer_for_Z-BlogPHP 作者：fghrsh

Z-BlogPHP 有多个 APlayer 插件可选，fghrsh 的版本比较常用。支持在文章内容中通过自定义字段或 HTML 简码插入播放器。

Hugo

模块名：aplayer-hugo-module 作者：Runzelee

特点：作为 Hugo 模块使用，引入后在 Markdown 文件中通过 Shortcode 插入。

使用：

{{< aplayer >}}
[{
    "name": "歌曲名称",
    "artist": "艺术家",
    "url": "audio.mp3",
    "cover": "cover.jpg"
}]
{{< /aplayer >}}

其他框架

• VuePress：通过 Vue 组件方式集成（参见下一页 Vue 和 React 组件）
• Jekyll：直接用 CDN 引入，在 _layouts 模板中加入脚本
• Ghost：同上，在 Ghost 的 Code Injection 中引入

插件 vs 手动嵌入怎么选