aplayer是一款非常漂亮的h5音乐播放器,是GitHub开源项目
1. 安装音乐插件
在你的hexo博客目录右键git bash here里输入这行代码
1
| npm install --save hexo-tag-aplayer
|
2. 然后在网站的根目录下的配置文件_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 相同
|
3. 建立音乐页面
使用命令创建音乐界面,比如命名为music。
hexo new page music
打开网站根目录source\music\index.md根据hexo-tag-aplayer文档书写即可。
打开index.md在markdown中要这样写
1
| {% meting "4857802824" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}
|
其会被渲染为html
1 2 3 4 5 6 7 8
| menu: - { key: "home", link: "/", icon: "iconfont icon-home-fill" } - { key: "archive", link: "/archives/", icon: "iconfont icon-archive-fill" } - { key: "category", link: "/categories/", icon: "iconfont icon-category-fill" } - { key: "tag", link: "/tags/", icon: "iconfont icon-tags-fill" } - { key: "about", link: "/about/", icon: "iconfont icon-user-fill" } - { key: "music", link: "/music/", icon: "iconfont icon-music" }
|
添加上这一行
- { key: "music", link: "/music/", icon: "iconfont icon-music" }