喜迎
春节

关于给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 音乐台


文章作者: NekoDeng
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 NekoDeng !
评论
 上一篇
实验室-一些有趣小demo汇总(今天吃啥,生日打字机...)
实验室-一些有趣小demo汇总(今天吃啥,生日打字机...)
前言: 收集了一些有趣的网页demo,这才是程序员表达的最佳方式嘛,傲娇脸... 今晚吃啥呢?随机摇店名总是在纠结吃什么,于是就可以…主要原理:其实就是random一个数组,和随机摇数字的原理一样,只不过把数字改成数组的下标就可以了。效果
下一篇 
随笔第1篇-今天我终于动笔了(准确说是敲下了键盘)
随笔第1篇-今天我终于动笔了(准确说是敲下了键盘)
随笔第1篇,杂想,嗯?咋想的,小学鸡 我终于还是动笔了,准确来说,是敲下了键盘。 一个人,一台电脑,一个保温杯(想吐槽,也太保温了,每次都被烫到)。有时候,独处就是这样叫人心动,也只有此刻,世事才会如此波澜不惊。
2020-10-13
  目录