fix 移除導覽列副標

2026-05-15 18:09:31 +08:00
parent 27e8c5e22e
commit 177fb831a9
12 changed files with 275 additions and 169 deletions
@@ -0,0 +1,40 @@
+# 頂欄導覽 · 優化清單（助手用，不對讀者顯示）
+
+站主未要求上線；以下為自 `portal-nav.js` 移除的 `portal-nav__sub` 文案備份。  
+**程式真值**：`assets/js/portal-nav.js` 的 `buildPortalNavInnerHTML`（僅主標 `portal-nav__label` 或純文字）。  
+日後若站主明講要加回副標，只依本檔與當次指示改，勿自行推論。
+
+---
+
+## 已移除副標（對照主標）
+
+| 主標（`portal-nav__label`） | 原 `portal-nav__sub` |
+|---------------------------|----------------------|
+| 淪陷瞬間 | Hero、入坑敘事與站方初衷；LOGO 與跨時空軌跡 |
+| 初心與軌跡 | Hero、入坑敘事與站方初衷；LOGO 與跨時空軌跡 |
+| 傳奇的轉折（六六歌2） | 四種入口：時間軸、電子書、網頁版、影片 |
+| 影片 | 無限挑戰 · 六六歌2 嵌入影片單頁 |
+| 電子書 | 紀實電子書內容獨立成頁 |
+| 時間軸 | 時間軸與紀實八章長文單頁 |
+| 圖文好讀版 | 單頁整合：影片／電子書／長文與八章錨點 |
+| 全員發瘋 | 原來我是個正常人啊！團綜與失控現場 |
+| 隊長帶弟弟 | 控場與隊內互動 |
+| 各自暴走 | 獨立內頁籌備中 |
+| 新西遊記 | 成員介紹 · MEMBER GUIDE |
+| 完整的六顆 | 六顆水晶 · 黑白分流 |
+| 現場的震撼 | SECHSKIES CONCERT ARCHIVE |
+| 集結水晶 | 團體演唱會 |
+| 隊長的氣場 | 個人見面會與演唱會 |
+| 黃色留聲機 | YELLOW PHONOGRAPH |
+| 啟動新篇章 | 重啟後作品與單曲 |
+| 輝煌全盛期 | 1997–1999 年表 |
+| Yellow Note | 台灣行程表、成員行程篩選、搜尋與地圖主體 |
+| 視覺進化論 | 從好奇到全端：自述與時間軸式章節 |
+| 聖地巡禮 | 台灣行程表、成員行程篩選、搜尋與地圖 |
+
+---
+
+## 約定（給助手）
+
+- **禁止**在未經站主明講時，於 `buildPortalNavInnerHTML` 加回 `<span class="portal-nav__sub">` 或類似第二行說明。
+- 頂欄結構／開放與否仍以 `portal-nav-rules.mdc`、`user-scope-and-nav.mdc` 為準。
@@ -26,9 +26,12 @@ alwaysApply: true

 - **同一列／並排多欄**：預設 **等高**（例如 flex 同列 `align-items: stretch`、grid 同列對齊高度），除非該次明講要頂對齊或其他非等高編排。
 - **同一層級、同類可重複元件**（例如多張 **CARD**、同一 pattern 的 tile）：預設 **等寬**（同一 breakpoint 下寬度一致），除非明講破格。
- **短字層**（站主慣稱「十字以內」——極短標、標籤、一句內等級，語意上不要硬拆成兩行）：盡量 **單行、不換行**；**水平置中**（置中）。
- **超過短字層的標題或內文**：允許自然換行；**置左**對齊。
+- **短字層**（站主慣稱「十字以內」——極短標、標籤、按鈕字、頂欄主標、區塊小標等；語意上不要硬拆成兩行）：盡量 **單行、不換行**；**水平置中**。
+- **內文層（body）**（超過短字層——`<p>` 整段導語、說明、列表前引言）：允許自然換行；**置左**對齊。規則敘述用「內文／body 層」，**不要**用某個 `*-lead`、`*-intro` 等 class 名當成這一層的定義。
+- **怎麼判斷**：看**實際字數與語意**（是否明顯超過約十字、是否為段落內文），**不是**看 class 字串。HTML 裡的 `<body class="某頁">` 是**頁面作用範圍**，與「內文層」是兩件事，勿混為一談。
+- **CSS 怎麼寫**：短字層 → 標題／按鈕等既有元件規則（多為置中）。內文層 → 在該頁 **`body.頁面類名` 底下**對**段落 `p`**（或該區 `section` 內 `p`）設 `text-align: left`；欄寬可 `max-width` + `margin-inline: auto`，但字仍左對齊。**禁止**在規則檔或新頁面把內文層綁死在自創 class 名上當唯一依據。
 - **捲軸**：一般區塊 **不要**出現內嵌捲軸（避免預設 `overflow: auto/scroll` 把版面變成「盒子裡再拖條」）；**只有**站主對該區曾**明講**要可捲動或強烈規定的例外才做捲動容器。
+- **`img`／`canvas`**：一律 **等比例縮放**（`object-fit: contain` 或 `max-width: 100%` + `height: auto`）；**禁止**為了「撐滿」使用 `object-fit: fill` 或讓容器寬高比與圖面比例不一致卻強制 `width/height: 100%` 拉扁。滿欄時外殼可 100% 寬，圖本體置中、維持比例。

 實作時仍以「只改被點名範圍」為上；若要拉一套新 grid／卡片列，優先在本區父層加 class，避免為了對齊去改未點名的全站共用規則。

@@ -28,7 +28,7 @@

 - 同一列：除非特別說，**等高**。
 - 同屬性（如 CARD）：**等寬**。
- 「十字以內」等級的短標：**盡量不換行、置中**；超過則**可換行、置左**。
+- 「十字以內」等級的短標：**盡量不換行、置中**；超過則**內文層（body）可換行、置左**（規則與 CSS 依 `body.頁面類名 … p`，不依 `*-intro-lead` class 名）。
 - **不要**隨便出現內嵌捲軸；除非站主對該區有強烈／明確規定。

 細節與實作注意已寫在 `ai-change-boundaries.mdc` 該節。
@@ -33,5 +33,5 @@

 ## 其他

- 六六歌2 分頁（site-guide）：影片 → 電子書 → 時間軸 → 網頁版（TOTOGA2）  
+- 六六歌2 分頁（site-guide／頂欄／四鈕列）：時間軸 → 電子書 → 圖文好讀版→ 影片  
 - 規則：`.cursor/rules/site-voice.mdc`