關於給hexo部落格增加音樂頁面（使用Aplayer和MetingJS外掛）

itsnekodeng學習技術部落格發表於2020-11-05
HexoJS
前言: 作為一個音樂發燒友，一直想在部落格網站里弄一個音樂播放歌單頁面，現在它來了。本文基於matery主題，利用hexo-tag-aplayer外掛和MetingJS實現。

效果展示：
itsNekoDeng 音樂臺

新建音樂頁面

  1. 在source檔案下新建一個musics檔案

  2. 在該檔案裡新建一個index.md檔案，其中檔案內容為：

---
title: musics
type: "musics"
layout: "musics"
---
  1. 在主題配置檔案_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檔案程式碼即可。

相關文章