From abd19c34ae92f04555ffab1c66a4ff51386a6873 Mon Sep 17 00:00:00 2001
From: eltrac <hi@eltr.ac>
Date: Mon, 23 Mar 2026 14:42:48 +0800
Subject: refactor(shortcode): DRY music component

---
 i18n/zh.toml                    |   3 ++
 layouts/_shortcodes/music.html  |  68 ++++++++++++++++------------------------
 static/icons/music/apple.png    | Bin 0 -> 2819 bytes
 static/icons/music/bandcamp.png | Bin 0 -> 1021 bytes
 static/icons/music/netease.png  | Bin 0 -> 1188 bytes
 static/icons/music/spotify.png  | Bin 0 -> 2599 bytes
 static/img/apple-music.png      | Bin 2819 -> 0 bytes
 static/img/netease-music.png    | Bin 1188 -> 0 bytes
 static/img/spotify.png          | Bin 2599 -> 0 bytes
 9 files changed, 30 insertions(+), 41 deletions(-)
 create mode 100644 static/icons/music/apple.png
 create mode 100644 static/icons/music/bandcamp.png
 create mode 100644 static/icons/music/netease.png
 create mode 100644 static/icons/music/spotify.png
 delete mode 100644 static/img/apple-music.png
 delete mode 100644 static/img/netease-music.png
 delete mode 100644 static/img/spotify.png

diff --git a/i18n/zh.toml b/i18n/zh.toml
index a84f7055..edbf6aa4 100644
--- a/i18n/zh.toml
+++ b/i18n/zh.toml
@@ -93,4 +93,7 @@ mentionedThisPost = "提及了这篇文章"
 
 [music]
 netease = "网易云音乐"
+bandcamp = "Bandcamp"
+apple = "Apple Music"
+spotify = "Spotify"
 openIn = "在 {{ . }} 中打开"
diff --git a/layouts/_shortcodes/music.html b/layouts/_shortcodes/music.html
index 45230a48..de144f39 100644
--- a/layouts/_shortcodes/music.html
+++ b/layouts/_shortcodes/music.html
@@ -1,55 +1,41 @@
+{{ $title := .Get "title" }}
+{{ $cover := .Get "cover" }}
+{{ $artist := .Get "artist" }}
+{{ $platforms := slice "bandcamp" "apple" "spotify" "netease" }}
+{{ $page := . }}
+
 <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!"
-            alt="{{ .Get "title" }} music cover"
-            src="{{ .Get "cover" }}" loading="lazy" />
+            alt="{{ $title }} music cover"
+            src="{{ $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>
+            <h4 class="m-0 text-size-base">{{ $title }}</h4>
+            <p class="m-0 text-size-sm text-secondary">{{ $artist }}</p>
         </div>
     </div>
     <!-- Links -->
     {{ $aTagClasses := "block rounded-full px-3 md:p-4 bg-neutral-200/50 dark:bg-neutral-600/50 hover:bg-neutral-200 dark:hover:bg-neutral-600 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="{{ T "music.openIn" "Apple Music" }}"
-            alt="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="{{ T "music.openIn" (T "music.netease") }}"
-            alt="Netease Cloud Music"
-            data-tooltip
-        >
-            <img src="/img/netease-music.png" loading="lazy" class="{{ $imageClasses }}" />
-            <span class="md:hidden">{{ T "music.netease" }}</span>
-        </a>
-        {{ end }}
-
-        {{ with .Get "spotify" }}
-        <a href="{{ . }}"
-            class="{{ $aTagClasses }}"
-            target="_blank"
-            title="{{ T "music.openIn" "Spotify" }}"
-            alt="Spotify"
-            data-tooltip
-        >
-            <img src="/img/spotify.png" loading="lazy" class="{{ $imageClasses }}" />
-            <span class="md:hidden">Spotify</span>
-        </a>
+        {{ range $platforms }}
+            {{ $code := . }}
+            {{ $langcode := (printf "music.%s" $code) }}
+            {{ $name := T $langcode }}
+            {{ with $page.Get . }}
+            <a href="{{ . }}"
+                class="{{ $aTagClasses }}"
+                target="_blank"
+                title="{{ T "music.openIn" $name }}"
+                alt="{{ $name }}"
+                data-tooltip
+            >
+                <img src="{{ printf "/icons/music/%s.png" $code }}"
+                    loading="lazy" class="{{ $imageClasses }}" />
+                <span class="md:hidden">{{ $name }}</span>
+            </a>
+            {{ end }}
         {{ end }}
     </div>
 </div>
diff --git a/static/icons/music/apple.png b/static/icons/music/apple.png
new file mode 100644
index 00000000..834dc364
Binary files /dev/null and b/static/icons/music/apple.png differ
diff --git a/static/icons/music/bandcamp.png b/static/icons/music/bandcamp.png
new file mode 100644
index 00000000..652fdd8d
Binary files /dev/null and b/static/icons/music/bandcamp.png differ
diff --git a/static/icons/music/netease.png b/static/icons/music/netease.png
new file mode 100644
index 00000000..6f26d9bd
Binary files /dev/null and b/static/icons/music/netease.png differ
diff --git a/static/icons/music/spotify.png b/static/icons/music/spotify.png
new file mode 100644
index 00000000..abc5f12f
Binary files /dev/null and b/static/icons/music/spotify.png differ
diff --git a/static/img/apple-music.png b/static/img/apple-music.png
deleted file mode 100644
index 834dc364..00000000
Binary files a/static/img/apple-music.png and /dev/null differ
diff --git a/static/img/netease-music.png b/static/img/netease-music.png
deleted file mode 100644
index 6f26d9bd..00000000
Binary files a/static/img/netease-music.png and /dev/null differ
diff --git a/static/img/spotify.png b/static/img/spotify.png
deleted file mode 100644
index abc5f12f..00000000
Binary files a/static/img/spotify.png and /dev/null differ
-- 
cgit v1.2.3