songTest

§1.参考博文

• 网页配置方法

• MetingJS配置options

• APlayer配置

§2.单开模块源码（music.ejs）

<%- 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"> Mr风语恺撒的音乐私房FAVOR</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="629426727" 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>

§3.alternative(网易云“我喜欢”歌单)

<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"> Mr风语恺撒的音乐私房FAVOR</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="629426727" 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>
</main>

§4.配置在单个MarkDown文件中

§4.1实际的效果

§4.1.1MetingJS

🔱 宝藏 歌单

何以消愁 小调温柔

万般温柔 以歌来和

🔱 宝藏 歌曲

错过

我们继续着各自不同的轨迹 重复游弋在故地期待再相遇 身边的人来来又去去 我们站在原地等对方找到自己

§4.1.2网易云外链（iframe）

§4.1 歌单源码(样式在下面)

<!-- 添加我的歌单模块 -->
<div class="baozang">
    <p>🔱 <i style="border-bottom: 1px solid #ad7a86;">宝藏</i> 歌单</p>
    <div class="swbk">
            <div class="label" style="color: rgb(245, 150, 170);">
                    <div class="label" style="color: rgb(245, 150, 170);">
        <span>何以消愁 小调温柔</span></div>
    <p>万般温柔 以歌来和</p>
</div>
<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="6708249099"
           order= "list"
           theme="#ad7a86"
           loop="all"
           autoplay="false"
           storageName="aplayer-setting"
           hideLrc= "false"
>
</meting-js>

§4.2 歌曲源码(样式在下面)

<!-- 添加我的歌曲模块 -->
<div class="baozang">
    <p>🔱 <i style="border-bottom: 1px solid #5A9AD7;">宝藏</i> 歌曲</p>
    <div class="swbk">
            <div class="label" style="color: rgb(245, 150, 170);">
                    <div class="label" style="color: rgb(245, 150, 170);">
        <span>错过</span></div>
    <p>我们继续着各自不同的轨迹
重复游弋在故地期待再相遇
身边的人来来又去去
我们站在原地等对方找到自己</p>
</div>
<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="song"
           id="1492639786"
           order= "random"
           theme="#ad7a86"
           loop="one"
           autoplay="true"
           storageName="aplayer-setting"
           hideLrc= "false"
>
</meting-js>

§4.3 组合源码

<style>
    @media only screen and (max-width: 800px) {
        .swbk {
            padding: 26px 2px!important;
            margin: 14px 0px!important;
        }
    }

    .swbk {
        position: relative;
        padding: 26px 20px;
        font-style: italic;
        margin: 10px 0px;
        border-radius: 8px;
        -webkit-box-shadow: 0 14px 38px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.06);
        box-shadow: 0 14px 38px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.06);
        -webkit-transition: all .3s ease 0s,-webkit-transform .6s cubic-bezier(.6,.2,.1,1) 0s;
        transition: all .3s ease 0s,-webkit-transform .6s cubic-bezier(.6,.2,.1,1) 0s;
        transition: all .3s ease 0s,transform .6s cubic-bezier(.6,.2,.1,1) 0s;
        transition: all .3s ease 0s,transform .6s cubic-bezier(.6,.2,.1,1) 0s,-webkit-transform .6s cubic-bezier(.6,.2,.1,1) 0s;
    }
    .swbk:hover {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
        -webkit-box-shadow: 0 14px 38px rgba(0,0,0,.14), 0 3px 8px rgba(0,0,0,.12);
        box-shadow: 0 14px 38px rgba(0,0,0,.14), 0 3px 8px rgba(0,0,0,.12);
    }
    .swbk:before {
        content: " “ ";
        top: 56px;
        /* left: -14px; */
    }
    .swbk:after {
        content: " ” ";
        bottom: 8px;
        right: 5px;
    }
    .swbk:after, .swbk:before {
        position: absolute;
        font-style: normal;
        font-weight: 600;
        font-size: 42px;
        text-decoration: inherit;
    }
    .ziwojieshao .swbk:after, .ziwojieshao .swbk:before {
        display: none;
    }
    body.dark .swbk:after, body.dark .swbk:before {
        color: #d2c9c9;
    }
    .swbk p {
        font-size: 19px!important;
        line-height: 1.3rem;
        text-indent: 2rem;
        font-style: italic;
        font-family: 'Architects Daughter', cursive!important;
    }
    .swbk .label {
        display: inline-block;
        position: relative;
        margin-bottom: 10px;
        padding: 0 14px 0 32px;
        height: 32px;
        line-height: 32px;
        border-radius: 0 3px 3px 0;
        background-color: currentColor;
    }
    .swbk .label span {
        color: #fff;
    }
    .swbk .label:after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 0;
        height: 0;
        background-color: transparent;
        border-style: solid;
        border-width: 0 16px 16px 0;
        border-color: transparent;
        border-right-color: currentColor;
        -webkit-filter: brightness(120%);
        filter: brightness(120%);
    }
    @media screen and (min-width: 768px) {
        .swbk .label {
            left: -37px;
        }
    }
    @media screen and (max-width: 767px) {
        .swbk .label {
            left: -18px;
        }
        .swbk p {
            line-height: 2.02rem;
            padding: 2px 8px;
        }
    }

    .aplayer{
        margin: 1.5rem 0;
    }
    ol li:before {
        display: none;
    }
    .card {
        padding: 24px;
    }
</style>


<div>
    <div class="baozang">
        <p>? <i style="border-bottom: 1px solid #ad7a86;">宝藏</i> 歌单</p>
        <div class="swbk">
            <div class="label" style="color: rgb(245, 150, 170);">
                <span>读达尔文</span></div>
            <p>有过竞争，有过牺牲，被爱筛选过程，学会认真，学会忠诚，适者才能生存，懂得永恒，得要我们，进化成更好的人</p>
        </div>
        <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="5279114612"
                   order= "list"
                   theme="#ad7a86"
                   loop="all"
                   autoplay="false"
                   storageName="aplayer-setting"
                   hideLrc= "false"
        >
        </meting-js>


</div>

    <div class="baozang">
        <p>🔱 <i style="border-bottom: 1px solid #5A9AD7;">宝藏</i> 歌曲</p>
        <div class="swbk">
            <div class="label" style="color: rgb(065, 167, 193);">
                    <span>错过</span></div>
                <p>我们继续着各自不同的轨迹
                    重复游弋在故地期待再相遇
                    身边的人来来又去去
                    我们站在原地等对方找到自己</p>
            </div>
            <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="song"
                       id="1492639786"
                       order= "random"
                       theme="#ad7a86"
                       loop="one"
                       autoplay="true"
                       storageName="aplayer-setting"
                       hideLrc= "false"
            >
            </meting-js>



        </div>

</div>