音乐播放器

src/components/widget/APlayer.svelte

@@ -0,0 +1,14 @@
+<div class="meting" id="meting">
+    <!-- require APlayer -->
+    <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
+        server="netease"
+        type="playlist"
+        id="你的网易云歌单ID"
+        order="random"
+        list-folded="true">
+    </meting-js>
+</div>

src/components/widget/Music.astro

@@ -0,0 +1,20 @@
+---
+import WidgetLayout from './WidgetLayout.astro'
+import APlayer from './APlayer.svelte'
+
+const COLLAPSED_HEIGHT = '7.5rem'
+
+interface Props {
+  class?: string
+  style?: string
+}
+const className = Astro.props.class
+const style = Astro.props.style
+
+const isCollapsed = false
+---
+<WidgetLayout name="音乐" id="music" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT} class={className} style={style}>
+    <div class="flex flex-col gap-1">
+        <APlayer client:only="svelte"/>
+    </div>
+</WidgetLayout>

src/components/widget/SideBar.astro

@@ -3,6 +3,7 @@ import type { MarkdownHeading } from "astro";
 import Categories from "./Categories.astro";
 import Profile from "./Profile.astro";
 import Tag from "./Tags.astro";
+import Music from './Music.astro'
 import Series from './Series.astro'
 
 interface Props {
@@ -24,5 +25,8 @@ const series = Astro.props.series
         </div>
         <Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
         <Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
+        div id="music" class="flex flex-col w-full gap-4">
+           <Music></Music>
+       </div>
     </div>
 </div>