Hexo添加Aplayer播放器

本文来自我的个人博客 https://www.zhangshenghai.com/posts/30334/

感谢开源!!让我们用上了这么好的插件!

创建歌单页面

由于我想在单独的页面加入歌单,所以额外创了个页面,也可以直接在文章中插入,原理都是一样的。

  1. 新建页面,命名为playlist:

    hexo new page playlist
    
  2. 这时候在 /Hexo/source 文件夹下会生成一个playlist文件夹,打开里面的index.md,修改如下:

    title: 歌单
    date: 2019-02-21 16:14:00
    type: "playlist"
    
  3. 打开主题的 _config.yml文件,在menu下新建一个名为playlist的类(注意这里使用的图标是图标库中的图标,网址为 http://www.fontawesome.com.cn/faicons/ 。可以选择自己喜欢的图标,我这里选择的是music)。完成后如下所示:

    menu:
      home: / || home
      categories: /categories/ || th
      tags: /tags/ || tags
      archives: /archives/ || archive
      playlist: /playlist/ || music
      about: /about/ || user
    
  4. 打开/Hexo/themes/hexo-theme-next/languages/zh-Hans.yml,添加对应的中文翻译:

    menu:
      playlist: 歌单
    

这样歌单就创建完成啦~

使用 hexo-tag-aplayer 插件

  1. hexo-tag-aplayer 是Aplayer在hexo上的插件,这里的配置参考的是官方文档 ,第一步安装 hexo-tag-aplayer:

    npm install --save hexo-tag-aplayer
    
  2. 最新版的 hexo-tag-aplayer 已经支持了MetingJS的使用,可以直接解析网络平台的歌曲(简直是神器),首先要在站点配置文件中开启meting模式,添加以下代码在配置文件的最后:

    aplayer:
      meting: true
    
  3. 复制歌单的链接,然后复制歌单的id,例如 https://music.163.com/playlist?id=523845661&userid=46562117 ,这个歌单的id就是523845661,公司名可以是tencent、netease或是其他公司,下面给出一个例子,打开 /Hexo/source/playlist/index.md文件,输入:

{% meting "523845661" "netease" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}

效果还是很不错的:


image

推荐阅读更多精彩内容

  • 本文主要从三方面来介绍: 利用GitPages+Hexo从0到1搭建个人博客的基础流程; 一些博客自定义(更换Ne...
    崔小叨阅读 3,738评论 15 65
  • 前言 这算是各种文章的集合了,如果你有耐心就看完吧(T▽T) 如果是明确想要哪一种功能的童鞋,那就直接查找吧( ...
    前端攻城狮阿黄阅读 2,313评论 1 6
  • 刚刚一辆摩托车以极快的速度从我身边飞驰而过,快到什么程度?我的心都颤抖了,我好怕那个开车的人不长眼,从我身边擦身而...
    真爱521阅读 43评论 0 0
  • 在错漏百出的人间与旧人巧碰 就连相视一笑 也严丝合缝 所谓成人呀 也不过是 讨厌醒来 又不敢做梦 ——《错漏百出的巧碰》
    段童阅读 122评论 0 8
  • ❤四月份打卡❤ 目标/已完成总量/当天跑量 己完的 1.鸟叔 120/144/8 2.陈森森 50/50/8 ...
    鸟叔_0c54阅读 205评论 0 1