今天的進度主要是把專輯的「詳細頁面」完成，讓使用者可以點擊首頁上的專輯，進到專屬的頁面，看到專輯封面、發行年份，以及完整的歌曲清單。

首先新增三個檔案，如下圖

album.html

這個頁面專門用來顯示單張專輯的詳細內容。基本結構包含：

• 返回按鈕：讓使用者能回到首頁。
• 專輯標題與封面：抓取專輯名稱與圖片。
• 發行年份：顯示該專輯的發行時間。
• 歌曲清單：列出專輯內的所有歌曲，並能連結到 YouTube。

程式碼如下：

album.css

在樣式上，我延續了首頁的深色風格，並針對專輯展示頁做了細部調整：

• 返回按鈕：左上角固定，方便操作。
• 專輯內容：使用 flex 垂直排列，讓圖片、標題、年份與歌曲清單整齊顯示。
• 歌曲清單：去除預設底線，滑鼠移上去會有背景與顏色變化，增添互動感。

程式碼如下：

album.js

邏輯的核心是：

• 先定義一個 albums 物件，裡面存放每張專輯的 標題、年份、封面圖片、歌曲清單。
• 使用 URLSearchParams 讀取網址上的 id，確認要顯示哪張專輯。
• 把資料塞進 HTML 裡的對應位置。
• 每首歌用 li 顯示，並加上超連結讓使用者能直接播放。

程式碼如下:

成果

完成後，整個流程就能串起來：

• 使用者點首頁專輯 → 跳到 album.html?id=1
• JS 會讀取 id，找到對應專輯
• 頁面顯示專輯封面、標題、年份
• 下方是歌曲清單，點歌名就能連到 YouTube

點擊專輯後進入到歌曲頁面

鼠標放在歌名上會改變字體顏色，點擊後會跳轉到該歌曲YouTube頁面

另外一張專輯歌曲圖