前言: 作为一个音乐发烧友,一直想在博客网站里弄一个音乐播放歌单页面,现在它来了。本文基于matery主题,利用hexo-tag-aplayer插件和MetingJS实现。
新建音乐页面
在source文件下新建一个
musics
文件在该文件里新建一个
index.md
文件,其中文件内容为:
---
title: musics
type: "musics"
layout: "musics"
---
- 在主题配置文件
_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 音乐台