jekkinoopy/sechskies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: 新增 color-tokens 規範文件

Browse Source
This commit is contained in:
jekkinoopy
2026-06-11 15:34:47 +08:00
parent b0cb52fec9
commit 945adc79f6
60 changed files with 17908 additions and 17842 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/CHANGESET-review.md
+136 -136
View File
@@ -1,136 +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="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` 確認與本文及實際檔案一致。
# 變更檢查清單（工作區 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` 確認與本文及實際檔案一致。
docs/site-structure.md
+29 -29
View File
@@ -1,29 +1,29 @@
# 站內資料夾與頂欄選單對照
與 `assets/js/portal-nav.js` 的 `buildPortalNavInnerHTML` 一致；路徑變更時請同步改導覽與 `extra/site-guide.html`。
| 頂欄主項／子項 | 路徑（站根相對） |
|----------------|------------------|
| 淪陷瞬間 · 初心與軌跡 | `index.html` |
| 傳奇的轉折 | `fallen/totoga2.html` |
| 全員發瘋 · 隊長帶弟弟 | `variety/variety.html`（錨點 `#variety`） |
| 全員發瘋 · 各自暴走 · 新西遊記 | `variety/NJTW/NJTW5.html` |
| 完整的六顆 | `member/member.html` |
| 現場的震撼 | `concert/concert.html` |
| 黃色留聲機 | `albums/albums.html` |
| Yellow Note · 視覺進化論 | `yellow-note/minister.html` |
| Yellow Note · 聖地巡禮 | `yellow-note/map.html` |
## 根目錄樹（精簡）
- `index.html` — 首頁（淪陷瞬間）
- `fallen/` — 淪陷子線：六六歌2 整合長頁
- `member/` — 成員介紹（六顆水晶）
- `concert/`、`albums/` — 與選單同名主題
- `yellow-note/` — Yellow Note（minister + map）
- `variety/` — 綜藝與 NJTW 子頁
- `extra/` — 未掛主欄之草稿、複本、全站索引 `site-guide.html` 等
- `assets/` — 共用靜態資源
- `docs/sql/` — SQL 練習、計畫（`sql_plan.md`）與 `.sql` 腳本／匯出
`COMING_SOON_PAGES` 仍以**檔名**（如 `totoga2.html`、`map.html`）判斷，與上層資料夾名無關。
# 站內資料夾與頂欄選單對照
與 `assets/js/portal-nav.js` 的 `buildPortalNavInnerHTML` 一致；路徑變更時請同步改導覽與 `extra/site-guide.html`。
| 頂欄主項／子項 | 路徑（站根相對） |
|----------------|------------------|
| 淪陷瞬間 · 初心與軌跡 | `index.html` |
| 傳奇的轉折 | `fallen/totoga2.html` |
| 全員發瘋 · 隊長帶弟弟 | `variety/variety.html`（錨點 `#variety`） |
| 全員發瘋 · 各自暴走 · 新西遊記 | `variety/NJTW/NJTW5.html` |
| 完整的六顆 | `member/member.html` |
| 現場的震撼 | `concert/concert.html` |
| 黃色留聲機 | `albums/albums.html` |
| Yellow Note · 視覺進化論 | `yellow-note/minister.html` |
| Yellow Note · 聖地巡禮 | `yellow-note/map.html` |
## 根目錄樹（精簡）
- `index.html` — 首頁（淪陷瞬間）
- `fallen/` — 淪陷子線：六六歌2 整合長頁
- `member/` — 成員介紹（六顆水晶）
- `concert/`、`albums/` — 與選單同名主題
- `yellow-note/` — Yellow Note（minister + map）
- `variety/` — 綜藝與 NJTW 子頁
- `extra/` — 未掛主欄之草稿、複本、全站索引 `site-guide.html` 等
- `assets/` — 共用靜態資源
- `docs/sql/` — SQL 練習、計畫（`sql_plan.md`）與 `.sql` 腳本／匯出
`COMING_SOON_PAGES` 仍以**檔名**（如 `totoga2.html`、`map.html`）判斷，與上層資料夾名無關。
docs/sql/b18_22304998_6sykdb.sql
+2544 -2544
View File
File diff suppressed because one or more lines are too long
docs/sql/sechskies_db.sql
+37 -37
View File
@@ -1,38 +1,38 @@
-- 水晶男孩資料庫備份
-- 1. 建立專輯表
CREATE TABLE `albums` (
`id` INT AUTO_INCREMENT PRIMARY KEY,
`title` VARCHAR(50) NOT NULL,
`release_date` DATE
);
-- 2. 建立歌曲表
CREATE TABLE `songs` (
`id` INT AUTO_INCREMENT PRIMARY KEY,
`album_id` INT NOT NULL,
`title` VARCHAR(100) NOT NULL
);
-- 3. 匯入專輯資料
INSERT INTO `albums` (`id`, `title`, `release_date`) VALUES
(1, '學園別曲', '1997-05-14'),
(2, 'Welcome To The Sechskies Land', '1997-11-01'),
(3, 'Road Fighter', '1998-07-15');
-- 4. 匯入第一張專輯曲目
INSERT INTO `songs` (`album_id`, `title`)
VALUES (1, '學園別曲'),
(1, '戀情'),
(1, '男兒之路（品生品死）'),
(1, '確認'),
(1, '背叛感'),
(1, '請記得好嗎'),
(1, 'Walking In The Rain'),
(1, 'Dream Comes True'),
(1, '愛的宣言'),
(1, '一起來吧'),
(1, '戀情（Remix）'),
-- 水晶男孩資料庫備份
-- 1. 建立專輯表
CREATE TABLE `albums` (
`id` INT AUTO_INCREMENT PRIMARY KEY,
`title` VARCHAR(50) NOT NULL,
`release_date` DATE
);
-- 2. 建立歌曲表
CREATE TABLE `songs` (
`id` INT AUTO_INCREMENT PRIMARY KEY,
`album_id` INT NOT NULL,
`title` VARCHAR(100) NOT NULL
);
-- 3. 匯入專輯資料
INSERT INTO `albums` (`id`, `title`, `release_date`) VALUES
(1, '學園別曲', '1997-05-14'),
(2, 'Welcome To The Sechskies Land', '1997-11-01'),
(3, 'Road Fighter', '1998-07-15');
-- 4. 匯入第一張專輯曲目
INSERT INTO `songs` (`album_id`, `title`)
VALUES (1, '學園別曲'),
(1, '戀情'),
(1, '男兒之路（品生品死）'),
(1, '確認'),
(1, '背叛感'),
(1, '請記得好嗎'),
(1, 'Walking In The Rain'),
(1, 'Dream Comes True'),
(1, '愛的宣言'),
(1, '一起來吧'),
(1, '戀情（Remix）'),
(1, '男兒之路（品生品死）（Remix）');
docs/sql/sql_plan.md
+97 -97
View File
@@ -1,98 +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)**: 確保最後一個欄位沒有多餘的逗號。
# 💎 水晶男孩推廣部：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)**: 執行成功後，截圖貼到你的筆記網站。