137 lines
6.2 KiB
Markdown
137 lines
6.2 KiB
Markdown
# 變更檢查清單（工作區 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()` 後同上開新分頁
|
||
|
||
---
|
||
|
||
## 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"`）。
|
||
|
||
### 具體修改
|
||
|
||
1. `<article class="story-node">` 追加 modifier：`story-node--ebook-ssg2`。
|
||
2. 在該篇 `<p>…</p>` 之後新增：
|
||
- `<a href="fallen/totoga2.html#ebook" class="timeline-ebook-cta">`
|
||
- Font Awesome：`fa-solid fa-hand-pointer`（`aria-hidden="true"`）
|
||
- 文案：「點這裡翻開《六六歌2》紀實電子書」
|
||
|
||
### 相依性（請檢查）
|
||
|
||
- 頁面須已載入 Font Awesome（與現有 `<link>` 一致），否則圖示不顯示。
|
||
- `fallen/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` 即可重新顯示該區塊。
|
||
|
||
---
|
||
|
||
## 建議檢查步驟（逐項勾選）
|
||
|
||
1. **`albums/albums.html`**：每列空白處／封面／年份點擊 → 新分頁 Spotify 正確專輯；點列內本站連結 → 仍進本站、不開 Spotify。
|
||
2. **`albums/albums.html`**：鍵盤 Tab 聚焦列後 Enter／空白 → 開 Spotify；聚焦在 `<a>` 上時 Enter → 遵循連結。
|
||
3. **`index.html` + `assets/css/style.css`**：2016 卡片外觀與 CTA 按鈕、`hover`、`focus-visible`、縮減動態偏好設定下手勢動畫關閉。
|
||
4. **`assets/js/portal-nav.js`**：全站注入後選單無「消失的真相」；改 `true` 後該項回來。
|
||
5. **跨頁**：任意頁載入 `assets/js/portal-nav.js` 後行為一致。
|
||
|
||
---
|
||
|
||
## 備註
|
||
|
||
- Spotify 專輯 ID 會隨平台重新發行／區域而變動；若連結失效請重新對照官方頁面更新 `data-spotify-url`。
|
||
- 若你要把「檢查清單」與 git 提交對齊，可在提交前再跑一次：`git diff` 確認與本文及實際檔案一致。
|