Hexo博客利用Hexo插件插入音樂/視頻

本文屬於《利用hexo+github搭建博客、網站》系列教程

閑話少說進入正文：

本文是技術文章閑話少說直接進入正文，本文的目錄如下：

前言

準備工作

需要安裝hexo並利用hexo寫博客需要在電腦安裝以下軟體進行電腦環境配置。

正所謂沒有逼格的博客不是好博客，而在自己搭建的博客里插入音樂或者視頻能秒秒鐘拉高博客的格調。Hexo作為一款優秀的靜態博客生成器，當然也少不了這些吊炸天的功能。

首先我們需要通過命令行安裝以下兩款插件（當然裝一個就可以了，如果一個實現不了再裝另一個），這兩款插件我們都可以從hexo的官方網站上查詢到：

hexo-tag-aplayer

hexo-tag-dplayer

插件介紹

hexo-tag-aplayer

本項目是將diygod的dplayer運行在hexo的插件；項目地址：https://github.com/MoePlayer/hexo-tag-aplayer

感謝關注這個插件的人們，感謝aplayer的hexo插件作者@grzhan，感謝A or D播放器作者@Diygod

hexo-tag-dplayer

本項目是將diygod的dplayer運行在hexo的插件

感謝關注這個插件的人們，感謝aplayer的hexo插件作者@grzhan，感謝A or D播放器作者@Diygod

插件安裝

在你本地安裝博客的根目錄下右擊滑鼠打開Git Bash ，運行如下兩條命令來分別安裝以上的兩款插件：

npm install hexo-tag-dplayer

npm install hexo-tag-aplayer

運行之後如圖所示：

此時你會在 blog/node_modules 目錄下發現有兩個aplayer 和 `dplayer 的文件夾。（這個blog文件是你在搭建博客時自定義命名的文件）

添加音樂

詳細查看：https://github.com/MoePlayer/hexo-tag-aplayer

https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md

在markdown內添加以下代碼：

{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

title : music title

author: music author

url: music file url

picture_url: optional, music picture url

narrow: optional, narrow style

autoplay: optional, autoplay music, not supported by mobile browsers

width:xxx: optional, prefix width:, player"s width (default: 100%)

lrc:xxx: optional, prefix lrc:, LRC file url

{% aplayer"她的睫毛""周杰倫""http://home.ustc.edu.cn/~mmmwhy/%d6%dc%bd%dc%c2%d7%20-%20%cb%fd%b5%c4%bd%de%c3%ab.mp3""http://home.ustc.edu.cn/~mmmwhy/jay.jpg""autoplay=false"%}

效果：

播放列表代碼：

{% aplayerlist %}

{

"narrow": false, // （可選）播放器袖珍風格

"autoplay": true, // （可選) 自動播放，移動端瀏覽器暫時不支持此功能

"mode": "random", // （可選）曲目循環類型，有 "random"（隨機播放）, "single" (單曲播放), "circulation" (循環播放), "order" (列表播放)， 默認："circulation"

"showlrc": 3, // （可選）歌詞顯示配置項，可選項有：1,2,3

"mutex": true, // （可選）該選項開啟時，如果同頁面有其他 aplayer 播放，該播放器會暫停

"theme": "#e6d0b2", // （可選）播放器風格色彩設置，默認：#b7daff

"preload": "metadata", // （可選）音樂文件預載入模式，可選項： "none" "metadata" "auto", 默認: "auto"

"listmaxheight": "513px", // (可選) 該播放列表的最大長度

"music": [

{

"title": "CoCo",

"author": "Jeff Williams",

"url": "caffeine.mp3",

"pic": "caffeine.jpeg",

"lrc": "caffeine.txt"

},

{

"title": "アイロニ",

"author": "鹿乃",

"url": "irony.mp3",

"pic": "irony.jpg"

}

]

}

{% endaplayerlist %}

插入視頻

詳細代碼查看：https://github.com/MoePlayer/hexo-tag-dplayer

http://dplayer.js.org/#/zh-Hans/

代碼：

key屬性包括：

dplayer options:

"autoplay", "loop", "screenshot", "hotkey", "mutex", "dmunlimited" : bool options, use "yes" "y" "true" "1" "on" or just without value to enable

"preload", "theme", "lang", "logo", "url", "pic", "thumbnails", "vidtype", "suburl", "subtype", "subbottom", "subcolor", "subcolor", "id", "api", "token", "addition", "dmuser" : string arguments

"volume", "maximum" : number arguments

container options:

"width", "height" : string, used in container element style

other:

"code" : value of this key will be append to script tag

在markdown內添加以下代碼：

{% dplayer"url=http://home.ustc.edu.cn/~mmmwhy/GEM.mp4""pic=http://home.ustc.edu.cn/~mmmwhy/GEM.jpg""loop=yes""theme=#FADFA3""autoplay=false""token=tokendemo"%}

效果：

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！