fix [data-totoga-hub] 按鈕加上 click，呼叫 setHubPanel

2026-05-14 18:28:39 +08:00
parent efed0a5feb
commit 03597e1c53
6 changed files with 356 additions and 265 deletions
@@ -1,9 +1,23 @@
+---
+description: 全站頂欄導覽 portal-nav.js（buildPortalNavInnerHTML、COMING_SOON_PAGES、INDEX_NAV_OPEN_HASHES、籌備中、新頁檢查清單）；與 user-scope-and-nav 搭配。
+alwaysApply: true
+---
+
 # 全站導覽列規則（`assets/js/portal-nav.js`）

 之後**每新增一個要上線、可點的 HTML 頁面**，請一併完成導覽更新；規則都集中在 **`assets/js/portal-nav.js`**。

 ---

+## 0. 站主同意（最高優先）
+
+- **未經站主明確同意**，不得自行：從 `COMING_SOON_PAGES` 移除檔名、擴充 `INDEX_NAV_OPEN_HASHES`、在 `buildPortalNavInnerHTML` **新增**導覽項目、**刪除站主已同意列入頂欄**的項目、或把籌備中連結改成可點（**例外見下**）。
+- 「檔案已在 repo 裡」**不代表**可以開放導覽或當成已上線。
+- **`extra/site-guide.html`（全站導覽索引頁）**：頂欄 `<nav>` 使用 **`data-portal-nav-all-open`** 時，腳本**不套用**籌備中，頂欄內連結**全部可點**（僅此頁；站內其他頁**禁止**加此屬性）。
+- 頂欄模板**不含**未同意掛列的頁（例如 `member.html`「六顆水晶」）；該頁仍可由 `site-guide` 卡片或網址直開。
+
+---
+
 ## 1. 必做：把頁面掛進導覽 HTML

 在 **`buildPortalNavInnerHTML`**（`assets/js/portal-nav.js`）裡維護連結：
@@ -43,6 +57,13 @@

 ---

+## 3.1 索引頁頂欄全開（僅 `site-guide.html`）
+
+- **`extra/site-guide.html`** 的 `<nav>` 使用 **`data-portal-nav data-portal-nav-all-open`** 時：注入後**不套用**籌備中，頂欄連結維持真實 `href`（含 `#story` 等）。
+- **禁止**在 `site-guide.html` 以外的頁面使用 `data-portal-nav-all-open`。
+
+---
+
 ## 4. 新頁面 HTML 檢查清單

 - 在 `<body>` 內適當位置放：
@@ -84,7 +105,7 @@
 ## 7. 與使用者約定：開放範圍

 - **不要**在未經使用者**明確交代**的情況下，自行把導覽改為「可點進入」或更換目標頁（例如把「傳奇的轉折」改成連到 `totoga2.html`）。
- 「傳奇的轉折」是否開放、連到哪裡，**只依使用者指示**；實作細節亦寫在專案規則 **`.cursor/rules/user-scope-and-nav.mdc`**（給 Cursor 代理讀取）。
+- 「傳奇的轉折」是否開放、連到哪裡，**只依使用者指示**；意圖與邊界亦見 **`.cursor/rules/user-scope-and-nav.mdc`**。

 ---

@@ -94,9 +115,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/user-scope-and-nav.mdc` | 意圖與導覽開放（與本規則搭配） |
 | `.cursor/rules/ai-change-boundaries.mdc` | 變更範圍與共用 CSS 邊界 |
-| `docs/CHANGESET-review.md` | 歷次變更檢查清單筆記 |
+| `docs/CHANGESET-review.md` | 歷次變更檢查清單筆記（非程式真值來源） |
 | `docs/sql/sql_plan.md` | SQL 練習／筆記 |

 （導覽文案隨機句：`NAV_SOON_PHRASES`，僅影響籌備中連結的提示，與新頁是否開放無關。）
@@ -8,6 +8,10 @@ alwaysApply: true
 ## 只做被交代的事

 - **不得**在未被使用者**明確要求**的情況下：把導覽連結從「籌備中／尚無開放」改成可點、更換 `href` 成真實頁面、從 `COMING_SOON_PAGES` 移除、或把錨點加入 `INDEX_NAV_OPEN_HASHES`。
+- **不得**在未被使用者**明確要求**的情況下：從 `buildPortalNavInnerHTML` **刪除**站主**已同意**列入頂欄的項目。
+- 使用者**明確要求**移除某列（例如不同意掛頂欄的「六顆水晶」）時，依指示從模板刪除即可。
+- **不得**在未被使用者**明確要求**的情況下：在 `buildPortalNavInnerHTML` **新增**任何頂欄導覽項目或子選單連結（即使目標頁面已存在於 repo）。
+- **不得**在 **`site-guide.html` 以外**的頁面加上 **`data-portal-nav-all-open`**（該屬性僅用於索引頁頂欄「全連結可點」；其他頁頂欄須套用籌備中規則）。
 - **不得**因為「內容已搬到某頁」就自行推論「導覽也應該開放」——導覽是否開放**只聽使用者口述**。
 - 若使用者只要求搬內容、刪檔、改站內某段文案，**預設不改** `assets/js/portal-nav.js` 的開放狀態與連結目標。

@@ -22,7 +26,9 @@ alwaysApply: true

 ## 名詞對齊（避免做錯檔）

- **頂部橫列導覽（常稱 navbar）**：`assets/js/portal-nav.js` 注入的 `<nav class="portal-nav" data-portal-nav>`，每一頁頂端黑底那一條。**備份稿／未公開頁**除非使用者**明講要上這條**，否則不要寫進 `buildPortalNavInnerHTML` 模板。
+- **頂部橫列導覽（常稱 navbar）**：`assets/js/portal-nav.js` 注入的 `<nav class="portal-nav" data-portal-nav>`。已同意列入者不得擅自刪除；**新增**備份稿／未公開頁至上列須站主明講。**`extra/site-guide.html`** 可加 **`data-portal-nav-all-open`** 略過籌備中（僅該頁）。
 - **全站頁面索引**：`site-guide.html`（自行開網址），用來列檔案與錨點；**不影響**頂欄是否出現該連結。使用者說「留在全站導覽」常指保留在 **site-guide** 或站內說明，**不等於**要掛進頂欄。

 （變更哪些檔、可否動共用 CSS：見 **`ai-change-boundaries.mdc`**。）
+
+全站導覽的**技術細節與檢查清單**：**`portal-nav-rules.mdc`**（與本檔同目錄）。
@@ -796,6 +796,7 @@ a {
    transform: translateX(-50%);
    background: linear-gradient(180deg, #ffde5f 0%, #ffcc00 45%, #f3b700 100%);
    border-radius: 8px;
+    pointer-events: none;
 }

 .story-node {
@@ -1842,6 +1843,16 @@ body.totoga2-page .bilivideo-frame iframe {

 body.totoga2-page .totoga2-reader-hub {
    padding-bottom: 2rem;
+    position: relative;
+    z-index: 2;
+}
+
+/* 紀實長文 hub：上方 plot 為 section（全站 section 設 z-index:10），與下方控制列重疊時會蓋住點擊 */
+body.totoga2-page .totoga2-reader-hub > .chronicle-controls,
+body.totoga2-page .totoga2-reader-hub > #totoga2-reader,
+body.totoga2-page .totoga2-reader-hub > #totoga2-pager {
+    position: relative;
+    z-index: 12;
 }

 body.totoga2-page .totoga2-plot {
@@ -2153,6 +2164,37 @@ body.site-guide-page .site-guide-group {
    margin-bottom: 2.75rem;
 }

+body.site-guide-page .site-guide-nav-sub {
+    display: block;
+    margin-top: 0.4rem;
+    font-size: clamp(0.62rem, 1.8vw, 0.78rem);
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    color: #7a6a30;
+    line-height: 1.4;
+    text-transform: none;
+}
+
+body.site-guide-page .site-guide-folder-hint {
+    text-align: center;
+    margin: -0.35rem auto 1.35rem;
+    max-width: 44rem;
+    font-size: 0.84rem;
+    color: #6e6e6e;
+    line-height: 1.55;
+}
+
+body.site-guide-page .site-guide-path {
+    font-size: 0.82em;
+    font-weight: 600;
+    color: #888;
+}
+
+body.site-guide-page .site-guide-group--extra {
+    padding-top: 0.5rem;
+    border-top: 1px dashed rgba(255, 204, 0, 0.42);
+}
+
 body.site-guide-page .site-guide-grid {
    display: grid;
    gap: 1.25rem;
@@ -2228,8 +2270,8 @@ body.site-guide-page .site-guide-card code {
    border-radius: 4px;
 }

-/* site-guide：六六歌2 區（單卡寬版、頁面連結為主） */
-body.site-guide-page .site-guide-group--ssg2 .site-guide-grid {
+/* site-guide：含 totoga2 大卡時，該區網格改為單欄置中 */
+body.site-guide-page .site-guide-group:has(.site-guide-card--totoga2) .site-guide-grid {
    grid-template-columns: minmax(0, min(100%, 40rem));
    justify-content: center;
 }
@@ -1,11 +1,15 @@
 (() => {
    /**
     * ── 導覽「尚未開放」連結 ─────────────────────────────────────────
-     * ① 整個檔案先關：COMING_SOON_PAGES（目前已含演唱會／典藏／地圖／視覺進化論等；綜藝主頁已開以利子選單）。
-     * ② index.html 細到錨點：INDEX_NAV_OPEN_HASHES。
-     * ③ 文案 NAV_SOON_PHRASES：每次「滑過或鍵盤聚焦」連結時隨機擇一句（不交錯只靠重整）。
-     *    浮層、title 與該次互動同步；無障礙用語固定為「尚無開放」（避免標籤隨機跳動）。
-     * 要調整詞句：改 NAV_SOON_PHRASES 即可。
+     * ① 頂欄 `buildPortalNavInnerHTML`：僅列站主同意掛在頂欄的分類（**不含**未同意的頁，例如 `member`「六顆水晶」）。
+     * ② `COMING_SOON_PAGES`／`INDEX_NAV_OPEN_HASHES`：在 Set／白名單外＝籌備中（`href` 改 `#`）。
+     * ③ **唯一例外**：`extra/site-guide.html` 的 `<nav data-portal-nav data-portal-nav-all-open>` **不套用**籌備中（索引頁預覽用，頂欄連結全可點）；**其他任何頁**不得加 `data-portal-nav-all-open`。
+     * ④ 文案 NAV_SOON_PHRASES：滑過／聚焦時隨機一句；無障礙固定「尚無開放」。
+     *
+     * ⚠️ 站主規則（必守）：未經站主**逐項口頭／文字同意**，不得自行
+     *    從 COMING_SOON_PAGES 移除檔名、擴充 INDEX_NAV_OPEN_HASHES、或在導覽模板新增／改為可點連結。
+     *    「頁面已存在」≠ 可開放導覽。
+     * 完整條文與檢查清單：`.cursor/rules/portal-nav-rules.mdc`（Cursor 會讀取）。
     */
    const NAV_SOON_PHRASES = ["奇蹟醞釀中", // 頁面準備中，呼應黃色奇蹟的誕生
        "感動載入中", // 資料讀取中，連結入坑時的悸動
@@ -27,6 +31,8 @@
    }

    const COMING_SOON_PAGES = new Set([
+        "variety.html",
+        "njtw5.html",
        "concert.html",
        "albums.html",
        "map.html",
@@ -34,7 +40,7 @@
        "minister_ge.html",
    ]);

-    /** 目前先開：淪陷瞬間 #origin + 子選單三項 #start / #mission / #timeline */
+    /** 首頁僅下列錨點可點；其餘（如 #story）維持籌備中，須站主同意後才可加入 */
    const INDEX_NAV_OPEN_HASHES = new Set(["#origin", "#start", "#mission", "#timeline"]);

    function normalizePageKey(href) {
@@ -150,44 +156,39 @@
    /** 全站導覽 HTML — `rp` 為站根相對前綴；僅修改此模板即可同步所有頁面 */
    function buildPortalNavInnerHTML(rp) {
        return `
-<a class="logo" href="${rp}index.html"><img src="${rp}assets/images/logov.svg" alt="SECHSKIES Logo"></a>
+<a class="logo" target="_blank" rel="noopener noreferrer" href="${rp}index.html"><img src="${rp}assets/images/logov.svg" alt="SECHSKIES Logo"></a>
 <ul>
-    <li><a href="${rp}index.html#origin"><span class="portal-nav__label">淪陷瞬間</span><span class="portal-nav__sub">六顆永恆的水晶 · 左右命運的傳奇</span></a>
+    <li><a target="_blank" rel="noopener noreferrer" href="${rp}index.html#origin"><span class="portal-nav__label">淪陷瞬間</span><span class="portal-nav__sub">六顆永恆的水晶 · 左右命運的傳奇</span></a>
        <ul class="portal-submenu">
-            <li><a href="${rp}index.html#start"><span class="portal-nav__label">好奇的開端</span><span class="portal-nav__sub">從好奇觀看到淪陷的起點</span></a></li>
-            <li><a href="${rp}index.html#mission"><span class="portal-nav__label">成立的初衷</span><span class="portal-nav__sub">推廣部與黃色奇蹟</span></a></li>
-            <li><a href="${rp}index.html#timeline"><span class="portal-nav__label">跨時空軌跡</span><span class="portal-nav__sub">年表與作品節點</span></a></li>
-            <li><a href="${rp}index.html#story"><span class="portal-nav__label">傳奇的轉折</span><span class="portal-nav__sub">重逢與敘事主線</span></a></li>
+            <li><a target="_blank" rel="noopener noreferrer" href="${rp}index.html#start"><span class="portal-nav__label">好奇的開端</span><span class="portal-nav__sub">從好奇觀看到淪陷的起點</span></a></li>
+            <li><a target="_blank" rel="noopener noreferrer" href="${rp}index.html#mission"><span class="portal-nav__label">成立的初衷</span><span class="portal-nav__sub">推廣部與黃色奇蹟</span></a></li>
+            <li><a target="_blank" rel="noopener noreferrer" href="${rp}index.html#timeline"><span class="portal-nav__label">跨時空軌跡</span><span class="portal-nav__sub">年表與作品節點</span></a></li>
+            <li><a target="_blank" rel="noopener noreferrer" href="${rp}index.html#story"><span class="portal-nav__label">傳奇的轉折</span><span class="portal-nav__sub">重逢與敘事主線</span></a></li>
        </ul>
    </li>
-    <li><a href="${rp}variety/variety.html"><span class="portal-nav__label">瘋子與天才</span><span class="portal-nav__sub">EUN JI-WON × VARIETY GRAVITY</span></a>
+    <li><a target="_blank" rel="noopener noreferrer" href="${rp}variety/variety.html"><span class="portal-nav__label">瘋子與天才</span><span class="portal-nav__sub">EUN JI-WON × VARIETY GRAVITY</span></a>
        <ul class="portal-submenu">
-            <li><a href="${rp}variety/variety.html#variety"><span class="portal-nav__label">瘋狂出演中</span><span class="portal-nav__sub">綜藝鏡頭與名場面</span></a></li>
-            <li><a href="${rp}variety/variety.html#stage"><span class="portal-nav__label">隊長的氣場</span><span class="portal-nav__sub">控場與隊內互動</span></a></li>
-            <li><a href="${rp}variety/NJTW/NJTW5.html"><span class="portal-nav__label">新西遊記</span><span class="portal-nav__sub">成員介紹 · MEMBER GUIDE</span></a></li>
+            <li><a target="_blank" rel="noopener noreferrer" href="${rp}variety/variety.html#variety"><span class="portal-nav__label">瘋狂出演中</span><span class="portal-nav__sub">綜藝鏡頭與名場面</span></a></li>
+            <li><a target="_blank" rel="noopener noreferrer" href="${rp}variety/variety.html#stage"><span class="portal-nav__label">隊長的氣場</span><span class="portal-nav__sub">控場與隊內互動</span></a></li>
+            <li><a target="_blank" rel="noopener noreferrer" href="${rp}variety/NJTW/NJTW5.html"><span class="portal-nav__label">新西遊記</span><span class="portal-nav__sub">成員介紹 · MEMBER GUIDE</span></a></li>
        </ul>
    </li>
-    <li><a href="${rp}concert/concert.html"><span class="portal-nav__label">現場的震撼</span><span class="portal-nav__sub">SECHSKIES CONCERT ARCHIVE</span></a>
+    <li><a target="_blank" rel="noopener noreferrer" href="${rp}concert/concert.html"><span class="portal-nav__label">現場的震撼</span><span class="portal-nav__sub">SECHSKIES CONCERT ARCHIVE</span></a>
        <ul class="portal-submenu">
-            <li><a href="${rp}concert/concert.html#stage-now"><span class="portal-nav__label">永恆的重逢</span><span class="portal-nav__sub">近年與重聚舞台</span></a></li>
-            <li><a href="${rp}concert/concert.html#stage-past"><span class="portal-nav__label">燦爛的最初</span><span class="portal-nav__sub">全盛期經典場次</span></a></li>
+            <li><a target="_blank" rel="noopener noreferrer" href="${rp}concert/concert.html#stage-now"><span class="portal-nav__label">永恆的重逢</span><span class="portal-nav__sub">近年與重聚舞台</span></a></li>
+            <li><a target="_blank" rel="noopener noreferrer" href="${rp}concert/concert.html#stage-past"><span class="portal-nav__label">燦爛的最初</span><span class="portal-nav__sub">全盛期經典場次</span></a></li>
        </ul>
    </li>
-    <li><a href="${rp}albums/albums.html"><span class="portal-nav__label">黃色留聲機</span><span class="portal-nav__sub">YELLOW PHONOGRAPH</span></a>
+    <li><a target="_blank" rel="noopener noreferrer" href="${rp}albums/albums.html"><span class="portal-nav__label">黃色留聲機</span><span class="portal-nav__sub">YELLOW PHONOGRAPH</span></a>
        <ul class="portal-submenu">
-            <li><a href="${rp}albums/albums.html#new"><span class="portal-nav__label">啟動新篇章</span><span class="portal-nav__sub">重啟後作品與單曲</span></a></li>
-            <li><a href="${rp}albums/albums.html#classic"><span class="portal-nav__label">輝煌全盛期</span><span class="portal-nav__sub">1997–1999 年表</span></a></li>
+            <li><a target="_blank" rel="noopener noreferrer" href="${rp}albums/albums.html#new"><span class="portal-nav__label">啟動新篇章</span><span class="portal-nav__sub">重啟後作品與單曲</span></a></li>
+            <li><a target="_blank" rel="noopener noreferrer" href="${rp}albums/albums.html#classic"><span class="portal-nav__label">輝煌全盛期</span><span class="portal-nav__sub">1997–1999 年表</span></a></li>
        </ul>
    </li>
-    <li><a href="${rp}map/map.html"><span class="portal-nav__label">聖地巡禮</span><span class="portal-nav__sub">SECHSKIES TAIWAN ARCHIVE</span></a>
+    <li><a target="_blank" rel="noopener noreferrer" href="${rp}map/map.html"><span class="portal-nav__label">聖地巡禮</span><span class="portal-nav__sub">SECHSKIES TAIWAN ARCHIVE</span></a>
        <ul class="portal-submenu">
-            <li><a href="${rp}map/map.html#taipei"><span class="portal-nav__label">台北聖地</span><span class="portal-nav__sub">行程與地點整理</span></a></li>
-            <li><a href="${rp}map/map.html#global"><span class="portal-nav__label">海外遠征</span><span class="portal-nav__sub">跨國足跡</span></a></li>
-        </ul>
-    </li>
-    <li><a href="${rp}extra/member.html"><span class="portal-nav__label">六顆水晶</span><span class="portal-nav__sub">BLACK KIES · WHITE KIES</span></a>
-        <ul class="portal-submenu">
-            <li><a href="${rp}extra/member.html#crystal-board"><span class="portal-nav__label">黑白分流</span><span class="portal-nav__sub">海報牆與分組介紹</span></a></li>
+            <li><a target="_blank" rel="noopener noreferrer" href="${rp}map/map.html#taipei"><span class="portal-nav__label">台北聖地</span><span class="portal-nav__sub">行程與地點整理</span></a></li>
+            <li><a target="_blank" rel="noopener noreferrer" href="${rp}map/map.html#global"><span class="portal-nav__label">海外遠征</span><span class="portal-nav__sub">跨國足跡</span></a></li>
        </ul>
    </li>
 </ul>
@@ -197,7 +198,9 @@
    const rootPrefix = portalNavRootPrefix();
    document.querySelectorAll("nav.portal-nav[data-portal-nav]").forEach((nav) => {
        nav.innerHTML = buildPortalNavInnerHTML(rootPrefix);
-        applyComingSoonToNav(nav);
+        if (!nav.hasAttribute("data-portal-nav-all-open")) {
+            applyComingSoonToNav(nav);
+        }
    });

    const navs = Array.from(document.querySelectorAll(".portal-nav"));
@@ -10,6 +10,13 @@
        });
    }

+    hubButtons.forEach((button) => {
+        button.addEventListener("click", () => {
+            const name = button.dataset.totogaHub;
+            if (name) setHubPanel(name);
+        });
+    });
+
    const reader = document.getElementById("totoga2-reader");
    const chapters = reader ? Array.from(reader.querySelectorAll(".chronicle-chapter")) : [];
    const modeButtons = Array.from(document.querySelectorAll("[data-totoga-reader-mode]"));
@@ -20,77 +20,50 @@
        </div>
    </header>

-    <nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
+    <nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav data-portal-nav-all-open></nav>

    <canvas id="particles"></canvas>

    <main class="content-container site-guide-main">
        <p class="site-guide-lead">
-            以下為本專案目前所有 HTML 頁面：每張卡片含<span class="mark_b">連結</span>、瀏覽器分頁上的<span
-                class="mark_b">標題</span>（<code>&lt;title&gt;</code>）、以及主要<span
-                class="mark_b">區塊／錨點</span>，方便你開發或簡報時一鍵跳轉。
-            <span class="mark_b">此頁未放入全站導覽列</span>，僅供你自行書籤或輸入網址（例如 <code>extra/site-guide.html</code>）開啟。
+            以下索引<strong>依頂欄全站導覽</strong>的分類與順序排列（與 <code>assets/js/portal-nav.js</code> 一致），並盡量對齊<strong>資料夾</strong>（站根 <code>index.html</code>、<code>variety/</code>、<code>concert/</code>、<code>albums/</code>、<code>map/</code>）。
+            每張卡片含<span class="mark_b">連結</span>、<span class="mark_b">標題</span>（<code>&lt;title&gt;</code>）、<span class="mark_b">錨點</span>。
+            <span class="mark_b">本頁頂欄</span>已設 <code>data-portal-nav-all-open</code>，連結全可點；一般內容頁頂欄仍依站主籌備中設定。
+            此頁<strong>未</strong>掛在頂欄選單內，請自行書籤或開啟 <code>extra/site-guide.html</code>。
        </p>

-        <section class="site-guide-group" aria-labelledby="sg-home">
-            <h2 class="section-title" id="sg-home">首頁與入口</h2>
+        <!-- 順序與 portal-nav 主選單一致：淪陷瞬間 → 瘋子與天才 → 現場的震撼 → 黃色留聲機 → 聖地巡禮；其餘為 extra/ 未列頂欄 -->
+
+        <section class="site-guide-group" aria-labelledby="sg-nav-origin">
+            <h2 class="section-title" id="sg-nav-origin">淪陷瞬間 <span class="site-guide-nav-sub">六顆永恆的水晶 · 左右命運的傳奇</span></h2>
+            <p class="site-guide-folder-hint">站根 · 對應 <code>index.html#origin</code> 與子選單錨點</p>
            <div class="site-guide-grid">
                <article class="site-guide-card">
-                    <h3><a href="../index.html">index.html</a></h3>
+                    <h3><a href="../index.html">index.html</a> <span class="site-guide-path">（站根）</span></h3>
                    <p class="site-guide-meta">標題列：<cite>SECHSKIES - 水晶男孩傳奇介紹</cite></p>
-                    <p class="site-guide-note">主視覺與導覽列；內文以區塊錨點分段。</p>
-                    <h4>區塊錨點</h4>
+                    <p class="site-guide-note">主選單「淪陷瞬間」主連結；子項與導覽子選單用語一致。</p>
+                    <h4>子選單錨點（與頂欄一致）</h4>
                    <ul>
-                        <li><a href="../index.html#origin">#origin</a> — 淪陷瞬間（Hero，與導覽一致）</li>
-                        <li><a href="../index.html#start">#start</a> — 好奇的開端</li>
-                        <li><a href="../index.html#mission">#mission</a> — 成立的初衷</li>
-                        <li><a href="../index.html#timeline">#timeline</a> — 跨時空軌跡</li>
-                        <li><a href="../index.html#story">#story</a> — 傳奇的轉折</li>
+                        <li><a href="../index.html#origin">#origin</a> — 淪陷瞬間 · 主選單主連結（Hero）</li>
+                        <li><a href="../index.html#start">#start</a> — 好奇的開端 · 從好奇觀看到淪陷的起點</li>
+                        <li><a href="../index.html#mission">#mission</a> — 成立的初衷 · 推廣部與黃色奇蹟</li>
+                        <li><a href="../index.html#timeline">#timeline</a> — 跨時空軌跡 · 年表與作品節點</li>
+                        <li><a href="../index.html#story">#story</a> — 傳奇的轉折 · 重逢與敘事主線</li>
                    </ul>
                </article>

-                <article class="site-guide-card">
-                    <h3><a href="grok.html">grok.html</a></h3>
-                    <p class="site-guide-meta">標題列：<cite>水晶男孩 SECHSKIES | 永恆的六顆水晶</cite></p>
-                    <p class="site-guide-note">單頁多區塊版型（實驗／簡報用）。</p>
-                    <h4>區塊錨點</h4>
-                    <ul>
-                        <li><a href="grok.html#story">#story</a></li>
-                        <li><a href="grok.html#members">#members</a></li>
-                        <li><a href="grok.html#discography">#discography</a></li>
-                        <li><a href="grok.html#now">#now</a></li>
-                    </ul>
-                </article>
-
-                <article class="site-guide-card">
-                    <h3><a href="member.html">member.html</a></h3>
-                    <p class="site-guide-meta">標題列：<cite>水晶男孩｜六顆水晶 · 黑白分流</cite></p>
-                    <p class="site-guide-note">2×4 交錯格：左上三張黑水晶海報、右上黑水晶介紹；左下白水晶介紹、右下三張白水晶海報。</p>
-                    <h4>區塊錨點</h4>
-                    <ul>
-                        <li><a href="member.html#crystal-board">#crystal-board</a></li>
-                    </ul>
-                </article>
-            </div>
-        </section>
-
-        <section class="site-guide-group site-guide-group--ssg2" aria-labelledby="sg-ssg2">
-            <h2 class="section-title" id="sg-ssg2">無限挑戰 · 六六歌 2</h2>
-            <div class="site-guide-grid">
                <article class="site-guide-card site-guide-card--totoga2">
-                    <h3><a href="totoga2.html">totoga2.html</a></h3>
+                    <h3><a href="totoga2.html">extra/totoga2.html</a> <span class="site-guide-path">（敘事延伸）</span></h3>
                    <p class="site-guide-meta">標題列：<cite>水晶男孩｜無限挑戰六六歌2 — 紀實電子書</cite></p>
-                    <p class="site-guide-note">單一入口：影片三集、FlipHTML5 電子書、傳奇的轉折時間軸、紀實長文八章（可切網漫／分頁）。</p>
-
+                    <p class="site-guide-note">呼應首頁「傳奇的轉折」軸線；檔案在 <code>extra/</code>，頂欄未單獨列項。</p>
                    <div class="site-guide-totoga2-panel">
                        <p class="site-guide-kicker">怎麼開</p>
                        <ul class="site-guide-modes site-guide-modes--totoga2">
-                            <li><a href="totoga2.html">影片模式</a> — 預設開啟（三集 Bilibili）。</li>
-                            <li><a href="totoga2.html#ebook">電子書模式</a> — 進頁即切到 FlipHTML5 全螢幕。</li>
-                            <li><a href="totoga2.html#challenge">紀實長文</a> — 自「無限挑戰」章進入；亦可從下方任一章捷徑直達。</li>
+                            <li><a href="totoga2.html">影片模式</a> — 預設（三集 Bilibili）</li>
+                            <li><a href="totoga2.html#ebook">電子書模式</a> — FlipHTML5 全螢幕</li>
+                            <li><a href="totoga2.html#challenge">紀實長文</a> — 自「無限挑戰」章起</li>
                        </ul>
                    </div>
-
                    <div class="site-guide-totoga2-panel">
                        <p class="site-guide-kicker">長文章節捷徑</p>
                        <nav class="site-guide-chapter-nav" aria-label="totoga2 紀實長文章節">
@@ -104,119 +77,158 @@
                            <a href="totoga2.html#final-stage">登場</a>
                        </nav>
                    </div>
-
-                    <p class="site-guide-fine-print">舊檔 <code>ssg2-ebook.html</code>、<code>chronicle.html</code> 已併入 <a
-                            href="totoga2.html">totoga2 整合頁</a>。</p>
+                    <p class="site-guide-fine-print">舊檔 <code>ssg2-ebook.html</code>、<code>chronicle.html</code> 已併入本頁。</p>
                </article>
            </div>
        </section>

-        <section class="site-guide-group" aria-labelledby="sg-members">
-            <h2 class="section-title" id="sg-members">成員與紀實</h2>
+        <section class="site-guide-group" aria-labelledby="sg-nav-variety">
+            <h2 class="section-title" id="sg-nav-variety">瘋子與天才 <span class="site-guide-nav-sub">EUN JI-WON × VARIETY GRAVITY</span></h2>
+            <p class="site-guide-folder-hint">資料夾 <code>variety/</code> · 對應頂欄第二主項</p>
            <div class="site-guide-grid">
                <article class="site-guide-card">
                    <h3><a href="../variety/variety.html">variety/variety.html</a></h3>
                    <p class="site-guide-meta">標題列：<cite>水晶男孩｜瘋子與天才</cite></p>
-                    <h4>區塊錨點</h4>
+                    <h4>子選單錨點（與頂欄一致）</h4>
                    <ul>
-                        <li><a href="../variety/variety.html#variety">#variety</a> — 瘋狂出演中</li>
-                        <li><a href="../variety/variety.html#stage">#stage</a> — 隊長的氣場</li>
+                        <li><a href="../variety/variety.html#variety">#variety</a> — 瘋狂出演中 · 綜藝鏡頭與名場面</li>
+                        <li><a href="../variety/variety.html#stage">#stage</a> — 隊長的氣場 · 控場與隊內互動</li>
                    </ul>
                </article>
-
                <article class="site-guide-card">
                    <h3><a href="../variety/NJTW/NJTW5.html">variety/NJTW/NJTW5.html</a></h3>
                    <p class="site-guide-meta">標題列：<cite>新西遊記：成員介紹</cite></p>
-                    <p class="site-guide-note">綜藝子頁；全站導覽「瘋子與天才」子選單第三項可進入。</p>
+                    <p class="site-guide-note">頂欄「瘋子與天才」子選單第三項：新西遊記 · MEMBER GUIDE</p>
                </article>
+            </div>
+        </section>

+        <section class="site-guide-group" aria-labelledby="sg-nav-concert">
+            <h2 class="section-title" id="sg-nav-concert">現場的震撼 <span class="site-guide-nav-sub">SECHSKIES CONCERT ARCHIVE</span></h2>
+            <p class="site-guide-folder-hint">資料夾 <code>concert/</code> · 對應頂欄第三主項</p>
+            <div class="site-guide-grid">
+                <article class="site-guide-card">
+                    <h3><a href="../concert/concert.html">concert/concert.html</a></h3>
+                    <p class="site-guide-meta">標題列：<cite>SECHSKIES Concert Archive</cite></p>
+                    <h4>子選單錨點（與頂欄一致）</h4>
+                    <ul>
+                        <li><a href="../concert/concert.html#stage-now">#stage-now</a> — 永恆的重逢 · 近年與重聚舞台</li>
+                        <li><a href="../concert/concert.html#stage-past">#stage-past</a> — 燦爛的最初 · 全盛期經典場次</li>
+                    </ul>
+                </article>
+            </div>
+        </section>
+
+        <section class="site-guide-group" aria-labelledby="sg-nav-albums">
+            <h2 class="section-title" id="sg-nav-albums">黃色留聲機 <span class="site-guide-nav-sub">YELLOW PHONOGRAPH</span></h2>
+            <p class="site-guide-folder-hint">資料夾 <code>albums/</code> · 對應頂欄第四主項；歌詞單頁檔在 <code>extra/</code>，主題歸典藏</p>
+            <div class="site-guide-grid">
+                <article class="site-guide-card">
+                    <h3><a href="../albums/albums.html">albums/albums.html</a></h3>
+                    <p class="site-guide-meta">標題列：<cite>水晶男孩｜黃色留聲機</cite></p>
+                    <h4>子選單錨點（與頂欄一致）</h4>
+                    <ul>
+                        <li><a href="../albums/albums.html#new">#new</a> — 啟動新篇章 · 重啟後作品與單曲</li>
+                        <li><a href="../albums/albums.html#classic">#classic</a> — 輝煌全盛期 · 1997–1999 年表</li>
+                    </ul>
+                </article>
+                <article class="site-guide-card">
+                    <h3><a href="lyrics.html">extra/lyrics.html</a> <span class="site-guide-path">（同區索引）</span></h3>
+                    <p class="site-guide-meta">標題列：<cite>세 단어 (THREE WORDS) — SECHSKIES</cite></p>
+                    <p class="site-guide-note"><code>&lt;html lang="ko"&gt;</code>；歌詞＋ YouTube 嵌入；頂欄未單獨列項。</p>
+                    <h4>結構</h4>
+                    <ul>
+                        <li><code>.lyrics-layout</code> — 主標＋表格雙欄</li>
+                    </ul>
+                </article>
+            </div>
+        </section>
+
+        <section class="site-guide-group" aria-labelledby="sg-nav-map">
+            <h2 class="section-title" id="sg-nav-map">聖地巡禮 <span class="site-guide-nav-sub">SECHSKIES TAIWAN ARCHIVE</span></h2>
+            <p class="site-guide-folder-hint">資料夾 <code>map/</code> · 對應頂欄第五主項</p>
+            <div class="site-guide-grid">
+                <article class="site-guide-card">
+                    <h3><a href="../map/map.html">map/map.html</a></h3>
+                    <p class="site-guide-meta">標題列：<cite>SECHSKIES 台灣行程地圖</cite></p>
+                    <h4>子選單錨點（與頂欄一致）</h4>
+                    <ul>
+                        <li><a href="../map/map.html#taipei">#taipei</a> — 台北聖地 · 行程與地點整理</li>
+                        <li><a href="../map/map.html#global">#global</a> — 海外遠征 · 跨國足跡</li>
+                    </ul>
+                </article>
+            </div>
+        </section>
+
+        <section class="site-guide-group site-guide-group--extra" aria-labelledby="sg-nav-extra">
+            <h2 class="section-title" id="sg-nav-extra">其他 HTML（<code>extra/</code> · 頂欄未列）</h2>
+            <p class="site-guide-folder-hint">仍在本站 repo，但未出現在 <code>buildPortalNavInnerHTML</code>；請由此索引或書籤開啟。</p>
+            <div class="site-guide-grid">
+                <article class="site-guide-card">
+                    <h3><a href="grok.html">grok.html</a></h3>
+                    <p class="site-guide-meta">標題列：<cite>水晶男孩 SECHSKIES | 永恆的六顆水晶</cite></p>
+                    <p class="site-guide-note">單頁多區塊（實驗／簡報）。</p>
+                    <h4>錨點</h4>
+                    <ul>
+                        <li><a href="grok.html#story">#story</a></li>
+                        <li><a href="grok.html#members">#members</a></li>
+                        <li><a href="grok.html#discography">#discography</a></li>
+                        <li><a href="grok.html#now">#now</a></li>
+                    </ul>
+                </article>
+                <article class="site-guide-card">
+                    <h3><a href="totoga2%20copy.html">totoga2 copy.html</a> <span class="site-guide-path">（檔名含空白）</span></h3>
+                    <p class="site-guide-meta">標題列：<cite>水晶男孩｜無限挑戰六六歌2 — 紀實電子書</cite>（與 <a href="totoga2.html">totoga2.html</a> 相同）</p>
+                    <p class="site-guide-note">六六歌 2 頁之<strong>複本／備份</strong>；版型與主檔相近。正式連結與索引敘事請以 <code>totoga2.html</code> 為準；若不再需要可刪除此檔。</p>
+                </article>
+                <article class="site-guide-card">
+                    <h3><a href="Untitled-1.html">Untitled-1.html</a> <span class="site-guide-path">（未命名草稿）</span></h3>
+                    <p class="site-guide-meta">標題列：<cite>Document</cite></p>
+                    <p class="site-guide-note">編輯器暫存草稿；<code>&lt;head&gt;</code> 內 <code>meta viewport</code> 與標記<strong>毀損</strong>，預覽可能異常。曾含跨頁 JPG 容器示意，尚未整理成正式頁。</p>
+                </article>
+                <article class="site-guide-card">
+                    <h3><a href="member.html">member.html</a></h3>
+                    <p class="site-guide-meta">標題列：<cite>水晶男孩｜六顆水晶 · 黑白分流</cite></p>
+                    <h4>錨點</h4>
+                    <ul>
+                        <li><a href="member.html#crystal-board">#crystal-board</a></li>
+                    </ul>
+                </article>
                <article class="site-guide-card">
                    <h3><a href="sunghoon.html">sunghoon.html</a></h3>
                    <p class="site-guide-meta">標題列：<cite>水晶男孩｜消失的真相</cite></p>
-                    <h4>區塊錨點</h4>
+                    <h4>錨點</h4>
                    <ul>
                        <li><a href="sunghoon.html#truth">#truth</a></li>
                        <li><a href="sunghoon.html#voice">#voice</a></li>
                    </ul>
                </article>
-            </div>
-        </section>
-
-        <section class="site-guide-group" aria-labelledby="sg-minister">
-            <h2 class="section-title" id="sg-minister">推廣部 · 視覺進化論</h2>
-            <div class="site-guide-grid">
                <article class="site-guide-card">
                    <h3><a href="minister.html">minister.html</a></h3>
                    <p class="site-guide-meta">標題列：<cite>水晶男孩推廣部｜視覺進化論</cite></p>
-                    <p class="site-guide-note">頂欄未開放；僅由此全站導覽索引或書籤開啟。圖檔請放 <code>assets/images/minister/</code>（與頁面內檔名一致）。</p>
-                    <h4>區塊錨點</h4>
+                    <p class="site-guide-note">圖檔 <code>assets/images/minister/</code></p>
+                    <h4>錨點</h4>
                    <ul>
-                        <li><a href="minister.html#intro">#intro</a> — 跨越時空的開端</li>
-                        <li><a href="minister.html#slant">#slant</a> — 斜槓精神</li>
-                        <li><a href="minister.html#journey">#journey</a> — 成長時間軸</li>
-                        <li><a href="minister.html#journey-2016">#journey-2016</a> — 2016</li>
-                        <li><a href="minister.html#journey-2017">#journey-2017</a> — 2017</li>
-                        <li><a href="minister.html#journey-now">#journey-now</a> — 2018 至今</li>
+                        <li><a href="minister.html#intro">#intro</a></li>
+                        <li><a href="minister.html#slant">#slant</a></li>
+                        <li><a href="minister.html#journey">#journey</a></li>
+                        <li><a href="minister.html#journey-2016">#journey-2016</a></li>
+                        <li><a href="minister.html#journey-2017">#journey-2017</a></li>
+                        <li><a href="minister.html#journey-now">#journey-now</a></li>
                    </ul>
                </article>
-
                <article class="site-guide-card">
                    <h3><a href="minister_ge.html">minister_ge.html</a></h3>
                    <p class="site-guide-meta">標題列：<cite>水晶男孩推廣部｜視覺進化論：認真魔人的進化之路</cite></p>
-                    <p class="site-guide-note">供 Gemini 等工具改稿用的<span class="mark_b">備份頁</span>；頂欄未開放，請由此索引或書籤開啟。</p>
-                    <h4>區塊錨點</h4>
+                    <p class="site-guide-note">備份／改稿用長版。</p>
+                    <h4>錨點</h4>
                    <ul>
-                        <li><a href="minister_ge.html#intro">#intro</a> — 品牌起源</li>
-                        <li><a href="minister_ge.html#identity">#identity</a> — 斜槓精神</li>
-                        <li><a href="minister_ge.html#evolution">#evolution</a> — 進化里程</li>
-                        <li><a href="minister_ge.html#journey">#journey</a> — 推廣部進化史</li>
-                        <li><a href="minister_ge.html#training">#training</a> — 訓練營</li>
-                        <li><a href="minister_ge.html#tech-stack">#tech-stack</a> — 技術實力</li>
-                    </ul>
-                </article>
-            </div>
-        </section>
-
-        <section class="site-guide-group" aria-labelledby="sg-media">
-            <h2 class="section-title" id="sg-media">現場 · 典藏 · 地圖 · 歌詞</h2>
-            <div class="site-guide-grid">
-                <article class="site-guide-card">
-                    <h3><a href="../concert/concert.html">concert/concert.html</a></h3>
-                    <p class="site-guide-meta">標題列：<cite>SECHSKIES Concert Archive</cite></p>
-                    <h4>區塊錨點</h4>
-                    <ul>
-                        <li><a href="../concert/concert.html#stage-now">#stage-now</a> — 永恆的重逢</li>
-                        <li><a href="../concert/concert.html#stage-past">#stage-past</a> — 燦爛的最初</li>
-                    </ul>
-                </article>
-
-                <article class="site-guide-card">
-                    <h3><a href="../albums/albums.html">albums/albums.html</a></h3>
-                    <p class="site-guide-meta">標題列：<cite>水晶男孩｜黃色留聲機</cite></p>
-                    <h4>區塊錨點</h4>
-                    <ul>
-                        <li><a href="../albums/albums.html#new">#new</a> — 啟動新篇章</li>
-                        <li><a href="../albums/albums.html#classic">#classic</a> — 輝煌全盛期</li>
-                    </ul>
-                </article>
-
-                <article class="site-guide-card">
-                    <h3><a href="../map/map.html">map/map.html</a></h3>
-                    <p class="site-guide-meta">標題列：<cite>SECHSKIES 台灣行程地圖</cite></p>
-                    <h4>區塊錨點</h4>
-                    <ul>
-                        <li><a href="../map/map.html#taipei">#taipei</a> — 台北聖地（主版面）</li>
-                        <li><a href="../map/map.html#global">#global</a> — 海外遠征</li>
-                    </ul>
-                </article>
-
-                <article class="site-guide-card">
-                    <h3><a href="lyrics.html">lyrics.html</a></h3>
-                    <p class="site-guide-meta">標題列：<cite>세 단어 (THREE WORDS) — SECHSKIES</cite></p>
-                    <p class="site-guide-note"><code>&lt;html lang="ko"&gt;</code>；歌詞＋YouTube 嵌入單頁。</p>
-                    <h4>結構</h4>
-                    <ul>
-                        <li><code>.lyrics-layout</code> — 主標＋表格雙欄</li>
+                        <li><a href="minister_ge.html#intro">#intro</a></li>
+                        <li><a href="minister_ge.html#identity">#identity</a></li>
+                        <li><a href="minister_ge.html#evolution">#evolution</a></li>
+                        <li><a href="minister_ge.html#journey">#journey</a></li>
+                        <li><a href="minister_ge.html#training">#training</a></li>
+                        <li><a href="minister_ge.html#tech-stack">#tech-stack</a></li>
                    </ul>
                </article>
            </div>