From b656f5a3627909cd7e93e9704e00466f4cd06b7c Mon Sep 17 00:00:00 2001 From: jekkinoopy Date: Fri, 15 May 2026 16:01:31 +0800 Subject: [PATCH] =?UTF-8?q?feat=20=E9=9B=BB=E5=AD=90=E6=9B=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .cursor/rules/ai-change-boundaries.mdc | 1 + .cursor/rules/site-voice.mdc | 47 +++++++++++++++++++ .cursor/rules/user-scope-and-nav.mdc | 1 + {docs => .cursor}/session-notes-2026-05-13.md | 1 - .cursor/site-voice-notes.md | 37 +++++++++++++++ .cursor/totoga2-video-notes.md | 10 +++- assets/css/style.css | 19 ++++++++ assets/js/portal-nav.js | 22 ++++++--- docs/totoga2-video-notes.md | 9 ---- extra/totoga2 copy.html | 10 ++-- extra/totoga2-copy-ebook.html | 33 ++++++++----- extra/totoga2-copy-timeline.html | 13 +++-- extra/totoga2-split-nav.css | 14 ++++++ extra/totoga2-video.html | 14 +++--- 14 files changed, 183 insertions(+), 48 deletions(-) create mode 100644 .cursor/rules/site-voice.mdc rename {docs => .cursor}/session-notes-2026-05-13.md (94%) create mode 100644 .cursor/site-voice-notes.md delete mode 100644 docs/totoga2-video-notes.md create mode 100644 extra/totoga2-split-nav.css diff --git a/.cursor/rules/ai-change-boundaries.mdc b/.cursor/rules/ai-change-boundaries.mdc index 5a9533f..ce31c04 100644 --- a/.cursor/rules/ai-change-boundaries.mdc +++ b/.cursor/rules/ai-change-boundaries.mdc @@ -35,6 +35,7 @@ alwaysApply: true ## 文件與規則檔 - **不要**主動新增或長篇修改 `README`、`docs/*.md`、規則檔，除非使用者明講要寫入文件或規範。 +- **助手自用筆記**（對話紀要、頁面編輯規格、實作備忘）：只寫在 **`.cursor/`**（例如 `.cursor/*-notes.md`）；**禁止**放在 `docs/`、`README` 或站主日常會開的目錄。回覆裡也不必貼長篇筆記內容。 - **例外**：使用者要求「把約定寫死／規則講清楚／不要再做錯」時，得**精準**更新 `.cursor/rules`（與 `portal-nav.js` 頂部註解對齊），避免重複踩雷；仍避免無關長文。 （與導覽開放、頂欄 vs `site-guide` 相關條文以 **`user-scope-and-nav.mdc`**、**`portal-nav-rules.mdc`** 為準；實作前兩份都讀。） diff --git a/.cursor/rules/site-voice.mdc b/.cursor/rules/site-voice.mdc new file mode 100644 index 0000000..d7c8f89 --- /dev/null +++ b/.cursor/rules/site-voice.mdc @@ -0,0 +1,47 @@ +--- +description: 全站對讀者文案語調（index body 開頭至 timeline data-era=2016.05） +alwaysApply: true +--- + +# 全站文案調性 + +撰寫或改寫**給訪客看的內文**時，語感對齊下列母本（站主指定範圍）： + +## 母本範圍 + +**檔案**：`index.html` +**起點**：`` 從開頭讀起。 +**終點**：`#timeline` 內 `article[data-era="2016.05"]` **全文為止**（含錨點句）。 + +依 **DOM 由上而下** 納入： + +| 區塊 | 說明 | +|------|------| +| `header#origin` | Hero 標語（六顆水晶、傳奇） | +| `nav.portal-nav` | 頂欄導覽（主標／副標，在 body 內依序出現） | +| `#start` | 好奇的開端、2016 四月入坑、黃色奇蹟、路人→坑底 | +| `#mission` | 成立的初衷、LOGO／黃色海洋瞬間、追星與創作 | +| `#timeline` → 至 `2016.05` | `1997` → `2000` → `2016`（合體）→ `2016.05`（夢境進現實＋錨點句） | + +**截止線**（站主指定）：`#timeline` 內 **`data-era="2016.05"` 之後**的節點；該篇之後的 body 內容。 + +## 錨點句（`2016.05` 末段） + +> 原來大家只是換個方式一起變老，這份情誼早已超越了表演。 + +是整條閱讀軸的收束之一；須能承接 **入坑自述 → 初衷 → 1997→2000→2016→2016.05**，勿只複誦此句。 + +## 語感要點 + +- 站主視角：2016 因《無限挑戰》入坑、好奇到淪陷；網站像藝廊、把喜愛化為創作。 +- 時間軸：盛世 → 休止凍結 → 合體 → 現實落地（簽約、四／九月、空位、《超回》）。 +- 溫柔、具體場景、遺憾與釋懷並寫；黃色海洋、十六年、羈絆、奇蹟、完整。 + +## 避免 + +- 只寫 timeline 末段或只抄錨點句。 +- 把 2016.05 之後的 timeline 或 body 後段當母本。 +- 讀者向技術說明（除非站主明講）。 +- **單頁 intro**（如電子書）把首頁時間軸／入坑／錨點句硬拼進一段；該頁應先說明**該頁主題**（如六六歌2 跨頁書），語感對齊母本即可。 + +細項：`.cursor/site-voice-notes.md`。 diff --git a/.cursor/rules/user-scope-and-nav.mdc b/.cursor/rules/user-scope-and-nav.mdc index 15001a3..4087f03 100644 --- a/.cursor/rules/user-scope-and-nav.mdc +++ b/.cursor/rules/user-scope-and-nav.mdc @@ -12,6 +12,7 @@ alwaysApply: true 3. **`totoga2.html`**、**`variety.html`**：站主沒說「對外開放」→ **留在 `COMING_SOON_PAGES`**；不得自以為可以幫忙開放。 4. **沒寫在指令裡的開放／連結／從 Set 移除／刪檔或刪導覽列**：**一律先問**，禁止推論；「刪除」未指明範圍（單檔 vs 頂欄整段 vs 資料夾）＝必須先問。 5. 技術細節與檢查清單：**`portal-nav-rules.mdc`**（與本檔一起讀）。 +6. **頂欄 `portal-nav`（header）**：文案與巢狀結構對齊 `extra/site-guide.html` **主選單樹**（有連結者）；`site-guide-nav-nolink` 與 `COMING_SOON_PAGES` 維持籌備中、**不准擅自開放或改未列開放之頁內容**。勿把此句誤做成 `extra/` 分頁列或全站 `nav` 黑底規則。 --- diff --git a/docs/session-notes-2026-05-13.md b/.cursor/session-notes-2026-05-13.md similarity index 94% rename from docs/session-notes-2026-05-13.md rename to .cursor/session-notes-2026-05-13.md index 90ead96..bf006be 100644 --- a/docs/session-notes-2026-05-13.md +++ b/.cursor/session-notes-2026-05-13.md @@ -38,4 +38,3 @@ ## 4. 本檔說明 - 由 2026-05-13 對話整理；若與後續 commit 不一致，以 git 與規則檔為準。 -- 若要再拆成「只給人讀」與「只給規則」兩層，可之後再調整，目前不重複貼長篇到多份文件。 diff --git a/.cursor/site-voice-notes.md b/.cursor/site-voice-notes.md new file mode 100644 index 0000000..9850901 --- /dev/null +++ b/.cursor/site-voice-notes.md @@ -0,0 +1,37 @@ +# 全站文案調性（助手用） + +## 母本（一句話） + +**`index.html`：從 `` 開頭依 DOM 往下讀，讀到 `#timeline` 的 `data-era="2016.05"` 止（含）。** + +## 納入（由上而下） + +1. **`header#origin`** — Hero +2. **`nav.portal-nav`** — 頂欄導覽（主標／副標） +3. **`#start`** — 好奇的開端 +4. **`#mission`** — 成立的初衷、LOGO／黃色海洋 +5. **`#timeline`** — 至 `1997` → `2000` → `2016` → **`2016.05`**（含錨點句） + +## 截止線（站主指定） + +- `#timeline` 內 **2016.05 之後**（後段 `data-era="2016"`、`2019`、`NOW` 等） +- 該線之後的 body 內容 + +## 錨點句 + +> 原來大家只是換個方式一起變老，這份情誼早已超越了表演。 + +## 檢查 + +- 有沒有接到 **入坑（#start）＋初衷（#mission）＋四節時間軸**？ +- 有沒有誤用截止線之後的段落？ + +## 六六歌2 電子書 intro + +- 站主採用版：第一次感性改寫（「四月那場重逢…」開頭），見 `extra/totoga2-copy-ebook.html`。 +- **勿**再改成 FlipHTML5／PDF 技術說明，也**勿**把 `#start`＋整條 timeline 名詞塞滿一段（東拼西湊版）。 + +## 其他 + +- 六六歌2 分頁（site-guide）：影片 → 電子書 → 時間軸 → 網頁版（TOTOGA2） +- 規則：`.cursor/rules/site-voice.mdc` diff --git a/.cursor/totoga2-video-notes.md b/.cursor/totoga2-video-notes.md index 10c888d..d7ed57f 100644 --- a/.cursor/totoga2-video-notes.md +++ b/.cursor/totoga2-video-notes.md @@ -1,3 +1,9 @@ -# 影片頁筆記（索引） +# 筆記：`extra/totoga2-video.html`（助手用，不對讀者顯示） -編輯規格以 **`docs/totoga2-video-notes.md`** 為準；對應頁面為 `extra/totoga2-video.html`。 +對應檔案：`extra/totoga2-video.html`。 + +- 以下為 Bilibili 嵌入播放器（16：9）。請用上集／中集／下集分頁切換；若無法播放請至站內搜尋同一 BV 號。中集、下集可將 iframe 的 `bvid` 換成分集連結。 +- 中集、下集 iframe 使用 `data-src`，第一次切到該分頁時由頁內 script 寫入 `src`；改連結時請改 `data-src`（或已寫入後的 `src`）。 +- 目前中／下集預設與上集同一 BV，僅作占位；正式替換時改各分頁 iframe 的 `data-src` 即可。 +- 此頁 `body.totoga2-video-copy-page` 會覆寫 `.map-archive-header` 的整屏高度（`100vh`／`100dvh`），避免與導覽、影片疊加後出現整頁直向捲軸；其他全屏 banner 頁不受影響。 +- 資訊架構：頂部黃色列僅 **上集／中集／下集**（`role="tab"`）；**紀實電子書、時間軸＋長文、複本總覽** 為其下文字連結，仍各為獨立 HTML；`totoga2-copy-ebook.html` 等頁仍保留原四鈕列。 diff --git a/assets/css/style.css b/assets/css/style.css index 060bfde..25480c9 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -2101,6 +2101,15 @@ body.ebook-ssg2-page .ebook-intro-lead { line-height: 1.7; } +body.ebook-ssg2-page .ebook-intro-note { + text-align: center; + max-width: 42rem; + margin: -0.75rem auto 1.25rem; + font-size: 0.88rem; + color: #777; + line-height: 1.5; +} + body.ebook-ssg2-page .ebook-main, body.ebook-ssg2-page footer { position: relative; @@ -2182,6 +2191,16 @@ body.ebook-ssg2-page .flip-ebook-aspect--pageflip > #my-flipbook { height: auto; max-width: 100%; overflow: visible; + margin-left: auto; + margin-right: auto; +} + +/* PageFlip 在 landscape 會把書寬當成 2×半頁；host 限寬才能穩定走 portrait 全幅 */ +body.ebook-ssg2-page .flip-ebook-aspect.flip-ebook-aspect--pageflip { + width: fit-content; + max-width: 100%; + margin-left: auto; + margin-right: auto; } body.ebook-ssg2-page #my-flipbook .page { diff --git a/assets/js/portal-nav.js b/assets/js/portal-nav.js index a73a316..cf1d0c5 100644 --- a/assets/js/portal-nav.js +++ b/assets/js/portal-nav.js @@ -3,7 +3,7 @@ * ── 導覽「尚未開放」連結 ───────────────────────────────────────── * 【兩個世界】① 僅 `extra/site-guide.html`：`