關於給hexo部落格增加音樂頁面(使用Aplayer和MetingJS外掛)
前言: 作為一個音樂發燒友,一直想在部落格網站里弄一個音樂播放歌單頁面,現在它來了。本文基於matery主題,利用hexo-tag-aplayer外掛和MetingJS實現。
效果展示:
itsNekoDeng 音樂臺
新建音樂頁面
-
在source檔案下新建一個
musics
檔案 -
在該檔案裡新建一個
index.md
檔案,其中檔案內容為:
---
title: musics
type: "musics"
layout: "musics"
---
- 在主題配置檔案
_config.yml
下,增加音樂頁面連結和標題
musics:
url: /musics
新建musics.ejs檔案
在主題layout
檔案下新建musics.ejs
檔案,
這裡在musics.ejs
檔案直接貼程式碼即可,根據自定義可修改歌單id等資訊。原始碼如下:
<!-- 新增網易雲我喜歡的歌曲模組 -->
<p>網易雲2019年度歌單top10</p>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayedist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayemin.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Metinmin.js"></script>
<meting-js style="margin-top: 1.5rem;width: auto;height: auto"
server="netease"
type="playlist"
id="3155294100"
order= "random"
theme="#ad7a86"
loop="all"
autoplay="false"
storageName="aplayer-setting"
hideLrc= "false"
>
</meting-js>
<style>
.aplayer{
margin: 1.5rem 0;
}
</style>
總結:若想要在部落格文章md檔案中引入也是可以的,直接貼上上述ejs檔案程式碼即可。
相關文章
- 音樂盒元件Aplayer+Metingjs元件JS
- vue中使用aplayer外掛做一個網頁音樂播放器Vue網頁播放器
- jekyll個人部落格中新增音樂播放外掛
- Chrome外掛—CSDN部落格頁面優化神器Chrome優化
- 基於github和hexo搭建部落格 本地hexo部落格搭建GithubHexo
- 使用docker搭建nginx掛載hexo部落格DockerNginxHexo
- 關於部落格評論外掛的討論
- 基於github和hexo搭建部落格 HEXO樣式GithubHexo
- 使用github和hexo搭建部落格GithubHexo
- 基於github和hexo搭建部落格 github配置GithubHexo
- 關於HEXO搭建個人部落格的點點滴滴Hexo
- 使用 hexo 搭建個人部落格Hexo
- 使用 Hexo 搭建靜態部落格Hexo
- 基於Hexo搭建靜態部落格Hexo
- Hexo部落格搭建+主題優化+外掛配置+常用操作+錯誤分析Hexo優化
- 關於Hexo6.0搭建個人部落格(高階篇)Hexo
- 搭建自己的技術部落格系列(五)hexo部落格接入busuanzi外掛,展示訪問量和網站執行時間Hexo網站
- 使用HEXO+Github,搭建屬於自己的免費部落格HexoGithub
- Hexo部落格同步工具Hexo
- 搭建Hexo部落格相簿Hexo
- Hexo 搭建部落格Hexo
- hexo搭建github部落格HexoGithub
- Hexo部落格備份Hexo
- 使用hexo+next 搭建部落格Hexo
- 基於Github Page 搭建部落格(hexo框架)GithubHexo框架
- 基於 Github Actions 自動部署 Hexo 部落格GithubHexo
- 使用vuepress搭建GitHub pages靜態部落格頁面VueGithub
- MetingJS 是如何配合 Aplayer 載入歌單的?JS
- hexo 部落格搭建筆記Hexo筆記
- Hexo部落格搭建記錄Hexo
- Hexo快速搭建部落格Hexo
- linux 搭建hexo部落格LinuxHexo
- [外掛擴充套件]蝦米音樂電臺外掛套件
- 基於 Hexo + GitHub Pages 搭建個人部落格(三)HexoGithub
- 為hexo部落格新增基於gitment評論功能HexoGit
- Mac上搭建基於GitHub的Hexo部落格(繼)MacGithubHexo
- 使用Hexo在Github上搭建自己的部落格HexoGithub
- 關於音樂品味