6.2 KiB
6.2 KiB
變更檢查清單（工作區 vs HEAD）
說明： 此為對話當初「第一批」完整筆記存檔（五檔：
albums（原archive）／assets/css/index.css／index.html／assets/css/style.css／assets/js/portal-nav）。目前工作區是否仍為下列每一項，請以git diff與實際檔案為準，本文不作為程式真值來源。
本文依 git diff 對照 HEAD 整理，方便逐項核對；不含未在本 diff 出現之檔案或臆測內容。
涉及檔案（5）：albums/albums.html、assets/css/index.css、index.html、assets/js/portal-nav.js、assets/css/style.css
統計：以 git diff --stat 為準（以下內容對應該批變更初版筆記）。
1. albums/albums.html
目的
- 年表區塊（「啟動新篇章」「輝煌全盛期」）每一資料列：點列上非連結區域時，於新分頁開對應 Spotify 專輯。
- 列內既有
<a>（本站extra/lyrics.html、concert/concert.html、albums/albums.html#classic）維持原行為。
標記與無障礙
每一列 <tr> 增加：
| 屬性 | 說明 |
|---|---|
class="archive-row-spotify" |
供腳本與樣式選取 |
tabindex="0" |
鍵盤可聚焦列 |
data-spotify-url="https://open.spotify.com/album/…" |
要開啟的專輯網址 |
aria-label="…" |
螢幕閱讀器簡述 |
Spotify 連結對照（請自行點連結確認標題是否仍正確）
| 區塊 | 年份／列語意 | data-spotify-url（專輯頁） |
|---|---|---|
| 啟動新篇章 | 2016 數位單曲（THREE WORDS） | https://open.spotify.com/album/1Dijv8G0wnCN8PzFZoC8bN |
| 啟動新篇章 | 2017 ANOTHER LIGHT | https://open.spotify.com/album/5f2LzIFxljQF4FH7w3rXcQ |
| 啟動新篇章 | 2020 ALL FOR YOU | https://open.spotify.com/album/7vqIRL00YfTtuO0sSAK3Uv |
| 輝煌全盛期 | 1997 學園別曲（School Byeolgok） | https://open.spotify.com/album/18P1aqSLQA9WdNljjEhv9q |
| 輝煌全盛期 | 1998 Road Fighter | https://open.spotify.com/album/08TW1bmGzSg172Db8C2Bde |
| 輝煌全盛期 | 1999 Com' Back | https://open.spotify.com/album/3XWtqLXDZycu7Q0BGofhiq |
內嵌腳本（</body> 前，assets/js/portal-nav.js 之後）
querySelectorAll('tr.archive-row-spotify[data-spotify-url]')綁定：- click：若
e.target.closest('a')則不處理；否則window.open(url, '_blank', 'noopener,noreferrer') - keydown：僅
Enter/空白鍵；同樣避開錨點焦點；preventDefault()後同上開新分頁
- click：若
2. assets/css/index.css
新增選擇器（僅作用於 .archive-discography 內）
| 規則 | 效果 |
|---|---|
tbody tr.archive-row-spotify |
cursor: pointer |
tbody tr.archive-row-spotify:hover td |
淡黃底 rgba(255, 204, 0, 0.06) |
tbody tr.archive-row-spotify:focus-visible |
黃色外框約 2px、outline-offset: -2px |
3. index.html
變更位置
- 時間軸／故事區：**「傳奇回歸：重逢的感動合體」**那一段（
data-era="2016"）。
具體修改
<article class="story-node">追加 modifier：story-node--ebook-ssg2。- 在該篇
<p>…</p>之後新增：<a href="extra/totoga2.html#ebook" class="timeline-ebook-cta">- Font Awesome：
fa-solid fa-hand-pointer（aria-hidden="true"） - 文案：「點這裡翻開《六六歌2》紀實電子書」
相依性（請檢查）
- 頁面須已載入 Font Awesome（與現有
<link>一致），否則圖示不顯示。 extra/totoga2.html須存在；assets/js/totoga2.js會辨識網址列#ebook並切換至電子書模式。
4. assets/css/style.css
區塊註解
/* 跨時空軌跡：2016 六六歌節點 — 強調電子書 CTA */
新增樣式摘要
| 選擇器 | 用途 |
|---|---|
.merged-storyline .story-node.story-node--ebook-ssg2 |
2016 卡片邊框、陰影、淺黃漸層背景 |
.merged-storyline .story-node.story-node--ebook-ssg2 p:last-of-type |
末段 <p> 下緣縮排，預留按鈕間距 |
.merged-storyline .timeline-ebook-cta |
膠囊按鈕（flex、字重、黃色漸層、圓角、hover 上移與陰影） |
.merged-storyline .timeline-ebook-cta:focus-visible |
鍵盤焦點外框 |
.merged-storyline .timeline-ebook-cta .fa-hand-pointer |
略放大 + 動畫 timeline-finger-nudge |
@keyframes timeline-finger-nudge |
輕微位移循環 |
@media (prefers-reduced-motion: reduce) |
關閉手指動畫 |
注意：樣式皆掛在 .merged-storyline 底下，請確認首頁時間軌 DOM 仍使用 .merged-storyline 包住對應節點，否則樣式不會套用。
5. assets/js/portal-nav.js
目的
- 隱藏導覽中「消失的真相」（
sunghoon.html）整個頂層<li>＋子選單，且不以//寫在 HTML 模板字串內（避免字面文字注入innerHTML）。
實作
- 新增常數：
const SHOW_NAV_SUNGHOON = false; - 將該段
<li>…</li>包在 template literal 插值：
${SHOW_NAV_SUNGHOON ? \… ` : ''}` - 簡短註解說明為何不可用
//註解模板內 HTML。
還原方式
- 將
SHOW_NAV_SUNGHOON改為true即可重新顯示該區塊。
建議檢查步驟（逐項勾選）
albums/albums.html：每列空白處／封面／年份點擊 → 新分頁 Spotify 正確專輯；點列內本站連結 → 仍進本站、不開 Spotify。albums/albums.html：鍵盤 Tab 聚焦列後 Enter／空白 → 開 Spotify；聚焦在<a>上時 Enter → 遵循連結。index.html+assets/css/style.css：2016 卡片外觀與 CTA 按鈕、hover、focus-visible、縮減動態偏好設定下手勢動畫關閉。assets/js/portal-nav.js：全站注入後選單無「消失的真相」；改true後該項回來。- 跨頁：任意頁載入
assets/js/portal-nav.js後行為一致。
備註
- Spotify 專輯 ID 會隨平台重新發行／區域而變動；若連結失效請重新對照官方頁面更新
data-spotify-url。 - 若你要把「檢查清單」與 git 提交對齊，可在提交前再跑一次：
git diff確認與本文及實際檔案一致。