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

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

新建音乐页面

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等信息。源代码如下：

<%- partial('_partial/bg-cover') %>
<style>
    .musis > div {
        margin-bottom: 60px;
    }
    .aplayer {
        border-radius: 8px!important;
    }
    .comment-scroll {
        bottom: 93px;
    }
    .v[data-class=v] .vcards {
        display: none;
    }
    .musis div p {
        font-family: 'Architects Daughter', cursive;
        font-size: 18px;
    }

    .musictitle {
        font-family: 'Architects Daughter', cursive;
        font-size: 20px;
        margin-bottom: 0px!important;
    }
    body.dark .musictitle {
        color: rgba(255, 255, 255, 0.6);
    }
    .musiclink {
        margin-bottom: 0px!important;
    }
    .musiclink a {
        margin-bottom: 15px;
        display: inline-block;
        color: rgba(0,0,0,0.87);
    }
    /* 修改小屏幕下logo文字样式. */
    @media only screen and (max-width: 600px) {
        .about-cover {
            height: 64vh;
        }   
    }
</style>
<main class="content">
    <div class="container">
        <div class="card musis">
        <div class="musictitle center-align">
            心水的歌单，欢迎收听交流
        </div>
        <hr>
            <!-- 添加网易云我喜欢的歌曲模块 -->
            <div class="wyya">
                <p>网易云音乐</p>
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
                <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
                <!-- require MetingJS -->
                <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.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;
                        }
                        ol li:before {
                            display: none;
                        }
                    </style>
            </div>
        </div>
            <!-- 以下是评论模块 -->
            <div class="card">
            <% if (theme.gitalk && theme.gitalk.enable) { %>
            <%- partial('_partial/gitalk') %>
            <% } %>
            <% if (theme.gitment.enable) { %>
            <%- partial('_partial/gitment') %>
            <% } %>
            <% if (theme.disqus.enable) { %>
            <%- partial('_partial/disqus') %>
            <% } %>
            <% if (theme.livere && theme.livere.enable) { %>
            <%- partial('_partial/livere') %>
            <% } %>
            <% if (theme.valine && theme.valine.enable) { %>
            <%- partial('_partial/valine') %>
            <% } %>
            <% if (theme.minivaline && theme.minivaline.enable) { %>
            <%- partial('_partial/minivaline') %>
            <% } %>
        </div>
    </div>
</main>

总结：若想要在博客文章md文件中引入也是可以的，直接粘贴上述ejs文件代码即可。

效果展示：
itsNekoDeng 音乐台