feat NJTW5.html

2026-05-14 11:05:12 +08:00
parent c278df23e1
commit 3fe60db22f
18 changed files with 1021 additions and 179 deletions
@@ -0,0 +1,136 @@
+# 變更檢查清單（工作區 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="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` 即可重新顯示該區塊。
+
+---
+
+## 建議檢查步驟（逐項勾選）
+
+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` 確認與本文及實際檔案一致。
@@ -94,5 +94,9 @@
 |------|------|
 | `assets/js/portal-nav.js` | `buildPortalNavInnerHTML`、`COMING_SOON_PAGES`、`INDEX_NAV_OPEN_HASHES`、籌備中邏輯 |
 | `assets/css/style.css` | `.portal-nav`、子選單、`.nav-current` 等樣式 |
+| `.cursor/rules/user-scope-and-nav.mdc` | 與本頁對齊的 Cursor 規則（意圖／導覽開放） |
+| `.cursor/rules/ai-change-boundaries.mdc` | 變更範圍與共用 CSS 邊界 |
+| `docs/CHANGESET-review.md` | 歷次變更檢查清單筆記 |
+| `docs/sql/sql_plan.md` | SQL 練習／筆記 |

 （導覽文案隨機句：`NAV_SOON_PHRASES`，僅影響籌備中連結的提示，與新頁是否開放無關。）
@@ -0,0 +1,98 @@
+# 💎 水晶男孩推廣部：SQL 三日修煉手冊
+
+> **任務清單 (SOP)**
+> * style(file): 檔案命名為 .md
+> * fix(db): 確保最後不帶多餘逗號
+> * perf(save): 隨手 Ctrl + S 存檔
+
+---
+
+## 📅 DAY 1：連連看基礎 (JOIN)
+**邏輯**：用 album_id 把「歌曲」與「專輯」黏起來。
+### 1. 傳統連表 (WHERE)
+```sql
+SELECT songs.title, albums.title 
+FROM songs, albums 
+WHERE songs.album_id = albums.id 
+ORDER BY songs.id;
+```
+
+### 2. 標準內連線 (INNER JOIN)
+```sql
+SELECT songs.title, albums.title 
+FROM songs
+INNER JOIN albums ON songs.album_id = albums.id 
+ORDER BY songs.id;
+```
+### 3. 左外連線 (LEFT JOIN)
+```sql
+SELECT songs.title, albums.title 
+FROM songs
+LEFT JOIN albums ON songs.album_id = albums.id;
+```
+### 4. 右外連線 (RIGHT JOIN)
+```
+SELECT songs.title, albums.title 
+FROM songs
+RIGHT JOIN albums ON songs.album_id = albums.id;
+```
+## 📅 DAY 2：資料美化與彙整
+**邏輯**：處理空值與統計數量。
+
+### 1. 處理空值 (IFNULL)
+```sql
+SELECT 
+    IFNULL(songs.title, '未命名') AS '歌名',
+    IFNULL(albums.title, '未知') AS '專輯'
+FROM songs
+RIGHT JOIN albums ON songs.album_id = albums.id;
+```
+### 2. 分組統計 (COUNT)
+```sql
+SELECT 
+    albums.title AS '專輯名稱',
+    COUNT(songs.id) AS '歌曲總數'
+FROM albums
+LEFT JOIN songs ON albums.id = songs.album_id
+GROUP BY albums.id;
+```
+## 📅 DAY 3：魔王級子查詢 (Subquery)
+
+### 1. 巢狀條件查詢
+```sql
+SELECT * FROM songs 
+WHERE album_id = (SELECT id FROM albums WHERE title = 'Road Fighter');
+```
+-- 在每首歌後面顯示目前所有歌曲 album_id 的平均值（對比用）
+
+### 2.多表關聯查詢
+```sql
+-- 邏輯：同時連三張表（歌曲、專輯、成員）
+SELECT 
+    songs.title AS '歌名',
+    albums.title AS '專輯名稱',
+    albums.release_date AS '發行日期'
+FROM 
+    songs, 
+    albums
+WHERE 
+    songs.album_id = albums.id AND 
+    albums.id = 1; -- 這裡的 1 代表第一張專輯（對應老師的 dept=1）
+
+```
+### 3. 計算式子查詢
+```sql
+SELECT 
+    title, 
+    album_id, 
+    (SELECT AVG(album_id) FROM songs) AS '全庫平均編號'
+FROM 
+    songs;
+```
+
+
+## 🛠 努比的開發 SOP 筆記
+- **feat(db)**: 修改語法後先按 `Ctrl + S` 存檔。
+- **style(code)**: 關鍵字大寫，欄位名小寫。
+- **fix(db)**: 確保最後一個欄位沒有多餘的逗號。
+- **perf(note)**: 執行成功後，截圖貼到你的筆記網站。