feat(shortcode): new music display component

5 files changed, 54 insertions, 0 deletions

diff --git a/content/posts/weekly/46.md b/content/posts/weekly/46.md
index 9f69fc87..deaf2bd1 100644
--- a/content/posts/weekly/46.md
+++ b/content/posts/weekly/46.md
@@ -7,6 +7,9 @@ date: 2025-09-08T13:31:00
 draft: true
 toc: true
 ---
+
+{{< music cover="https://image.guhub.cn/picgo2025/9312a91249d2b11a.png" title="love is embarrassing" artist="Olivia Rodrigo" apple="https://music.apple.com/cn/album/love-is-embarrassing/1736994915?i=1736995818" spotify="https://open.spotify.com/track/26QLJMK8G0M06sk7h7Fkse" netease="https://music.163.com/#/song?id=2080218509"  >}}
+
 <!--more-->
 
 ## ↯ · 当下
diff --git a/layouts/_shortcodes/music.html b/layouts/_shortcodes/music.html
new file mode 100644
index 00000000..4deb6a50
--- /dev/null
+++ b/layouts/_shortcodes/music.html
@@ -0,0 +1,51 @@
+<div class="flex flex-col md:flex-row md:justify-between md:items-center gap-2">
+    <!-- Cover, title, artist -->
+    <div class="flex gap-5 items-center">
+        <img class="w-15 h-15 rounded-lg shadow-lg m-0!"
+            src="{{ .Get "cover" }}" loading="lazy" />
+        <div>
+            <h4 class="m-0 text-size-base">{{ .Get "title" }}</h4>
+            <p class="m-0 text-size-sm text-secondary">{{ .Get "artist" }}</p>
+        </div>
+    </div>
+    <!-- Links -->
+    {{ $aTagClasses := "block rounded-full px-3 md:p-4 bg-neutral-200/50 hover:bg-neutral-200 transition-colors no-underline! text-size-xs inline-flex gap-1 items-center" }}
+    {{ $imageClasses := "block w-3 h-3 md:w-5 md:h-5 m-0!" }}
+    <div class="flex gap-2 items-center">
+        {{ with .Get "apple" }}
+        <a href="{{ . }}"
+            class="{{ $aTagClasses }}"
+            target="_blank"
+            title="在 Apple Music 中打开"
+            data-tooltip
+        >
+            <img src="/img/apple-music.png" loading="lazy" class="{{ $imageClasses }}" />
+            <span class="md:hidden">Apple Music</span>
+        </a>
+        {{ end }}
+
+        {{ with .Get "netease" }}
+        <a href="{{ . }}"
+            class="{{ $aTagClasses }}"
+            target="_blank"
+            title="在网易云音乐中打开"
+            data-tooltip
+        >
+            <img src="/img/netease-music.png" loading="lazy" class="{{ $imageClasses }}" />
+            <span class="md:hidden">网易云</span>
+        </a>
+        {{ end }}
+
+        {{ with .Get "spotify" }}
+        <a href="{{ . }}"
+            class="{{ $aTagClasses }}"
+            target="_blank"
+            title="在 Spotify 中打开"
+            data-tooltip
+        >
+            <img src="/img/spotify.png" loading="lazy" class="{{ $imageClasses }}" />
+            <span class="md:hidden">Spotify</span>
+        </a>
+        {{ end }}
+    </div>
+</div>
diff --git a/static/img/apple-music.png b/static/img/apple-music.png
new file mode 100644
index 00000000..834dc364
--- /dev/null
+++ b/static/img/apple-music.png
diff --git a/static/img/netease-music.png b/static/img/netease-music.png
new file mode 100644
index 00000000..6f26d9bd
--- /dev/null
+++ b/static/img/netease-music.png
diff --git a/static/img/spotify.png b/static/img/spotify.png
new file mode 100644
index 00000000..abc5f12f
--- /dev/null
+++ b/static/img/spotify.png