关于给hexo博客增加音乐页面（使用Aplayer和MetingJS插件）

发布日期: 2021-08-29

文章字数: 438

前言: 作为一个音乐发烧友，一直想在博客网站里弄一个音乐播放歌单页面，现在它来了。本文基于matery主题，利用hexo-tag-aplayer插件和MetingJS实现。

新建音乐页面

在source文件下新建一个musics文件

hexo new page "musics"

在该文件里新建一个index.md文件，其中文件内容为：

---
title: musics
type: "musics"
layout: "musics"
abbrlink: musics
---

在主题配置文件_config.yml下，增加音乐页面链接和标题

musics:
  url: /musics

新建musics.ejs文件

在主题layout文件下新建musics.ejs文件，这里在musics.ejs文件直接贴代码即可，根据自定义可修改歌单id等信息。源代码如下：

<!-- 添加网易云我喜欢的歌曲模块 -->
<h4>    【欧美】过10W+评论的英文歌（珍藏版）</h4>
<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="6826437463"
  order= "random"
  theme="#ad7a86"
  loop="all"
  autoplay="false"
  storageName="aplayer-setting"
  hideLrc= "true"
  >
  </meting-js>
  <style>
      .aplayer{
          margin: 1.5rem 0;
      }              
  </style>
复制代码