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

feat 電子書

Browse Source
This commit is contained in:
jekkinoopy
2026-05-15 16:01:31 +08:00
parent 904f3ebffd
commit b656f5a362
14 changed files with 183 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.cursor/rules/ai-change-boundaries.mdc
+1
View File
@@ -35,6 +35,7 @@ alwaysApply: true
## 文件與規則檔 ## 文件與規則檔
- **不要**主動新增或長篇修改 `README`、`docs/*.md`、規則檔，除非使用者明講要寫入文件或規範。 - **不要**主動新增或長篇修改 `README`、`docs/*.md`、規則檔，除非使用者明講要寫入文件或規範。
- **助手自用筆記**（對話紀要、頁面編輯規格、實作備忘）：只寫在 **`.cursor/`**（例如 `.cursor/*-notes.md`）；**禁止**放在 `docs/`、`README` 或站主日常會開的目錄。回覆裡也不必貼長篇筆記內容。
- **例外**：使用者要求「把約定寫死／規則講清楚／不要再做錯」時，得**精準**更新 `.cursor/rules`（與 `portal-nav.js` 頂部註解對齊），避免重複踩雷；仍避免無關長文。 - **例外**：使用者要求「把約定寫死／規則講清楚／不要再做錯」時，得**精準**更新 `.cursor/rules`（與 `portal-nav.js` 頂部註解對齊），避免重複踩雷；仍避免無關長文。
（與導覽開放、頂欄 vs `site-guide` 相關條文以 **`user-scope-and-nav.mdc`**、**`portal-nav-rules.mdc`** 為準；實作前兩份都讀。） （與導覽開放、頂欄 vs `site-guide` 相關條文以 **`user-scope-and-nav.mdc`**、**`portal-nav-rules.mdc`** 為準；實作前兩份都讀。）
.cursor/rules/site-voice.mdc
+47
View File
@@ -0,0 +1,47 @@
---
description: 全站對讀者文案語調（index body 開頭至 timeline data-era=2016.05）
alwaysApply: true
---
# 全站文案調性
撰寫或改寫**給訪客看的內文**時，語感對齊下列母本（站主指定範圍）：
## 母本範圍
**檔案**：`index.html`
**起點**：`<body>` 從開頭讀起。
**終點**：`#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`。
.cursor/rules/user-scope-and-nav.mdc
+1
View File
@@ -12,6 +12,7 @@ alwaysApply: true
3. **`totoga2.html`**、**`variety.html`**：站主沒說「對外開放」→ **留在 `COMING_SOON_PAGES`**；不得自以為可以幫忙開放。 3. **`totoga2.html`**、**`variety.html`**：站主沒說「對外開放」→ **留在 `COMING_SOON_PAGES`**；不得自以為可以幫忙開放。
4. **沒寫在指令裡的開放／連結／從 Set 移除／刪檔或刪導覽列**：**一律先問**，禁止推論；「刪除」未指明範圍（單檔 vs 頂欄整段 vs 資料夾）＝必須先問。 4. **沒寫在指令裡的開放／連結／從 Set 移除／刪檔或刪導覽列**：**一律先問**，禁止推論；「刪除」未指明範圍（單檔 vs 頂欄整段 vs 資料夾）＝必須先問。
5. 技術細節與檢查清單：**`portal-nav-rules.mdc`**（與本檔一起讀）。 5. 技術細節與檢查清單：**`portal-nav-rules.mdc`**（與本檔一起讀）。
6. **頂欄 `portal-nav`（header）**：文案與巢狀結構對齊 `extra/site-guide.html` **主選單樹**（有連結者）；`site-guide-nav-nolink` 與 `COMING_SOON_PAGES` 維持籌備中、**不准擅自開放或改未列開放之頁內容**。勿把此句誤做成 `extra/` 分頁列或全站 `nav` 黑底規則。
--- ---
docs/session-notes-2026-05-13.md → .cursor/session-notes-2026-05-13.md
-1
View File
@@ -38,4 +38,3 @@
## 4. 本檔說明 ## 4. 本檔說明
- 由 2026-05-13 對話整理；若與後續 commit 不一致，以 git 與規則檔為準。 - 由 2026-05-13 對話整理；若與後續 commit 不一致，以 git 與規則檔為準。
- 若要再拆成「只給人讀」與「只給規則」兩層，可之後再調整，目前不重複貼長篇到多份文件。
.cursor/site-voice-notes.md
+37
View File
@@ -0,0 +1,37 @@
# 全站文案調性（助手用）
## 母本（一句話）
**`index.html`：從 `<body>` 開頭依 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`
.cursor/totoga2-video-notes.md
+8 -2
View File
@@ -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` 等頁仍保留原四鈕列。
assets/css/style.css
+19
View File
@@ -2101,6 +2101,15 @@ body.ebook-ssg2-page .ebook-intro-lead {
line-height: 1.7; 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 .ebook-main,
body.ebook-ssg2-page footer { body.ebook-ssg2-page footer {
position: relative; position: relative;
@@ -2182,6 +2191,16 @@ body.ebook-ssg2-page .flip-ebook-aspect--pageflip > #my-flipbook {
height: auto; height: auto;
max-width: 100%; max-width: 100%;
overflow: visible; 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 { body.ebook-ssg2-page #my-flipbook .page {
assets/js/portal-nav.js
+15 -7
View File
@@ -3,7 +3,7 @@
* ── 導覽「尚未開放」連結 ───────────────────────────────────────── * ── 導覽「尚未開放」連結 ─────────────────────────────────────────
* 【兩個世界】① 僅 `extra/site-guide.html`：`<nav data-portal-nav data-portal-nav-all-open>` → 不套用籌備中， * 【兩個世界】① 僅 `extra/site-guide.html`：`<nav data-portal-nav data-portal-nav-all-open>` → 不套用籌備中，
* 頂欄全可點；`main.site-guide-main` 內 `<a>` 腳本不改寫（站主自用索引）。② 其餘每一頁：一律套用籌備中。 * 頂欄全可點；`main.site-guide-main` 內 `<a>` 腳本不改寫（站主自用索引）。② 其餘每一頁：一律套用籌備中。
* 【totoga2 整合頁】`fallen/totoga2.html`（檔名仍為 totoga2.html）在 COMING_SOON_PAGES 內＝訪客頂欄「傳奇的轉折」不可點進；站主沒明講開放不得從 Set 刪除。 * 【totoga2】頂欄結構對齊 `site-guide` 主選單樹：傳奇的轉折（六六歌2）下四入口；`extra/totoga2-*.html` 可點。`fallen/totoga2.html`（檔名 totoga2.html）仍在 COMING_SOON_PAGES＝「網頁版（TOTOGA2）」訪客籌備中；未同意不得從 Set 刪除。
* 【硬規則】檔案在 repo ≠ 可開放；未同意不得從 Set 刪名、不得擴白名單、不得在模板新增可點項。 * 【硬規則】檔案在 repo ≠ 可開放；未同意不得從 Set 刪名、不得擴白名單、不得在模板新增可點項。
* 文案 NAV_SOON_PHRASES：籌備中連結提示用。 * 文案 NAV_SOON_PHRASES：籌備中連結提示用。
* 完整條文：`.cursor/rules/portal-nav-rules.mdc` + `user-scope-and-nav.mdc` * 完整條文：`.cursor/rules/portal-nav-rules.mdc` + `user-scope-and-nav.mdc`
@@ -171,10 +171,18 @@
return ` return `
<a class="logo" target="_blank" rel="noopener noreferrer" 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> <ul>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}index.html"><span class="portal-nav__label">淪陷瞬間</span><span class="portal-nav__sub">六顆永恆的水晶 · 左右命運的傳奇</span></a> <li><a target="_blank" rel="noopener noreferrer" href="${rp}index.html"><span class="portal-nav__label">淪陷瞬間</span><span class="portal-nav__sub">Hero、入坑敘事與站方初衷；LOGO 與跨時空軌跡</span></a>
<ul class="portal-submenu"> <ul class="portal-submenu">
<li><a target="_blank" rel="noopener noreferrer" href="${rp}index.html"><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"><span class="portal-nav__label">初心與軌跡</span><span class="portal-nav__sub">Hero、入坑敘事與站方初衷；LOGO 與跨時空軌跡</span></a></li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}fallen/totoga2.html"><span class="portal-nav__label">傳奇的轉折</span><span class="portal-nav__sub">六六歌2 紀實與重逢敘事主線</span></a></li> <li class="portal-nav__subgroup">
<span class="portal-nav__subgroup-head"><span class="portal-nav__label">傳奇的轉折（六六歌2）</span><span class="portal-nav__sub">四種入口：影片、電子書、時間軸、網頁版</span></span>
<ul class="portal-submenu-nested" aria-label="傳奇的轉折（六六歌2）">
<li><a target="_blank" rel="noopener noreferrer" href="${rp}extra/totoga2-video.html"><span class="portal-nav__label">影片</span><span class="portal-nav__sub">無限挑戰 · 六六歌2 嵌入影片單頁</span></a></li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}extra/totoga2-copy-ebook.html"><span class="portal-nav__label">電子書</span><span class="portal-nav__sub">紀實電子書內容獨立成頁</span></a></li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}extra/totoga2-copy-timeline.html"><span class="portal-nav__label">時間軸</span><span class="portal-nav__sub">時間軸與紀實八章長文單頁</span></a></li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}fallen/totoga2.html"><span class="portal-nav__label">網頁版（TOTOGA2）</span><span class="portal-nav__sub">單頁整合：影片／電子書／長文與八章錨點</span></a></li>
</ul>
</li>
<li class="portal-nav__subgroup"> <li class="portal-nav__subgroup">
<span class="portal-nav__subgroup-head"><span class="portal-nav__label">全員發瘋</span><span class="portal-nav__sub">原來我是個正常人啊！團綜與失控現場</span></span> <span class="portal-nav__subgroup-head"><span class="portal-nav__label">全員發瘋</span><span class="portal-nav__sub">原來我是個正常人啊！團綜與失控現場</span></span>
<ul class="portal-submenu-nested" aria-label="全員發瘋"> <ul class="portal-submenu-nested" aria-label="全員發瘋">
@@ -202,10 +210,10 @@
<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> <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> </ul>
</li> </li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/map.html"><span class="portal-nav__label">Yellow Note</span><span class="portal-nav__sub">視覺進化論 · 聖地巡禮</span></a> <li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/map.html"><span class="portal-nav__label">Yellow Note</span><span class="portal-nav__sub">台灣行程表、成員行程篩選、搜尋與地圖主體</span></a>
<ul class="portal-submenu"> <ul class="portal-submenu">
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/minister.html"><span class="portal-nav__label">視覺進化論</span><span class="portal-nav__sub">FROM CURIOSITY TO FULL-STACK</span></a></li> <li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/minister.html"><span class="portal-nav__label">視覺進化論</span><span class="portal-nav__sub">從好奇到全端：自述與時間軸式章節</span></a></li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/map.html"><span class="portal-nav__label">聖地巡禮</span><span class="portal-nav__sub">SECHSKIES TAIWAN ARCHIVE</span></a></li> <li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/map.html"><span class="portal-nav__label">聖地巡禮</span><span class="portal-nav__sub">台灣行程表、成員行程篩選、搜尋與地圖</span></a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
docs/totoga2-video-notes.md
-9
View File
@@ -1,9 +0,0 @@
# 筆記：`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` 等頁仍保留原四鈕列。
extra/totoga2 copy.html
+6 -4
View File
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="../assets/css/style.css"> <link rel="stylesheet" href="../assets/css/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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="../assets/css/tablet.css"> <link rel="stylesheet" href="../assets/css/tablet.css">
<link rel="stylesheet" href="totoga2-split-nav.css">
</head> </head>
<body class="ebook-ssg2-page totoga2-page"> <body class="ebook-ssg2-page totoga2-page">
@@ -33,10 +34,11 @@
</p> </p>
</section> </section>
<nav class="ebook-back-link totoga2-split-crossnav totoga2-copy-hub-nav" aria-label="六六歌2 複本分頁入口"> <nav class="ebook-back-link totoga2-split-crossnav totoga2-copy-hub-nav" aria-label="六六歌2 閱讀入口">
<a href="totoga2-video.html" class="btn">節目影片 · 三集 Bilibili</a> <a href="totoga2-video.html" class="btn" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
<a href="totoga2-copy-ebook.html" class="btn">紀實電子書 · FlipHTML5</a> <a href="totoga2-copy-ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
<a href="totoga2-copy-timeline.html" class="btn">時間軸＋紀實長文八章</a> <a href="totoga2-copy-timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
<a href="../fallen/totoga2.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">網頁版（TOTOGA2）</a>
</nav> </nav>
<p class="ebook-intro-lead totoga2-copy-hub-anchor-hint"> <p class="ebook-intro-lead totoga2-copy-hub-anchor-hint">
extra/totoga2-copy-ebook.html
+22 -11
View File
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="../assets/css/style.css"> <link rel="stylesheet" href="../assets/css/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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="../assets/css/tablet.css"> <link rel="stylesheet" href="../assets/css/tablet.css">
<link rel="stylesheet" href="totoga2-split-nav.css">
</head> </head>
<body class="ebook-ssg2-page totoga2-page"> <body class="ebook-ssg2-page totoga2-page">
@@ -24,19 +25,20 @@
<canvas id="particles"></canvas> <canvas id="particles"></canvas>
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 複本分頁"> <nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
<a href="totoga2-video.html" class="btn">節目影片</a> <a href="totoga2-video.html" class="btn" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
<a href="totoga2-copy-ebook.html" class="btn" aria-current="page">紀實電子書</a> <a href="totoga2-copy-ebook.html" class="btn" aria-current="page" title="紀實電子書內容獨立成頁">電子書</a>
<a href="totoga2-copy-timeline.html" class="btn">時間軸＋長文</a> <a href="totoga2-copy-timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
<a href="totoga2%20copy.html" class="btn">複本總覽</a> <a href="../fallen/totoga2.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">網頁版（TOTOGA2）</a>
</nav> </nav>
<div class="content-container ebook-main"> <div class="content-container ebook-main">
<section class="ebook-intro section" aria-label="電子書說明"> <section class="ebook-intro section" aria-label="電子書說明">
<h2 class="section-title">紀實電子書</h2> <h2 class="section-title">紀實電子書</h2>
<p class="ebook-intro-lead"> <p class="ebook-intro-lead">
以下為《無限挑戰》六六歌2 紀實跨頁 PDF（以 PDF.js 載入、PageFlip 翻頁）。若載入較慢請稍候；請以本機伺服器開啟頁面（勿用 file://），否則 PDF 可能被瀏覽器擋下。 四月那場重逢，不只是一集綜藝，而是塵封十六年的旋律，終於在笑聲與淚水裡再次被聽見。這本紀實電子書留住《無限挑戰》六六歌2 的每一頁：有驚喜、有拉扯，也有那些當時說不出口的想念。慢慢翻過去吧——我們後來才明白，有些情誼早已超越了表演，只是在節目的鏡頭裡，換了一種方式，陪彼此一起變老。
</p> </p>
<p class="ebook-intro-note">翻頁方式：點擊書頁左、右側，或拖曳頁角即可往前／往後翻。若畫面載入較慢，請稍候再試。</p>
</section> </section>
<!-- <div class="flip-ebook-shell"> <!-- <div class="flip-ebook-shell">
@@ -56,8 +58,6 @@
<p class="ebook-back-link content-container"> <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="totoga2-video.html" class="btn">節目影片（另頁）</a>
<a href="totoga2-copy-timeline.html" class="btn">時間軸＋八章（另頁）</a>
</p> </p>
<footer> <footer>
@@ -109,6 +109,17 @@
} }
var renderScale = (pageW / natural.width) * Math.min(window.devicePixelRatio || 1, 2); var renderScale = (pageW / natural.width) * Math.min(window.devicePixelRatio || 1, 2);
/* 容器寬度 ≈ 單頁寬，配合 size:'fixed' 才會走 portrait（全幅 A4*2），不會切成左右兩半 */
var bookHost = document.getElementById('book-container');
if (bookHost) {
bookHost.style.width = pageW + 'px';
bookHost.style.maxWidth = '100%';
bookHost.style.marginLeft = 'auto';
bookHost.style.marginRight = 'auto';
}
container.style.width = pageW + 'px';
container.style.maxWidth = '100%';
for (var i = 1; i <= pdf.numPages; i++) { for (var i = 1; i <= pdf.numPages; i++) {
var page = await pdf.getPage(i); var page = await pdf.getPage(i);
var viewport = page.getViewport({ scale: renderScale }); var viewport = page.getViewport({ scale: renderScale });
@@ -134,12 +145,12 @@
var pageFlip = new St.PageFlip(container, { var pageFlip = new St.PageFlip(container, {
width: pageW, width: pageW,
height: pageH, height: pageH,
size: 'stretch', /* stretch 在寬容器會固定走 landscape（總寬=2×半頁），跨頁 PDF 會被切成左空白+右半頁 */
// PDF 每個 page 本身已是「A4*2 的攤開幅面」；避免 StPageFlip 在橫向模式下把頁寬視為總寬一半 size: 'fixed',
// 導致看起來像把兩頁攤在一起、寬度被切半。
usePortrait: true, usePortrait: true,
showCover: true, showCover: true,
startPage: 0, startPage: 0,
autoSize: true,
drawShadow: true, drawShadow: true,
maxShadowOpacity: 0.4 maxShadowOpacity: 0.4
}); });
extra/totoga2-copy-timeline.html
+6 -7
View File
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="../assets/css/style.css"> <link rel="stylesheet" href="../assets/css/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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="../assets/css/tablet.css"> <link rel="stylesheet" href="../assets/css/tablet.css">
<link rel="stylesheet" href="totoga2-split-nav.css">
</head> </head>
<body class="ebook-ssg2-page totoga2-page"> <body class="ebook-ssg2-page totoga2-page">
@@ -24,11 +25,11 @@
<canvas id="particles"></canvas> <canvas id="particles"></canvas>
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 複本分頁"> <nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
<a href="totoga2-video.html" class="btn">節目影片</a> <a href="totoga2-video.html" class="btn" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
<a href="totoga2-copy-ebook.html" class="btn">紀實電子書</a> <a href="totoga2-copy-ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
<a href="totoga2-copy-timeline.html" class="btn" aria-current="page">時間軸＋長文</a> <a href="totoga2-copy-timeline.html" class="btn" aria-current="page" title="時間軸與紀實八章長文單頁">時間軸</a>
<a href="totoga2%20copy.html" class="btn">複本總覽</a> <a href="../fallen/totoga2.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">網頁版（TOTOGA2）</a>
</nav> </nav>
<div class="totoga2-reader-hub content-container ebook-main"> <div class="totoga2-reader-hub content-container ebook-main">
@@ -67,8 +68,6 @@
<p class="ebook-back-link content-container"> <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="totoga2-video.html" class="btn">節目影片（另頁）</a>
<a href="totoga2-copy-ebook.html" class="btn">紀實電子書（另頁）</a>
</p> </p>
<footer> <footer>
extra/totoga2-split-nav.css
+14
View File
@@ -0,0 +1,14 @@
/* 僅 extra 六六歌2 四入口單頁載入（見 site-guide 傳奇的轉折）；不寫入 assets/css/style.css */
body.totoga2-page nav.totoga2-split-crossnav.ebook-back-link {
margin: 0.75rem auto 1.25rem;
padding: 0.35rem 14px;
width: 100%;
max-width: 1200px;
box-sizing: border-box;
background: transparent;
background-color: transparent;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
}
extra/totoga2-video.html
+7 -7
View File
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="../assets/css/style.css"> <link rel="stylesheet" href="../assets/css/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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="../assets/css/tablet.css"> <link rel="stylesheet" href="../assets/css/tablet.css">
<link rel="stylesheet" href="totoga2-split-nav.css">
</head> </head>
<body class="ebook-ssg2-page totoga2-page totoga2-video-copy-page"> <body class="ebook-ssg2-page totoga2-page totoga2-video-copy-page">
@@ -25,13 +26,12 @@
<canvas id="particles"></canvas> <canvas id="particles"></canvas>
<div id="bilivideo-tabs" class="bilivideo-hub"> <div id="bilivideo-tabs" class="bilivideo-hub">
<p class="totoga2-copy-sibling-links content-container" aria-label="六六歌2 其他複本入口"> <nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
<a href="totoga2-copy-ebook.html">紀實電子書</a> <a href="totoga2-video.html" class="btn" aria-current="page" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
<span class="totoga2-copy-sibling-links__sep" aria-hidden="true">·</span> <a href="totoga2-copy-ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
<a href="totoga2-copy-timeline.html">時間軸＋長文</a> <a href="totoga2-copy-timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
<span class="totoga2-copy-sibling-links__sep" aria-hidden="true">·</span> <a href="../fallen/totoga2.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">網頁版（TOTOGA2）</a>
<a href="totoga2%20copy.html">複本總覽</a> </nav>
</p>
<div class="content-container ebook-main"> <div class="content-container ebook-main">
<section class="ebook-intro section" aria-labelledby="ebook-bilivideo-heading"> <section class="ebook-intro section" aria-labelledby="ebook-bilivideo-heading">