本文來自我的個(gè)人博客 https://www.zhangshenghai.com/posts/30334/
感謝開源M蔽弧肥荔!讓我們用上了這么好的插件绿渣!
創(chuàng)建歌單頁面
由于我想在單獨(dú)的頁面加入歌單燕耿,所以額外創(chuàng)了個(gè)頁面,也可以直接在文章中插入淀散,原理都是一樣的。
-
新建頁面档插,命名為playlist:
hexo new page playlist
-
這時(shí)候在 /Hexo/source 文件夾下會(huì)生成一個(gè)playlist文件夾,打開里面的index.md郭膛,修改如下:
title: 歌單 date: 2019-02-21 16:14:00 type: "playlist"
-
打開主題的 _config.yml文件则剃,在menu下新建一個(gè)名為playlist的類(注意這里使用的圖標(biāo)是圖標(biāo)庫中的圖標(biāo)耘柱,網(wǎng)址為 http://www.fontawesome.com.cn/faicons/ 棍现。可以選擇自己喜歡的圖標(biāo)士袄,我這里選擇的是music)谎僻。完成后如下所示:
menu: home: / || home categories: /categories/ || th tags: /tags/ || tags archives: /archives/ || archive playlist: /playlist/ || music about: /about/ || user
-
打開/Hexo/themes/hexo-theme-next/languages/zh-Hans.yml,添加對(duì)應(yīng)的中文翻譯:
menu: playlist: 歌單
這樣歌單就創(chuàng)建完成啦~
使用 hexo-tag-aplayer 插件
-
hexo-tag-aplayer 是Aplayer在hexo上的插件戈稿,這里的配置參考的是官方文檔 讶舰,第一步安裝 hexo-tag-aplayer:
npm install --save hexo-tag-aplayer
-
最新版的 hexo-tag-aplayer 已經(jīng)支持了MetingJS的使用,可以直接解析網(wǎng)絡(luò)平臺(tái)的歌曲(簡直是神器)般甲,首先要在站點(diǎn)配置文件中開啟meting模式鹅颊,添加以下代碼在配置文件的最后:
aplayer: meting: true
復(fù)制歌單的鏈接敷存,然后復(fù)制歌單的id堪伍,例如 https://music.163.com/playlist?id=523845661&userid=46562117 ,這個(gè)歌單的id就是523845661涮俄,公司名可以是tencent尸闸、netease或是其他公司孕锄,下面給出一個(gè)例子,打開 /Hexo/source/playlist/index.md文件畸肆,輸入:
{% meting "523845661" "netease" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}
效果還是很不錯(cuò)的: