本文來自我的個(gè)人博客 https://www.zhangshenghai.com/posts/30334/
感謝開源??!讓我們用上了這么好的插件!
創(chuàng)建歌單頁(yè)面
由于我想在單獨(dú)的頁(yè)面加入歌單,所以額外創(chuàng)了個(gè)頁(yè)面,也可以直接在文章中插入,原理都是一樣的。
-
新建頁(yè)面,命名為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)庫(kù)中的圖標(biāo),網(wǎng)址為 http://www.fontawesome.com.cn/faicons/ ??梢赃x擇自己喜歡的圖標(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)的歌曲(簡(jiǎn)直是神器),首先要在站點(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ò)的:
