天天看點

Hexo部落格中插入音樂

hexo 搭建的個人部落格:Aileen-zl

1. 前言

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

2. 準備工作

     準備工作當然是你得把自己的部落格給搭建好了。在這裡需要提一句,不管是搭建部落格,還是後期寫markdown的文章,都少不了打開各種格式檔案的工具,要知道一個好的工具能讓我們做事事半功倍。

     修改主題檔案裡涉及到的各種檔案,我都隻使用了

sublime

,這款軟體不管是從界面簡化程度、顔值、快捷鍵、還是軟體大小都讓我愛不釋手,以至于最後我用markdown寫部落格的時候都在使用它,你可能會問:markdown寫部落格不需要邊寫邊看渲染效果嗎?其實這個渲染效果沒必要随時看,隻需要最後寫好的時候看看,再對需要修改的地方進行微調就好,因為當非常熟悉了markdown的文法以及對應的實作效果之後,都不太去看最後渲染出來的效果。當然最初編寫的時候我都是在csdn上寫部落格的時對markdown文法慢慢熟練起來,線下編寫我也使用過MP、馬克飛象等工具,但是順手程度都感覺不如 sublime。如果實在想編寫和渲染同時進行的話,可以推薦一款線上markdown編輯器:線上markdown編輯器 優點我就不多說了,因人而異,自行體驗。

3. 裝插件

     首先我們需要通過指令行安裝以下兩款插件(當然裝一個就可以了,如果一個實作不了再裝另一個),這兩款插件我們都可以從hexo的官方網站上查詢到:插件

hexo-tag-aplayer

hexo-tag-dplayer

安裝方法:

     在你本地安裝部落格的根目錄下右擊滑鼠打開

Git Bash

,運作如下兩條指令來分别安裝以上的兩款插件:

npm install hexo-tag-dplayer

npm install hexo-tag-aplayer

     運作之後如圖所示:

Hexo部落格中插入音樂

     此時你會在

blog/node_modules

目錄下發現有兩個

aplayer

`dplayer

的檔案夾。(這個blog檔案是你在搭建部落格時自定義命名的檔案)

4. 添加音樂

     在我的部落格中我選擇添加的是網易雲音樂。首先我們打開網易雲音樂的首頁,然後搜尋你喜歡的音樂,然後進入音樂的詳情頁面,點選

生成外鍊播放器

:(如下圖所示)

Hexo部落格中插入音樂

     選擇 iframe 插件,複制如下圖所示的代碼:

Hexo部落格中插入音樂

     以我自己的部落格為例吧:因為我想把這個播放器放在部落格頁面的左側欄裡,是以就把以上代碼複制到主題檔案夾下實作左側欄的那個模闆檔案裡,也就是

blog\themes\black-blue\layout\_partial\left-col.ejs

這個

left-col.ejs

檔案,(需要值得注意的是,因為所使用的主題不同,可能檔案也就不一樣,但是大緻原理就如剛才我所提到的:想放在哪個區域,就把代碼複制到實作那塊區域的模闆檔案裡)。

     為了使得頁面更加美觀,我給這塊代碼自定義加了 div,這樣友善給播放器設定樣式,隻要稍微懂一點前端知識的筒子,都可以随心所欲的加 css樣式。這裡需要提一下,播放器設定好後,預設是:打開頁面即播放音樂;如果不喜歡預設打開音樂的筒子,也可以通過把代碼中的

auto=1

修改為

auto=0

來關閉它。

Hexo部落格中插入音樂

5. 實作效果

Hexo部落格中插入音樂

當然也可以進入我的部落格去檢視實作效果:Aileen-zl

繼續閱讀