music

_config.yml

@@ -90,12 +90,19 @@ widgets:
     enable: true
     icon: fas fa-tags
     title: "标签"
-  # 显示网易云歌单
+  # 显示音乐播放器
   music:
     enable: true
     icon: fas fa-headphones-alt
-    title: "音乐"
-    playlist_id: 746319661 # 歌单id
+    title: "最近在听"
+    link: 'https://music.163.com/#/user/home?id=63035382'
+    color: '#3DC550'  # 主题色
+    volume: 0.5       # 默认音量大小（0~1之间）
+    mode: circulation # random （随机） single （单曲） circulation （列表循环） order （列表）
+    autoplay: false   # false（手动播放） true（自动播放）
+    server: netease   # netease（网易云音乐）tencent（QQ音乐） xiami（虾米） kugou（酷狗）
+    type: playlist    # song （单曲） album （专辑） playlist （歌单） search （搜索）
+    id: 746319661     # 歌曲/专辑/歌单 ID
   # 显示友链，友链的内容写在主目录的config中
   links:
     enable: true

layout/_partial/head.ejs

@@ -41,6 +41,10 @@
   <!-- <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
   <link href='//cdn.bootcss.com/node-waves/0.7.5/waves.min.css' rel='stylesheet'>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>
+
   <%- css('style.css') %>
   <script>
     function setLoadingBarProgress(num) {

layout/_widget/music.ejs

@@ -1,9 +1,15 @@
 <section class='m_widget music'>
-    <header class='header <%= theme.style %>'>
-        <div><i class="<%= theme.widgets.music.icon %> fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;<%= theme.widgets.music.title %></div>
-        <a class="rightBtn" title="打开博主的网易云音乐主页" target="_blank" rel="external nofollow noopener noreferrer" href="https://music.163.com/#/playlist?id=<%= theme.widgets.music.playlist_id %>"><i class="fas fa-external-link-square-alt fa-fw"></i></a>
-    </header>
-    <div class='content <%= theme.style %>'>
-        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=450 src="//music.163.com/outchain/player?type=0&id=<%= theme.widgets.music.playlist_id %>&auto=0&height=450"></iframe>
-    </div>
+  <header class='header <%= theme.style %>'>
+    <div><i class="<%= theme.widgets.music.icon %> fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;<%= theme.widgets.music.title %></div>
+    <a class="rightBtn" target="_blank" rel="external nofollow noopener noreferrer" href="<%= theme.widgets.music.link %>"><i class="far fa-heart fa-fw"></i></a>
+  </header>
+  <div class='content <%= theme.style %>'>
+    <div class="aplayer" data-theme="<%= theme.widgets.music.color %>"
+      data-mode="<%= theme.widgets.music.mode %>"
+      data-autoplay="<%= theme.widgets.music.autoplay %>"
+      data-server="<%= theme.widgets.music.server %>"
+      data-type="<%= theme.widgets.music.type %>"
+      data-id="<%= theme.widgets.music.id %>"
+      data-volume="<%= theme.widgets.music.volume %>"></div>
+  </div>
 </section>

source/less/_widget.less

@@ -228,10 +228,14 @@
       }
     }
     .content{
-        padding: @gap/2;
+        padding: @gap/2+4px;
+        padding-top: @gap/2;
         &.pure{
           padding-top: @gap/4; // 适合白色导航栏背景
         }
+        .aplayer{
+          border-radius: 4px;
+        }
     }
 }
 .m_widget.links{