Merge pull request #240 from chengzhongxue/main

音乐页面添加，移动端有bug后面修复
2023-07-04 23:24:40 +08:00 · 2023-07-04 23:24:40 +08:00 · 4cb12ab76e
parent 30eba69c87 cb29025f7e
commit 4cb12ab76e
7 changed files with 681 additions and 7 deletions
--- a/settings.yaml
+++ b/settings.yaml
@ -1569,7 +1569,6 @@ spec:
        - $formkit: group
          name: nav_music
          label: 左下角音乐配置项
-          if: "$get(nav_musicEnable).value"
          value:
            id:
            server:
--- a/templates/assets/js/heo.js
+++ b/templates/assets/js/heo.js
@ -446,4 +446,58 @@ var heo = {
        document.documentElement.classList.contains("hide-aside") ? document.querySelector("#consoleHideAside").classList.add("on") : document.querySelector("#consoleHideAside").classList.remove("on")
    },

+
+    // 音乐节目切换背景
+    changeMusicBg: function (isChangeBg = true) {
+        if (window.location.pathname != "/music") {
+            return;
+        }
+        const anMusicBg = document.getElementById("an_music_bg");
+
+        if (isChangeBg) {
+            // player listswitch 会进入此处
+            const musiccover = document.querySelector("#anMusic-page .aplayer-pic");
+            anMusicBg.style.backgroundImage = musiccover.style.backgroundImage;
+        } else {
+            // 第一次进入，绑定事件，改背景
+            let timer = setInterval(() => {
+                const musiccover = document.querySelector("#anMusic-page .aplayer-pic");
+                // 确保player加载完成
+                if (musiccover) {
+                    clearInterval(timer);
+                    anMusicBg.style.backgroundImage = musiccover.style.backgroundImage;
+                    // 绑定事件
+                    heo.addEventListenerChangeMusicBg();
+
+                    // 暂停nav的音乐
+                    if (
+                        document.querySelector("#nav-music meting-js").aplayer &&
+                        !document.querySelector("#nav-music meting-js").aplayer.audio.paused
+                    ) {
+                        heo.musicToggle();
+                    }
+                }
+            }, 100);
+        }
+    },
+    addEventListenerChangeMusicBg: function () {
+        const anMusicPage = document.getElementById("anMusic-page");
+        const aplayerIconMenu = anMusicPage.querySelector(".aplayer-info .aplayer-time .aplayer-icon-menu");
+
+        anMusicPage.querySelector("meting-js").aplayer.on("loadeddata", function () {
+            heo.changeMusicBg();
+            console.info("player loadeddata");
+        });
+
+        aplayerIconMenu.addEventListener("click", function () {
+            document.getElementById("menu-mask").style.display = "block";
+            document.getElementById("menu-mask").style.animation = "0.5s ease 0s 1 normal none running to_show";
+        });
+
+        document.getElementById("menu-mask").addEventListener("click", function () {
+            if (window.location.pathname != "/music") return;
+            anMusicPage.querySelector(".aplayer-list").classList.remove("aplayer-list-hide");
+        });
+    },
+
 }
--- a/templates/assets/libs/aplayer/music.css
+++ b/templates/assets/libs/aplayer/music.css
@ -0,0 +1,568 @@
+#an_music_bg {
+    display: none;
+    filter: blur(63px);
+    opacity: .6;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+    filter: alpha(opacity=60);
+    position: fixed;
+    z-index: -999;
+    background-attachment: local;
+    background-position: center center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    width: 200%;
+    height: 200%;
+    top: -50%;
+    left: -50%;
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    -o-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    -webkit-transition: .3s;
+    -moz-transition: .3s;
+    -o-transition: .3s;
+    -ms-transition: .3s;
+    transition: .3s
+}
+
+body {
+    background: #0d0d0d;
+}
+
+#an_music_bg {
+    display: block;
+}
+
+body:has(#anMusic-page) #web_bg {
+    display: none;
+}
+body:has(#anMusic-page) #page {
+    min-height: calc(0px)
+}
+@media screen and (max-width: 768px) {
+    body:has(#anMusic-page) .page .layout#content-inner {
+        background: 0 0!important;
+    }
+    body:has(#anMusic-page) #page-header.not-top-img:not(.nav-fixed) #nav{
+        background: 0 0!important;
+    }
+}
+
+
+
+
+body:has(#anMusic-page) #footer,
+body:has(#anMusic-page) #nav-music {
+    display: none;
+}
+
+#anMusic-page .aplayer-body {
+    width: 40%;
+    height: 75vh;
+}
+
+#anMusic-page ol>li:hover {
+    background: #ffffff33;
+    border-radius: 6px;
+}
+
+
+
+@media screen and (max-width: 1400px) {
+
+    body #anMusic-page #anMusicBtnGetSong,
+    body #anMusic-page #anMusicRefreshBtn,
+    body #anMusic-page #anMusicSwitching {
+        right: 7vw
+    }
+
+    body #anMusic-page #anMusicSwitching {
+        bottom: 100px
+    }
+
+    body #anMusic-page #anMusicRefreshBtn {
+        bottom: 160px
+    }
+
+    body #anMusic-page #anMusicBtnGetSong {
+        bottom: 220px
+    }
+}
+
+#anMusic-page #anMusicBtnGetSong,
+#anMusic-page #anMusicRefreshBtn,
+#anMusic-page #anMusicSwitching {
+    position: fixed;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: box;
+    display: flex;
+    width: 50px;
+    height: 50px;
+    bottom: 100px;
+    padding: 5px;
+    background: var(--heo-white-op);
+    backdrop-filter: saturate(180%) blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-radius: 50%;
+    color: #fff;
+    text-align: center;
+    -webkit-box-pack: center;
+    -moz-box-pack: center;
+    -o-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -moz-box-align: center;
+    -o-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    cursor: pointer;
+    z-index: 2
+}
+
+#anMusic-page #anMusicBtnGetSong {
+    right: 11vw
+}
+
+#anMusic-page #anMusicRefreshBtn {
+    right: 7vw
+}
+
+#anMusic-page #anMusicSwitching {
+    right: 15vw
+}
+
+@media screen and (max-width: 768px) {
+    #anMusic-page div#anMusicBtnGetSong {
+        right: 80px;
+        bottom: 150px
+    }
+
+    #anMusic-page div#anMusicRefreshBtn {
+        right: 20px;
+        bottom: 150px
+    }
+
+    #anMusic-page div#anMusicSwitching {
+        right: 140px;
+        bottom: 150px
+    }
+}
+
+#anMusic-page meting-js .aplayer {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: box;
+    display: flex;
+    -webkit-box-direction: reverse;
+    -moz-box-direction: reverse;
+    -o-box-direction: reverse;
+    -webkit-box-orient: horizontal;
+    -moz-box-orient: horizontal;
+    -o-box-orient: horizontal;
+    -webkit-flex-direction: row-reverse;
+    -ms-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+    background: rgba(0, 0, 0, 0);
+    border: none;
+    -webkit-box-shadow: none;
+    box-shadow: none
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body {
+    width: 40%;
+    height: calc(100vh - 169px)
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-pic {
+    float: none;
+    width: 180px;
+    height: 180px;
+    border-radius: 12px;
+    margin: auto;
+    left: 0;
+    right: 0;
+    -webkit-transition: background-image .5s ease-in-out;
+    -moz-transition: background-image .5s ease-in-out;
+    -o-transition: background-image .5s ease-in-out;
+    -ms-transition: background-image .5s ease-in-out;
+    transition: background-image .5s ease-in-out;
+    background-size: cover;
+    background-color: transparent !important
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info {
+    margin: 0 20px 0 20px;
+    border-bottom: none
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-music {
+    text-align: center;
+    height: auto;
+    margin: 15px
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-music .aplayer-author,
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-music .aplayer-title {
+    font-size: 1.7rem;
+    font-weight: 700;
+    color: #fff
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc {
+    height: 800%;
+    margin-top: 10px;
+    mask-image: linear-gradient(to bottom, #000, #000, #000, #000, #000, #000, #000, #000, #000, #000, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0))
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc p {
+    font-size: 20px;
+    line-height: 20px !important;
+    height: 20px !important;
+    margin: 20px 0 !important;
+    color: #fff
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc p.aplayer-lrc-current {
+    min-height: 20px
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc::after,
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc::before {
+    display: none
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller {
+    position: fixed;
+    max-width: 1500px;
+    margin: auto;
+    left: 0;
+    right: 0;
+    bottom: 50px
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap {
+    margin: 0 160px 0 150px
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
+    height: 6px;
+    border-radius: 4px
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
+    height: 6px;
+    border-radius: 4px;
+    background: var(--heo-white) !important
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
+    width: 20px;
+    height: 20px;
+    margin-top: -7px;
+    -webkit-transform: none;
+    -moz-transform: none;
+    -o-transform: none;
+    -ms-transform: none;
+    transform: none;
+    background: #fff !important
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
+    height: 6px;
+    border-radius: 4px
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time {
+    position: absolute;
+    width: 100%;
+    bottom: 21px;
+    height: 0;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: box;
+    display: flex;
+    -webkit-box-pack: end;
+    -moz-box-pack: end;
+    -o-box-pack: end;
+    -ms-flex-pack: end;
+    -webkit-justify-content: flex-end;
+    justify-content: flex-end
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-volume-wrap .aplayer-volume-bar-wrap {
+    bottom: 0;
+    right: -5px
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon {
+    width: 2rem;
+    height: 1.6rem;
+    margin-left: 6px
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
+    fill: var(--heo-white);
+    opacity: .8;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+    filter: alpha(opacity=80)
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-loop {
+    margin-right: 15px
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner {
+    margin-right: 18px;
+    margin-top: -8px
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-back {
+    position: absolute;
+    left: 0;
+    display: inline
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-play {
+    position: absolute;
+    left: 40px;
+    display: inline
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-forward {
+    position: absolute;
+    left: 80px;
+    display: inline
+}
+
+#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-menu {
+    display: none
+}
+
+#anMusic-page meting-js .aplayer .aplayer-list {
+    width: 60%;
+    height: 100%
+}
+
+#anMusic-page meting-js .aplayer ol {
+    padding-right: 25px
+}
+
+#anMusic-page meting-js .aplayer ol>li {
+    border-top: 1px solid transparent;
+    font-size: 14px
+}
+
+#anMusic-page meting-js .aplayer ol>li:hover {
+    background: rgba(255, 255, 255, .2);
+    border-radius: 6px
+}
+
+#anMusic-page meting-js .aplayer ol>li.aplayer-list-light {
+    background: rgba(255, 255, 255, .2);
+    border-radius: 6px;
+    padding: 20px 15px
+}
+
+#anMusic-page meting-js .aplayer ol>li.aplayer-list-light span.aplayer-list-title {
+    font-weight: bolder
+}
+
+#anMusic-page meting-js .aplayer ol>li.aplayer-list-light .aplayer-list-cur {
+    display: none
+}
+
+#anMusic-page meting-js .aplayer ol>li span {
+    color: var(--heo-white)
+}
+
+#anMusic-page meting-js .aplayer ol>li span.aplayer-list-author {
+    opacity: .6;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+    filter: alpha(opacity=60)
+}
+
+@media screen and (max-width: 768px) {
+    body[data-type=music] #rightside {
+        display: none
+    }
+
+    body[data-type=music] #content-inner,
+    body[data-type=music] #page {
+        z-index: auto
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-list {
+        position: fixed;
+        z-index: 1002;
+        width: 100%;
+        bottom: -88%;
+        left: 0;
+        background: var(--sidebar-bg);
+        height: auto;
+        border-radius: 15px 15px 0 0;
+        padding: 15px 0
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-list.aplayer-list-hide {
+        bottom: 0 !important
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-list ol {
+        max-height: 60vh !important;
+        padding-right: 0
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-list ol>li {
+        display: -webkit-box;
+        display: -moz-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: box;
+        display: flex;
+        margin: 0 10px
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-list ol>li span {
+        color: var(--font-color)
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-list ol>li span.aplayer-list-title {
+        width: 30%;
+        max-width: 55%;
+        width: auto;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        -webkit-box-orient: vertical
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-list ol>li span.aplayer-list-author {
+        position: absolute;
+        right: 10px;
+        width: auto;
+        max-width: 35%;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        -webkit-box-orient: vertical
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-list ol>li.aplayer-list-light {
+        background: #33a673;
+        padding: 5px 20px;
+        border-radius: 10px
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-list ol>li.aplayer-list-light span {
+        color: #fff
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-list ol>li.aplayer-list-light span.aplayer-list-author {
+        right: 15px
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-body {
+        width: 100%;
+        position: fixed;
+        margin: auto;
+        left: 0;
+        right: 0;
+        top: 100px
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc {
+        margin-top: 40px;
+        height: auto;
+        max-height: 200%;
+        min-height: 100%;
+        mask-image: linear-gradient(to bottom, #000, #000, #000, #000, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0))
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc p.aplayer-lrc-current {
+        color: #33a673
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller {
+        width: 100%;
+        bottom: 100px
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-volume-wrap {
+        left: -66px
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap {
+        bottom: 0;
+        right: 7px
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap {
+        margin: 0 30px
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time {
+        bottom: -40px
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner {
+        position: absolute;
+        width: 100%;
+        margin-right: 0;
+        margin-top: -33px
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner .aplayer-dtime {
+        position: absolute;
+        right: 30px
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner .aplayer-ptime {
+        position: absolute;
+        left: 35px
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-back {
+        margin: auto;
+        right: 110px
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-play {
+        margin: auto;
+        right: 0;
+        left: 0
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-forward {
+        margin: auto;
+        left: 110px;
+        right: 0
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-order {
+        position: absolute;
+        left: 22px
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-loop {
+        position: absolute;
+        right: 25px
+    }
+
+    #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-menu {
+        display: inline;
+        position: absolute;
+        right: 25px;
+        top: -90px
+    }
+}
--- a/templates/modules/head.html
+++ b/templates/modules/head.html
@ -172,6 +172,7 @@
            loadProgressBar: [[${theme.config.other.loadProgressBar}]],
            error404Enable: [[${theme.config.other.error_404Enable}]],
            allPlaylist: [[${theme.config.other.nav_music.all_playlist}]],
+            isMusic: [[${ htmlType == 'music'}]],
            date_suffix: {
                just: '刚刚',
                min: '分钟前',
@ -224,6 +225,9 @@
                case '404':
                    title = '页面没有找到'
                    break;
+                case 'music':
+                    title = '音乐馆'
+                    break;

            }
            if (title != '')
--- a/templates/modules/layouts/layout.html
+++ b/templates/modules/layouts/layout.html
@ -15,6 +15,9 @@
    <!-- 网站背景 -->
    <div id="web_bg"></div>

+    <!-- 网站背景 -->
+    <div id="an_music_bg"></div>
+
    <!-- 控制台 -->
    <div th:replace="~{modules/widgets/console :: console}"></div>

@ -77,17 +80,15 @@


        <!--左下角音乐-->
-        <th:block th:if="${theme.config.other.nav_musicEnable}" >
-            <script>var meting_api = '[[${theme.config.other.nav_music.meting_api}]]'; </script>
+        <script>var meting_api = '[[${theme.config.other.nav_music.meting_api}]]'; </script>

-            <link rel="stylesheet" th:href="@{/assets/libs/aplayer/APlayer.min.css}" media="all" onload="this.media='all'">
+        <link rel="stylesheet" th:href="@{/assets/libs/aplayer/APlayer.min.css}" media="all" onload="this.media='all'">

-            <script th:src="@{/assets/libs/aplayer/APlayer.min.js}"></script>
+        <script th:src="@{/assets/libs/aplayer/APlayer.min.js}"></script>

-            <script th:src="@{/assets/libs/aplayer/Meting2.min.js}"></script>
+        <script th:src="@{/assets/libs/aplayer/Meting2.min.js}"></script>


-        </th:block>

        <script th:src="@{/assets/libs/pjax/pjax.min.js}"></script>

@ -352,6 +353,11 @@
        if ([[${ theme.config.snackbar.switch }]]) {
            heo.hidecookie()
        }
+
+        //音乐页面切换歌曲调用
+        if(GLOBAL_CONFIG.isMusic){
+            heo.changeMusicBg(false);
+        }
        

    </script>
--- a/templates/music.html
+++ b/templates/music.html
@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en" th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'music')}"
+      xmlns:th="http://www.thymeleaf.org">
+
+<th:block th:fragment="content">
+
+    <div class="page" id="body-wrap">
+
+        <!-- 头部导航栏 -->
+        <header class="not-top-img" id="page-header">
+            <nav th:replace="~{modules/nav :: nav(title = null)}"></nav>
+        </header>
+        <main class="layout hide-aside" id="content-inner">
+            <div id="page">
+                <h1 class="page-title">音乐馆</h1>
+                <div id="anMusic-page">
+                    <!-- <div id="anMusicBtnGetSong"><i class="anzhiyufont anzhiyu-icon-shuffle"></i></div>
+                    <div id="anMusicRefreshBtn"><i class="anzhiyufont anzhiyu-icon-arrows-rotate"></i></div>
+                    <div id="anMusicSwitching"><i class="anzhiyufont anzhiyu-icon-repeat"></i></div> -->
+                    <div id="anMusic-page-meting">
+                        <meting-js th:id="${theme.config.other.nav_music.id}" th:server="${theme.config.other.nav_music.server}" type="playlist" mutex="true" preload="auto"
+                                   theme="var(--heo-main)" order="list" list-max-height="calc(100vh - 169px)!important">
+                        </meting-js>
+                    </div>
+                </div>
+            </div>
+
+
+            <link rel="stylesheet" th:href="@{/assets/libs/aplayer/music.css}" >
+
+
+        </main>
+        <!-- 底部 -->
+        <footer th:replace="~{modules/footer :: footer}"></footer>
+    </div>
+
+</th:block>
+
+</html>
--- a/theme.yaml
+++ b/theme.yaml
@ -21,6 +21,10 @@ spec:
        description: 关于页面
        screenshot:
        file: about.html
+      - name: 音乐馆
+        description: 音乐页面
+        screenshot:
+        file: music.html
  description: Halo 2.x Theme base on Thymeleaf, Referring to Butterfly and Heo
  logo: 'https://liuzhihang.com/themes/theme-hao/assets/images/hao-logo.jpg'
  website: 'https://liuzhihang.com'