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

本文参考博客Neko

新建音乐页面

1、在source文件下新建一个musics文件
2、在该文件里新建一个index.md文件，其中文件内容为

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

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

---
musics:
  url: /musics
---

新建musics.ejs文件

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

<%- partial('_partial/bg-cover') %> 
<style> 
    .musis > div &#123; 
        margin-bottom: 60px; 
    &#125; 
    .aplayer &#123; 
        border-radius: 8px!important; 
    &#125; 
    .comment-scroll &#123; 
        bottom: 93px; 
    &#125; 
    .v[data-class=v] .vcards &#123; 
        display: none; 
    &#125; 
    .musis div p &#123; 
        font-family: 'Architects Daughter', cursive; 
        font-size: 18px; 
    &#125; 
    .musictitle &#123; 
        font-family: 'Architects Daughter', cursive; 
        font-size: 20px; 
        margin-bottom: 0px!important; 
    &#125; 
    body.dark .musictitle &#123; 
        color: rgba(255, 255, 255, 0.6); 
    &#125; 
    .musiclink &#123; 
        margin-bottom: 0px!important; 
    &#125; 
    .musiclink a &#123; 
        margin-bottom: 15px; 
        display: inline-block; 
        color: rgba(0,0,0,0.87); 
    &#125; 
    /* 修改小屏幕下logo文字样式. */ 
    @media only screen and (max-width: 600px) &#123; 
        .about-cover &#123; 
            height: 64vh; 
        &#125; 
    &#125; 
</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="7013939393"  
                    order= "random" 
                    theme="#ad7a86" 
                    loop="all" 
                    autoplay="false" 
                    storageName="aplayer-setting" 
                    hideLrc= "false" 
                    > 
                    </meting-js> 
                    <style> 
                        .aplayer&#123; 
                            margin: 1.5rem 0; 
                        &#125; 
                        ol li:before &#123; 
                            display: none; 
                        &#125; 
                    </style> 
            </div> 
            <!-- 添加网易云我喜欢的歌曲模块 --> 
            <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="7013869866" 
                    order= "random" 
                    theme="#ad7a86" 
                    loop="all" 
                    autoplay="false" 
                    storageName="aplayer-setting" 
                    hideLrc= "false" 
                    > 
                    </meting-js> 
                    <style> 
                        .aplayer&#123; 
                            margin: 1.5rem 0; 
                        &#125; 
                        ol li:before &#123; 
                            display: none; 
                        &#125; 
                    </style> 
            </div> 
        </div> 
            <!-- 以下是评论模块 --> 
            <div class="card"> 
            <% if (theme.gitalk && theme.gitalk.enable) &#123; %> 
            <%- partial('_partial/gitalk') %> <% &#125; %> 
            <% if (theme.gitment.enable) &#123; %> 
            <%- partial('_partial/gitment') %> 
            <% &#125; %> 
            <% if (theme.disqus.enable) &#123; %> 
            <%- partial('_partial/disqus') %> 
            <% &#125; %> 
            <% if (theme.livere && theme.livere.enable) &#123; %> 
            <%- partial('_partial/livere') %> 
            <% &#125; %> 
            <% if (theme.valine && theme.valine.enable) &#123; %> 
            <%- partial('_partial/valine') %> 
            <% &#125; %> 
            <% if (theme.minivaline && theme.minivaline.enable) &#123; %> 
            <%- partial('_partial/minivaline') %> 
            <% &#125; %> 
        </div> 
    </div> 
</main>

总结

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

结束

万事无如退步人，孤云野鹤自由身；
松风十里时来往，笑揖峰头月一轮。