fix 調整資料夾結構

2026-05-14 09:01:08 +08:00
parent 9c4cf91a50
commit d1584bb6c0
26 changed files with 671 additions and 586 deletions
@@ -4,17 +4,17 @@
 本文依 **`git diff`** 對照 **`HEAD`** 整理，方便逐項核對；不含未在本 diff 出現之檔案或臆測內容。
-**涉及檔案（5）**：`albums.html`、`index.css`、`index.html`、`portal-nav.js`、`style.css`  
+**涉及檔案（5）**：`albums/albums.html`、`index.css`、`index.html`、`portal-nav.js`、`style.css`  
 **統計**：以 `git diff --stat` 為準（以下內容對應該批變更初版筆記）。
 ---
-## 1. `albums.html`
+## 1. `albums/albums.html`
 ### 目的
 - 年表區塊（「啟動新篇章」「輝煌全盛期」）每一資料列：**點列上非連結區域**時，於新分頁開對應 **Spotify 專輯**。
- 列內既有 `<a>`（本站 `lyrics.html`、`concert.html`、`albums.html#classic`）維持原行為。
+- 列內既有 `<a>`（本站 `extra/lyrics.html`、`concert/concert.html`、`albums/albums.html#classic`）維持原行為。
 ### 標記與無障礙
@@ -68,14 +68,14 @@
 1. `<article class="story-node">` 追加 modifier：`story-node--ebook-ssg2`。
 2. 在該篇 `<p>…</p>` 之後新增：
-   - `<a href="totoga2.html#ebook" class="timeline-ebook-cta">`
+   - `<a href="extra/totoga2.html#ebook" class="timeline-ebook-cta">`
   - Font Awesome：`fa-solid fa-hand-pointer`（`aria-hidden="true"`）
   - 文案：「點這裡翻開《六六歌2》紀實電子書」
 ### 相依性（請檢查）
 - 頁面須已載入 Font Awesome（與現有 `<link>` 一致），否則圖示不顯示。
- `totoga2.html` 須存在；`totoga2.js` 會辨識網址列 `#ebook` 並切換至電子書模式。
+- `extra/totoga2.html` 須存在；`extra/totoga2.js` 會辨識網址列 `#ebook` 並切換至電子書模式。
 ---
@@ -122,8 +122,8 @@
 ## 建議檢查步驟（逐項勾選）
-1. **`albums.html`**：每列空白處／封面／年份點擊 → 新分頁 Spotify 正確專輯；點列內本站連結 → 仍進本站、不開 Spotify。
+1. **`albums/albums.html`**：每列空白處／封面／年份點擊 → 新分頁 Spotify 正確專輯；點列內本站連結 → 仍進本站、不開 Spotify。
-2. **`albums.html`**：鍵盤 Tab 聚焦列後 Enter／空白 → 開 Spotify；聚焦在 `<a>` 上時 Enter → 遵循連結。
+2. **`albums/albums.html`**：鍵盤 Tab 聚焦列後 Enter／空白 → 開 Spotify；聚焦在 `<a>` 上時 Enter → 遵循連結。
 3. **`index.html` + `style.css`**：2016 卡片外觀與 CTA 按鈕、`hover`、`focus-visible`、縮減動態偏好設定下手勢動畫關閉。
 4. **`portal-nav.js`**：全站注入後選單無「消失的真相」；改 `true` 後該項回來。
 5. **跨頁**：任意頁載入 `portal-nav.js` 後行為一致。
@@ -5,10 +5,10 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水晶男孩｜黃色留聲機</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="../style.css">
-    <link rel="stylesheet" href="index.css">
+    <link rel="stylesheet" href="../index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link rel="stylesheet" href="tablet.css">
+    <link rel="stylesheet" href="../tablet.css">
 </head>
 <body>
@@ -35,7 +35,7 @@
        <section id="new" class="archive-block">
            <h2 class="section-title">啟動新篇章</h2>
            <p>回歸後的數位單曲與專輯，是現在進行式的聲紋紀錄；耳機調大聲一格，就能把「新篇章」接住。</p>
-            <p><a href="lyrics.html">聽見歌詞細節（2016 代表曲目）</a></p>
+            <p><a href="../extra/lyrics.html">聽見歌詞細節（2016 代表曲目）</a></p>
            <table class="archive-discography">
                <thead>
                    <tr>
@@ -50,31 +50,31 @@
                        data-spotify-url="https://open.spotify.com/album/1Dijv8G0wnCN8PzFZoC8bN"
                        aria-label="在 Spotify 開啟：THREE WORDS（2016 數位單曲）">
                        <td class="album-cover-cell">
-                            <img src="./img/albums/2016.jpg" width="76" height="76" alt="2016 數位單曲 封面">
+                            <img src="../img/albums/2016.jpg" width="76" height="76" alt="2016 數位單曲 封面">
                        </td>
                        <td>2016</td>
-                        <td><a href="lyrics.html">數位單曲</a></td>
+                        <td><a href="../extra/lyrics.html">數位單曲</a></td>
-                        <td><a href="lyrics.html">Three Words (三個詞)</a></td>
+                        <td><a href="../extra/lyrics.html">Three Words (三個詞)</a></td>
                    </tr>
                    <tr class="archive-row-spotify" tabindex="0"
                        data-spotify-url="https://open.spotify.com/album/5f2LzIFxljQF4FH7w3rXcQ"
                        aria-label="在 Spotify 開啟：ANOTHER LIGHT">
                        <td class="album-cover-cell">
-                            <img src="./img/albums/2017.jpg" width="76" height="76" alt="2017 ANOTHER LIGHT 封面">
+                            <img src="../img/albums/2017.jpg" width="76" height="76" alt="2017 ANOTHER LIGHT 封面">
                        </td>
                        <td>2017</td>
-                        <td><a href="concert.html#stage-now">ANOTHER LIGHT</a></td>
+                        <td><a href="../concert/concert.html#stage-now">ANOTHER LIGHT</a></td>
-                        <td><a href="concert.html#stage-now">Something Special / Smile</a></td>
+                        <td><a href="../concert/concert.html#stage-now">Something Special / Smile</a></td>
                    </tr>
                    <tr class="archive-row-spotify" tabindex="0"
                        data-spotify-url="https://open.spotify.com/album/7vqIRL00YfTtuO0sSAK3Uv"
                        aria-label="在 Spotify 開啟：ALL FOR YOU">
                        <td class="album-cover-cell">
-                            <img src="./img/albums/2020.jpg" width="76" height="76" alt="2020 ALL FOR YOU 封面">
+                            <img src="../img/albums/2020.jpg" width="76" height="76" alt="2020 ALL FOR YOU 封面">
                        </td>
                        <td>2020</td>
-                        <td><a href="concert.html#stage-now">ALL FOR YOU</a></td>
+                        <td><a href="../concert/concert.html#stage-now">ALL FOR YOU</a></td>
-                        <td><a href="concert.html#stage-now">ALL FOR YOU</a></td>
+                        <td><a href="../concert/concert.html#stage-now">ALL FOR YOU</a></td>
                    </tr>
                </tbody>
            </table>
@@ -126,8 +126,8 @@
        </a>
    </footer>
-    <script src="particles.js"></script>
+    <script src="../particles.js"></script>
-    <script src="portal-nav.js"></script>
+    <script src="../portal-nav.js"></script>
    <script>
        (function () {
            document.querySelectorAll('tr.archive-row-spotify[data-spotify-url]').forEach(function (row) {
@@ -12,7 +12,7 @@ body {
    width: 100%;
    height: 100vh;
    min-height: 100dvh;
-    background-image: url('img/header.jpg');
+    background-image: url('../img/header.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 108%;
@@ -6,9 +6,9 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SECHSKIES Concert Archive</title>
    <link rel="stylesheet" href="concert.css">
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="../style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link rel="stylesheet" href="tablet.css">
+    <link rel="stylesheet" href="../tablet.css">
 </head>
 <body class="concert-page">
@@ -33,7 +33,7 @@
            <div class="con-1" data-tour=" YELLOW NOTE">
                <span class="title">2016&nbsp;&nbsp;|&nbsp;&nbsp;YELLOW NOTE&nbsp;&nbsp;首場回歸演唱會</span>
-                <img src="img/concert/2016.jpg" alt="">
+                <img src="../img/concert/2016.jpg" alt="">
                <div class="con-yk-1 attended" data-date1="09.10">
                    <span class="location">首爾 | 首爾奧林匹克體操競技場</span>
                    <input type="checkbox" id="expand-yk-1" class="expand-trigger">
@@ -160,7 +160,7 @@
            <div class="con-2" data-tour="20TH ANNIV.">
                <span class="title">2017-2018&nbsp;&nbsp;|&nbsp;&nbsp;20TH ANNIVERSARY</span>
-                <img src="img/concert/2017.jpg" alt="">
+                <img src="../img/concert/2017.jpg" alt="">
                <div class="con-2-1">
                    <span class="location">首爾：高尺天空巨蛋</span>
@@ -352,7 +352,7 @@
        <!-- 演唱會 03 -->
        <div class="con-3" data-tour="NOW・HERE・AGAIN.">
            <span class="title">2018&nbsp;&nbsp;|&nbsp;&nbsp;NOW・HERE・AGAIN</span>
-            <img src="img/concert/2018.jpg" alt="">
+            <img src="../img/concert/2018.jpg" alt="">
            <div class="con-3-1 attended" data-date1="10.13" data-date2="10.14">
                <span class="location">首爾：首爾奧林匹克體操競技場</span>
                <input type="checkbox" id="expand-con-3-1" class="expand-trigger">
@@ -389,7 +389,7 @@
        <!-- 演唱會 04：與 con-2／con-3 同結構 — title → img → con-4-1；ACCESS 樣式用 con-access-denied；CANCELED 水印為 ::before（::after 保留給 data-tour 緞帶） -->
        <div class="con-4 con-access-denied" data-tour="ACCESS">
            <span class="title">2020&nbsp;&nbsp;|&nbsp;&nbsp;CONCERT [ACCESS]</span>
-            <img src="img/concert/2020.jpg" alt="">
+            <img src="../img/concert/2020.jpg" alt="">
            <div class="con-4-1 canceled" data-date1="03.06" data-date2="03.08">
                <span class="location">首爾：慶熙大學 平和殿堂</span>
@@ -631,7 +631,7 @@
        init();
        animate();
    </script>
-    <script src="portal-nav.js"></script>
+    <script src="../portal-nav.js"></script>
 </body>
 </html>
@@ -6,11 +6,11 @@
 ## 1. 必做：把頁面掛進導覽 HTML
-在 **`PORTAL_NAV_INNER_HTML`**（約第 123 行起）裡加入連結：
+在 **`buildPortalNavInnerHTML`**（`portal-nav.js`）裡維護連結：
 - 依資訊架構放在對應的 **`<li>`** 底下；需要子選單時用 **`portal-submenu`**。
- `href` 使用與其他頁一致的**相對路徑**（例如 `newpage.html`、`index.html#section`）。
+- `href` 使用**站根相對路徑**（腳本會依當前頁深度加上前綴 `rp`）：例如 `` `${rp}jiwon/jiwon.html` ``、`` `${rp}index.html#section` ``。
- Logo 列不要動：`<a class="logo" href="index.html">…</a>`。
+- Logo 列：`` `${rp}index.html` `` 與 `` `${rp}img/logov.svg` ``。
 新增或調整完後，所有帶 **`data-portal-nav`** 的 `<nav class="portal-nav">` 都會在載入腳本時被注入同一份 HTML。
@@ -5,9 +5,9 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水晶男孩 SECHSKIES | 永恆的六顆水晶</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="../style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link rel="stylesheet" href="tablet.css">
+    <link rel="stylesheet" href="../tablet.css">
 </head>
 <body>
@@ -9,9 +9,9 @@
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="../style.css">
    <link rel="stylesheet" href="lyrics.css">
-    <link rel="stylesheet" href="tablet.css">
+    <link rel="stylesheet" href="../tablet.css">
 </head>
 <body class="lyrics-page">
@@ -5,9 +5,9 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水晶男孩推廣部｜視覺進化論</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="../style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link rel="stylesheet" href="tablet.css">
+    <link rel="stylesheet" href="../tablet.css">
 </head>
 <body class="chronicle-page minister-page">
@@ -60,25 +60,25 @@
                <p class="minister-month">07 月｜手作初試</p>
                <p>開始學習勾針，為金在德製作第一個鴨鴨置物籃，這是從旁觀者轉為實踐者的第一步。</p>
                <figure class="minister-photo">
-                    <img src="img/minister/image_3c1739.jpg" alt="手作鴨鴨置物籃" width="1040" height="780" loading="lazy">
+                    <img src="../img/minister/image_3c1739.jpg" alt="手作鴨鴨置物籃" width="1040" height="780" loading="lazy">
                </figure>
                <p class="minister-month">08 月｜螢幕後的參與</p>
                <p>以「水晶廢人字幕組」粉絲身分，用手繪應援板與勾針作品參與應援影片籌備。</p>
                <figure class="minister-photo">
-                    <img src="img/minister/image_3c13d7.jpg" alt="手繪應援板與勾針作品" width="1040" height="780" loading="lazy">
+                    <img src="../img/minister/image_3c13d7.jpg" alt="手繪應援板與勾針作品" width="1040" height="780" loading="lazy">
                </figure>
                <p class="minister-month">09 月｜孤注一擲的現場</p>
                <p>在經濟窘迫、甚至需要借錢籌措旅費的情況下，飛往首爾參加首場演唱會。在那裡，我握著導師設計的台灣小黃手幅，第一次感受到設計與才華帶來的震撼。</p>
                <figure class="minister-photo">
-                    <img src="img/minister/image_3bb254.jpg" alt="台灣小黃手幅" width="1040" height="780" loading="lazy">
+                    <img src="../img/minister/image_3bb254.jpg" alt="台灣小黃手幅" width="1040" height="780" loading="lazy">
                </figure>
                <p class="minister-month">12 月｜溫暖的饋贈</p>
                <p>在「#水晶文具社」聚會中，收到了同好精緻的手繪聖誕卡片。看著別人的創作，我更加確信自己也想成為能用作品傳遞能量的人。</p>
                <figure class="minister-photo">
-                    <img src="img/minister/image_3bab17.jpg" alt="手繪聖誕卡片" width="1040" height="780" loading="lazy">
+                    <img src="../img/minister/image_3bab17.jpg" alt="手繪聖誕卡片" width="1040" height="780" loading="lazy">
                </figure>
            </article>
@@ -87,7 +87,7 @@
                <p class="minister-month">01 月｜職人精神的啟發</p>
                <p>參與資管組 D 大的新年紅包活動。其書法與刻印結合的質感，深深影響了我對美感的標準。</p>
                <figure class="minister-photo">
-                    <img src="img/minister/image_3ba74f.jpg" alt="新年紅包活動" width="1040" height="780" loading="lazy">
+                    <img src="../img/minister/image_3ba74f.jpg" alt="新年紅包活動" width="1040" height="780" loading="lazy">
                </figure>
                <p class="minister-month">02 月｜身體記憶的熱血</p>
@@ -96,8 +96,8 @@
                <p class="minister-month">04 月｜筆尖的沈澱</p>
                <p>跟著文具社走遍全台咖啡廳，在鋼筆墨水與玻璃杯的陪伴下，用手寫記錄初心。</p>
                <figure class="minister-photo minister-photo--dual">
-                    <img src="img/minister/image_3baed1.jpg" alt="鋼筆墨水與玻璃杯" width="1040" height="780" loading="lazy">
+                    <img src="../img/minister/image_3baed1.jpg" alt="鋼筆墨水與玻璃杯" width="1040" height="780" loading="lazy">
-                    <img src="img/minister/image_3c2299.jpg" alt="手寫記錄初心" width="1040" height="780" loading="lazy">
+                    <img src="../img/minister/image_3c2299.jpg" alt="手寫記錄初心" width="1040" height="780" loading="lazy">
                </figure>
            </article>
@@ -113,7 +113,7 @@
        </section>
        <p class="minister-back">
-            <a href="index.html#mission" class="btn">回到首頁 · 成立的初衷</a>
+            <a href="../index.html#mission" class="btn">回到首頁 · 成立的初衷</a>
        </p>
    </main>
@@ -124,8 +124,8 @@
        </a>
    </footer>
-    <script src="particles.js"></script>
+    <script src="../particles.js"></script>
-    <script src="portal-nav.js"></script>
+    <script src="../portal-nav.js"></script>
 </body>
 </html>
@@ -5,10 +5,10 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水晶男孩推廣部｜視覺進化論：認真魔人的進化之路</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="../style.css">
-    <link rel="stylesheet" href="index.css">
+    <link rel="stylesheet" href="../index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link rel="stylesheet" href="tablet.css">
+    <link rel="stylesheet" href="../tablet.css">
 </head>
 <body class="home-page minister-page">
@@ -225,7 +225,7 @@
        </section>
        <div class="landing-actions">
-            <a href="index.html#mission" class="btn">回到首頁 · 成立的初衷</a>
+            <a href="../index.html#mission" class="btn">回到首頁 · 成立的初衷</a>
        </div>
    </div>
@@ -236,8 +236,8 @@
        </a>
    </footer>
-    <script src="particles.js"></script>
+    <script src="../particles.js"></script>
-    <script src="portal-nav.js"></script>
+    <script src="../portal-nav.js"></script>
 </body>
 </html>
@@ -5,9 +5,9 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水晶男孩｜全站導覽</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="../style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link rel="stylesheet" href="tablet.css">
+    <link rel="stylesheet" href="../tablet.css">
 </head>
 <body class="site-guide-page">
@@ -26,24 +26,26 @@
    <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>，方便你開發或簡報時一鍵跳轉。
+            以下為本專案目前所有 HTML 頁面：每張卡片含<span class="mark_b">連結</span>、瀏覽器分頁上的<span
-            <span class="mark_b">此頁未放入全站導覽列</span>，僅供你自行書籤或輸入網址（例如 <code>site-guide.html</code>）開啟。
+                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>）開啟。
        </p>
        <section class="site-guide-group" aria-labelledby="sg-home">
            <h2 class="section-title" id="sg-home">首頁與入口</h2>
            <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></h3>
                    <p class="site-guide-meta">標題列：<cite>SECHSKIES - 水晶男孩傳奇介紹</cite></p>
                    <p class="site-guide-note">主視覺與導覽列；內文以區塊錨點分段。</p>
                    <h4>區塊錨點</h4>
                    <ul>
-                        <li><a href="index.html#origin">#origin</a> — 淪陷瞬間（Hero，與導覽一致）</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#start">#start</a> — 好奇的開端</li>
-                        <li><a href="index.html#mission">#mission</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#timeline">#timeline</a> — 跨時空軌跡</li>
-                        <li><a href="index.html#story">#story</a> — 傳奇的轉折</li>
+                        <li><a href="../index.html#story">#story</a> — 傳奇的轉折</li>
                    </ul>
                </article>
@@ -93,7 +95,8 @@
                        </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> 已併入 <a
                            href="totoga2.html">totoga2 整合頁</a>。</p>
                </article>
            </div>
        </section>
@@ -102,12 +105,12 @@
            <h2 class="section-title" id="sg-members">成員與紀實</h2>
            <div class="site-guide-grid">
                <article class="site-guide-card">
-                    <h3><a href="jiwon.html">jiwon.html</a></h3>
+                    <h3><a href="../jiwon/jiwon.html">jiwon/jiwon.html</a></h3>
                    <p class="site-guide-meta">標題列：<cite>水晶男孩｜瘋子與天才</cite></p>
                    <h4>區塊錨點</h4>
                    <ul>
-                        <li><a href="jiwon.html#variety">#variety</a> — 瘋狂出演中</li>
+                        <li><a href="../jiwon/jiwon.html#variety">#variety</a> — 瘋狂出演中</li>
-                        <li><a href="jiwon.html#stage">#stage</a> — 隊長的氣場</li>
+                        <li><a href="../jiwon/jiwon.html#stage">#stage</a> — 隊長的氣場</li>
                    </ul>
                </article>
@@ -162,32 +165,32 @@
            <h2 class="section-title" id="sg-media">現場 · 典藏 · 地圖 · 歌詞</h2>
            <div class="site-guide-grid">
                <article class="site-guide-card">
-                    <h3><a href="concert.html">concert.html</a></h3>
+                    <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.html#stage-now">#stage-now</a> — 永恆的重逢</li>
+                        <li><a href="../concert/concert.html#stage-now">#stage-now</a> — 永恆的重逢</li>
-                        <li><a href="concert.html#stage-past">#stage-past</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.html">albums.html</a></h3>
+                    <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.html#new">#new</a> — 啟動新篇章</li>
+                        <li><a href="../albums/albums.html#new">#new</a> — 啟動新篇章</li>
-                        <li><a href="albums.html#classic">#classic</a> — 輝煌全盛期</li>
+                        <li><a href="../albums/albums.html#classic">#classic</a> — 輝煌全盛期</li>
                    </ul>
                </article>
                <article class="site-guide-card">
-                    <h3><a href="map.html">map.html</a></h3>
+                    <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.html#taipei">#taipei</a> — 台北聖地（主版面）</li>
+                        <li><a href="../map/map.html#taipei">#taipei</a> — 台北聖地（主版面）</li>
-                        <li><a href="map.html#global">#global</a> — 海外遠征</li>
+                        <li><a href="../map/map.html#global">#global</a> — 海外遠征</li>
                    </ul>
                </article>
@@ -211,8 +214,8 @@
        </a>
    </footer>
-    <script src="particles.js"></script>
+    <script src="../particles.js"></script>
-    <script src="portal-nav.js"></script>
+    <script src="../portal-nav.js"></script>
 </body>
 </html>
@@ -5,9 +5,9 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水晶男孩｜消失的真相</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="../style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link rel="stylesheet" href="tablet.css">
+    <link rel="stylesheet" href="../tablet.css">
 </head>
 <body class="chronicle-page">
@@ -44,8 +44,8 @@
        </a>
    </footer>
-    <script src="portal-nav.js"></script>
+    <script src="../portal-nav.js"></script>
-    <script src="particles.js"></script>
+    <script src="../particles.js"></script>
 </body>
 </html>
@@ -5,9 +5,9 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水晶男孩｜無限挑戰六六歌2 — 紀實電子書</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="../style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link rel="stylesheet" href="tablet.css">
+    <link rel="stylesheet" href="../tablet.css">
 </head>
 <body class="ebook-ssg2-page totoga2-page">
@@ -179,7 +179,7 @@
    </div>
    <p class="ebook-back-link content-container">
-        <a href="index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
+        <a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
        <a href="#ebook" class="btn">同頁 · 電子書全螢幕</a>
    </p>
@@ -190,8 +190,8 @@
        </a>
    </footer>
-    <script src="particles.js"></script>
+    <script src="../particles.js"></script>
-    <script src="portal-nav.js"></script>
+    <script src="../portal-nav.js"></script>
    <script src="totoga2.js"></script>
 </body>
@@ -0,0 +1,51 @@
 <!DOCTYPE html>
 <html lang="zh-TW">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水晶男孩｜瘋子與天才</title>
    <link rel="stylesheet" href="../style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="../tablet.css">
 </head>
 <body class="chronicle-page">
    <header class="map-archive-header">
        <div class="header-inner">
            <h1 class="main-title">瘋子與天才</h1>
            <div class="subtitle-wrap">
                <span class="sub-title">EUN JI-WON × VARIETY GRAVITY</span>
            </div>
        </div>
    </header>
    <nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
    <canvas id="particles"></canvas>
    <main class="content-container variety-page-main chronicle-reader">
        <section id="variety" class="variety-block">
            <h2 class="section-title">瘋狂出演中</h2>
            <p class="intro-text">鏡頭一開就跑偏、台詞唸不完，卻總能把段子的節奏剪成「非他不可」——這是最容易被路人一眼看見的瘋勁，也是綜藝剪輯願意一路卡特寫給他的理由。</p>
            <p class="intro-text">卸妝後的聊天、運動場上的暴走、對成員毫不修飾的吐槽；那些看起來像日常，其實比劇本更誇張。此區之後會補上節目清單、名場面與入坑路線，先把舞台留好。</p>
        </section>
        <section id="stage" class="variety-block">
            <h2 class="section-title">隊長的氣場</h2>
            <p class="intro-text">同樣一句話，由他說出口就變成節奏點；同樣混亂的場面，他一站出來觀眾會先笑、再安靜聽。那不是威嚴口號，而是多年在台上台下磨出來的「控場直覺」。</p>
            <p class="intro-text">此區預留給談話、音樂、與團體互動裡的隊長切片——讓新粉先用氣場認人，再慢慢讀懂他背後的堅持。</p>
        </section>
    </main>
    <footer>
        <p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
        <a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
            Design by <span class="mark_b">Jekkinoopy Studio</span>
        </a>
    </footer>
    <script src="../portal-nav.js"></script>
    <script src="../particles.js"></script>
 </body>
 </html>
@@ -90,7 +90,7 @@
    padding-bottom: 0;
 }
-/* albums.html：.archive-block 已改為 <section>，沿用 style.css 的 section 卡片版型 */
+/* albums/albums.html：.archive-block 已改為 <section>，沿用 style.css 的 section 卡片版型 */
 section.archive-block p {
    color: #4a4a4a;
    line-height: 1.7;
@@ -101,7 +101,7 @@ section.archive-block p:last-child {
    margin-bottom: 0;
 }
-/* albums.html：精選作品表（含封面欄） */
+/* albums/albums.html：精選作品表（含封面欄） */
 .archive-discography {
    width: 100%;
    margin-top: 1.25rem;
@@ -123,7 +123,7 @@
                <article class="story-node story-node--ebook-ssg2" data-era="2016">
                    <h3>傳奇回歸：重逢的感動合體</h3>
                    <p>透過《無限挑戰》「六六歌2」跨越16年再次重聚，引起全韓黃色氣球海再現。</p>
-                    <a href="totoga2.html#ebook" class="timeline-ebook-cta">
+                    <a href="extra/totoga2.html#ebook" class="timeline-ebook-cta">
                        <i class="fa-solid fa-hand-pointer" aria-hidden="true"></i>
                        <span>點這裡翻開《六六歌2》紀實電子書</span>
                    </a>
@@ -148,33 +148,33 @@
            </div>
            <p class="intro-text">
                像劇情的反轉一樣過癮：這幾個節點，剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節，請開
-                <a href="totoga2.html">六六歌2 整合專區</a>（影片／電子書／紀實長文八章，同一頁切換模式即可）。
+                <a href="extra/totoga2.html">六六歌2 整合專區</a>（影片／電子書／紀實長文八章，同一頁切換模式即可）。
            </p>
            <div class="story-ebook-cta">
-                <a href="totoga2.html#ebook" class="btn story-ebook-btn">開啟六六歌2 紀實電子書</a>
+                <a href="extra/totoga2.html#ebook" class="btn story-ebook-btn">開啟六六歌2 紀實電子書</a>
-                <a href="totoga2.html" class="btn story-ebook-btn">六六歌2 整合專區</a>
+                <a href="extra/totoga2.html" class="btn story-ebook-btn">六六歌2 整合專區</a>
            </div>
            <div class="merged-storyline">
                <article id="special" class="story-node" data-era="六六歌">
                    <h3>六六歌實錄</h3>
                    <p>把懸念、試探與哭點縫在同一條時間軸上；很多人第一次真正把「水晶男孩」打進搜尋框，就是從這種瘋狂的剪輯節奏開始。</p>
-                    <p><a href="totoga2.html#ssg2">對照這一段幕後敘事</a></p>
+                    <p><a href="extra/totoga2.html#ssg2">對照這一段幕後敘事</a></p>
                </article>
                <article id="negotiate" class="story-node" data-era="交涉">
                    <h3>命運的交涉</h3>
                    <p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面，而是還願不願意再一次肩並肩。</p>
-                    <p><a href="totoga2.html#negotiate">讀交涉與對話肌理</a></p>
+                    <p><a href="extra/totoga2.html#negotiate">讀交涉與對話肌理</a></p>
                </article>
                <article id="complete" class="story-node" data-era="歸位">
                    <h3>拼圖的歸位</h3>
                    <p>變數一個個被排除之後，驚喜接上登場段落；缺一角舞台的視覺，終於對齊觀眾席上堅守的那片黃。</p>
-                    <p><a href="totoga2.html#gather">從「召集」段開始補這條線</a></p>
+                    <p><a href="extra/totoga2.html#gather">從「召集」段開始補這條線</a></p>
                </article>
                <article id="past" class="story-node" data-era="最初">
                    <h3>巔峰與雨天</h3>
                    <p>急凍、告別、各自的跑道——並不是要你沉浸遺憾，而是讓你懂：後來每一次亮燈，為什麼會更值得尖叫。</p>
-                    <p><a href="totoga2.html#sechskies-profile">讀這條脈絡的起點</a></p>
+                    <p><a href="extra/totoga2.html#sechskies-profile">讀這條脈絡的起點</a></p>
                </article>
            </div>
        </section>
@@ -5,9 +5,9 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水晶男孩｜瘋子與天才</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="../style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link rel="stylesheet" href="tablet.css">
+    <link rel="stylesheet" href="../tablet.css">
 </head>
 <body class="chronicle-page">
@@ -44,8 +44,8 @@
        </a>
    </footer>
-    <script src="portal-nav.js"></script>
+    <script src="../portal-nav.js"></script>
-    <script src="particles.js"></script>
+    <script src="../particles.js"></script>
 </body>
 </html>
@@ -5,9 +5,9 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SECHSKIES 台灣行程地圖</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="../style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link rel="stylesheet" href="tablet.css">
+    <link rel="stylesheet" href="../tablet.css">
 </head>
 <body class="map-page">
@@ -508,7 +508,7 @@
 </footer>
 <script src="map.js"></script>
-<script src="portal-nav.js"></script>
+<script src="../portal-nav.js"></script>
 </body>
@@ -119,47 +119,78 @@
        });
    }
-    /** 全站導覽 HTML — 僅修改此字串即可同步所有頁面 */
+    /**
-    const PORTAL_NAV_INNER_HTML = `
+     * 站根與 `portal-nav.js` 同層；依腳本路徑與當前頁路徑計算回到站根的相對前綴（如 `../`）。
-<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
+     * 子資料夾內頁面之導覽連結必須帶此前綴，否則 `./img`、`index.html` 會錯層。
     */
    function portalNavRootPrefix() {
        const el =
            document.currentScript ||
            Array.from(document.querySelectorAll("script[src*='portal-nav.js']")).find((s) => s.src);
        if (!el?.src) return "./";
        try {
            const scriptPathname = new URL(el.src, window.location.href).pathname;
            const scriptDirSegs = scriptPathname.split("/").filter(Boolean);
            scriptDirSegs.pop();
            const pageDirSegs = window.location.pathname.split("/").filter(Boolean);
            pageDirSegs.pop();
            let i = 0;
            const a = scriptDirSegs;
            const b = pageDirSegs;
            while (i < a.length && i < b.length && a[i] === b[i]) {
                i += 1;
            }
            const ups = b.length - i;
            return ups > 0 ? "../".repeat(ups) : "./";
        } catch {
            return "./";
        }
    }
    /** 全站導覽 HTML — `rp` 為站根相對前綴；僅修改此模板即可同步所有頁面 */
    function buildPortalNavInnerHTML(rp) {
        return `
 <a class="logo" href="${rp}index.html"><img src="${rp}img/logov.svg" alt="SECHSKIES Logo"></a>
 <ul>
-    <li><a href="index.html#origin">淪陷瞬間</a>
+    <li><a href="${rp}index.html#origin">淪陷瞬間</a>
        <ul class="portal-submenu">
-            <li><a href="index.html#start">好奇的開端</a></li>
+            <li><a href="${rp}index.html#start">好奇的開端</a></li>
-            <li><a href="index.html#mission">成立的初衷</a></li>
+            <li><a href="${rp}index.html#mission">成立的初衷</a></li>
-            <li><a href="index.html#timeline">跨時空軌跡</a></li>
+            <li><a href="${rp}index.html#timeline">跨時空軌跡</a></li>
-            <li><a href="index.html#story">傳奇的轉折</a></li>
+            <li><a href="${rp}index.html#story">傳奇的轉折</a></li>
        </ul>
    </li>
-    <li><a href="jiwon.html">瘋子與天才</a>
+    <li><a href="${rp}jiwon/jiwon.html">瘋子與天才</a>
        <ul class="portal-submenu">
-            <li><a href="jiwon.html#variety">瘋狂出演中</a></li>
+            <li><a href="${rp}jiwon/jiwon.html#variety">瘋狂出演中</a></li>
-            <li><a href="jiwon.html#stage">隊長的氣場</a></li>
+            <li><a href="${rp}jiwon/jiwon.html#stage">隊長的氣場</a></li>
        </ul>
    </li>
-    <li><a href="concert.html">現場的震撼</a>
+    <li><a href="${rp}concert/concert.html">現場的震撼</a>
        <ul class="portal-submenu">
-            <li><a href="concert.html#stage-now">永恆的重逢</a></li>
+            <li><a href="${rp}concert/concert.html#stage-now">永恆的重逢</a></li>
-            <li><a href="concert.html#stage-past">燦爛的最初</a></li>
+            <li><a href="${rp}concert/concert.html#stage-past">燦爛的最初</a></li>
        </ul>
    </li>
-    <li><a href="albums.html">黃色留聲機</a>
+    <li><a href="${rp}albums/albums.html">黃色留聲機</a>
        <ul class="portal-submenu">
-            <li><a href="albums.html#new">啟動新篇章</a></li>
+            <li><a href="${rp}albums/albums.html#new">啟動新篇章</a></li>
-            <li><a href="albums.html#classic">輝煌全盛期</a></li>
+            <li><a href="${rp}albums/albums.html#classic">輝煌全盛期</a></li>
        </ul>
    </li>
-    <li><a href="map.html">聖地巡禮</a>
+    <li><a href="${rp}map/map.html">聖地巡禮</a>
        <ul class="portal-submenu">
-            <li><a href="map.html#taipei">台北聖地</a></li>
+            <li><a href="${rp}map/map.html#taipei">台北聖地</a></li>
-            <li><a href="map.html#global">海外遠征</a></li>
+            <li><a href="${rp}map/map.html#global">海外遠征</a></li>
        </ul>
    </li>
 </ul>
 `.trim();
    }
    const rootPrefix = portalNavRootPrefix();
    document.querySelectorAll("nav.portal-nav[data-portal-nav]").forEach((nav) => {
-        nav.innerHTML = PORTAL_NAV_INNER_HTML;
+        nav.innerHTML = buildPortalNavInnerHTML(rootPrefix);
        applyComingSoonToNav(nav);
    });