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

refactor totoga2四頁移入資料夾

Browse Source
This commit is contained in:
jekkinoopy
2026-05-17 20:12:29 +08:00
parent 5d23774b50
commit d0897a4656
14 changed files with 980 additions and 671 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extra/site-guide.html
+29 -29
View File
@@ -118,32 +118,32 @@
</tr>
<tr data-site-guide-depth="3">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a
href="totoga2-copy-timeline.html">時間軸</a></span></td>
href="../totoga2/timeline.html">時間軸</a></span></td>
<td class="site-guide-nav-desc">時間軸與紀實八章長文單頁。</td>
<td class="site-guide-nav-link-cell"><a
href="totoga2-copy-timeline.html"><code>extra/totoga2-copy-timeline.html</code></a>
href="../totoga2/timeline.html"><code>totoga2/timeline.html</code></a>
</td>
</tr>
<tr data-site-guide-depth="3">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a
href="totoga2-copy-ebook.html">電子書</a></span></td>
href="../totoga2/ebook.html">電子書</a></span></td>
<td class="site-guide-nav-desc">紀實電子書內容獨立成頁。</td>
<td class="site-guide-nav-link-cell"><a
href="totoga2-copy-ebook.html"><code>extra/totoga2-copy-ebook.html</code></a></td>
href="../totoga2/ebook.html"><code>totoga2/ebook.html</code></a></td>
</tr>
<tr data-site-guide-depth="3">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a
href="../fallen/totoga2.html">圖文好讀版</a></span></td>
href="../totoga2/readable.html">圖文好讀版</a></span></td>
<td class="site-guide-nav-desc">單頁整合：影片／電子書／長文模式切換與八章錨點。</td>
<td class="site-guide-nav-link-cell"><a
href="../fallen/totoga2.html"><code>fallen/totoga2.html</code></a></td>
href="../totoga2/readable.html"><code>totoga2/readable.html</code></a></td>
</tr>
<tr data-site-guide-depth="3">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a
href="totoga2-video.html">影片</a></span></td>
href="../totoga2/video.html">影片</a></span></td>
<td class="site-guide-nav-desc">無限挑戰 · 六六歌2 嵌入影片單頁。</td>
<td class="site-guide-nav-link-cell"><a
href="totoga2-video.html"><code>extra/totoga2-video.html</code></a></td>
href="../totoga2/video.html"><code>totoga2/video.html</code></a></td>
</tr>
<tr data-site-guide-depth="2">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><span
@@ -293,44 +293,44 @@
<td>區塊錨點（<code>#story</code> 不在頂欄白名單）</td>
</tr>
<tr>
<td><a href="totoga2-copy-timeline.html">時間軸</a></td>
<td>平行單頁 · <code>totoga2-copy-timeline.html</code></td>
<td><a href="../totoga2/timeline.html">時間軸</a></td>
<td>平行單頁 · <code>totoga2/timeline.html</code></td>
</tr>
<tr>
<td><a href="totoga2-copy-ebook.html">電子書</a></td>
<td>平行單頁 · <code>totoga2-copy-ebook.html</code></td>
<td><a href="../totoga2/ebook.html">電子書</a></td>
<td>平行單頁 · <code>totoga2/ebook.html</code></td>
</tr>
<tr>
<td><a href="../fallen/totoga2.html">圖文好讀版</a></td>
<td>整合長頁 · <code>fallen/totoga2.html</code></td>
<td><a href="../totoga2/readable.html">圖文好讀版</a></td>
<td>整合長頁 · <code>totoga2/readable.html</code></td>
</tr>
<tr>
<td><a href="totoga2-video.html">影片</a></td>
<td>平行單頁 · <code>totoga2-video.html</code></td>
<td><a href="../totoga2/video.html">影片</a></td>
<td>平行單頁 · <code>totoga2/video.html</code></td>
</tr>
</tbody>
</table>
</div>
<div class="site-guide-grid site-guide-grid--compact">
<article class="site-guide-card site-guide-card--totoga2">
<h3><a href="../fallen/totoga2.html">六六歌2 · 四入口</a></h3>
<h3><a href="../totoga2/readable.html">六六歌2 · 四入口</a></h3>
<p class="site-guide-note">複本總覽：<a href="totoga2%20copy.html">totoga2 copy.html</a>。章節錨點僅在圖文好讀版內。
</p>
<ul class="site-guide-inline-links">
<li><a href="totoga2-copy-timeline.html">時間軸</a></li>
<li><a href="totoga2-copy-ebook.html">電子書</a></li>
<li><a href="../fallen/totoga2.html">圖文好讀版</a></li>
<li><a href="totoga2-video.html">影片</a></li>
<li><a href="../totoga2/timeline.html">時間軸</a></li>
<li><a href="../totoga2/ebook.html">電子書</a></li>
<li><a href="../totoga2/readable.html">圖文好讀版</a></li>
<li><a href="../totoga2/video.html">影片</a></li>
</ul>
<nav class="site-guide-chapter-nav" aria-label="totoga2 章節">
<a href="../fallen/totoga2.html#challenge">無限挑戰</a>
<a href="../fallen/totoga2.html#ssg2">六六歌2</a>
<a href="../fallen/totoga2.html#sechskies-profile">水晶男孩</a>
<a href="../fallen/totoga2.html#gather">召集</a>
<a href="../fallen/totoga2.html#negotiate">交涉</a>
<a href="../fallen/totoga2.html#variables">變數</a>
<a href="../fallen/totoga2.html#surprise">驚喜</a>
<a href="../fallen/totoga2.html#final-stage">登場</a>
<a href="readable.html#challenge">無限挑戰</a>
<a href="readable.html#ssg2">六六歌2</a>
<a href="readable.html#sechskies-profile">水晶男孩</a>
<a href="readable.html#gather">召集</a>
<a href="readable.html#negotiate">交涉</a>
<a href="readable.html#variables">變數</a>
<a href="readable.html#surprise">驚喜</a>
<a href="readable.html#final-stage">登場</a>
</nav>
</article>
</div>
extra/totoga2 copy.html
+8 -8
View File
@@ -8,7 +8,7 @@
<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="../assets/css/tablet.css">
<link rel="stylesheet" href="totoga2-split-nav.css">
<link rel="stylesheet" href="../totoga2/split-nav.css">
</head>
<body class="ebook-ssg2-page totoga2-page">
@@ -30,25 +30,25 @@
<h2 class="section-title" id="totoga2-copy-hub-title">六六歌2 複本 · 三頁分開</h2>
<p class="ebook-intro-lead">
原先單頁以按鈕切換「影片／電子書／時間軸＋長文」；此複本改為<strong>三個獨立 HTML</strong>（檔名無空白，較利分享與書籤）。
正式整合版仍以 <a href="../fallen/totoga2.html">fallen/totoga2.html</a> 為準。
正式整合版仍以 <a href="../totoga2/readable.html">totoga2/readable.html</a> 為準。
</p>
</section>
<nav class="ebook-back-link totoga2-split-crossnav totoga2-copy-hub-nav" aria-label="六六歌2 閱讀入口">
<a href="totoga2-copy-timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
<a href="totoga2-copy-ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
<a href="../fallen/totoga2.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">圖文好讀版</a>
<a href="totoga2-video.html" class="btn" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
<a href="../totoga2/timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
<a href="../totoga2/ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
<a href="../totoga2/readable.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">圖文好讀版</a>
<a href="../totoga2/video.html" class="btn" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
</nav>
<p class="ebook-intro-lead totoga2-copy-hub-anchor-hint">
長文章節錨點請用 <a href="totoga2-copy-timeline.html#challenge">#challenge</a> 等同名 id（見時間軸頁）。
長文章節錨點請用 <a href="../totoga2/timeline.html#challenge">#challenge</a> 等同名 id（見時間軸頁）。
</p>
</main>
<p class="ebook-back-link content-container">
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
<a href="../fallen/totoga2.html" class="btn">主檔 fallen/totoga2.html</a>
<a href="../totoga2/readable.html" class="btn">主檔 totoga2/readable.html</a>
</p>
<footer>
extra/totoga2-copy-ebook.html
+7 -165
View File
@@ -1,169 +1,11 @@
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水晶男孩｜六六歌2 — 紀實電子書</title>
<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="../assets/css/tablet.css">
<link rel="stylesheet" href="totoga2-split-nav.css">
<meta charset="UTF-8">
<meta http-equiv="refresh" content="0; url=../totoga2/ebook.html">
<link rel="canonical" href="../totoga2/ebook.html">
<title>已搬移</title>
<script>location.replace("../totoga2/ebook.html" + location.hash);</script>
</head>
<body class="ebook-ssg2-page totoga2-page totoga2-ebook-copy-page">
<header class="map-archive-header">
<div class="header-inner site-header-inner">
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
<div class="subtitle-wrap">
<span class="sub-title">水晶男孩回來啦！</span>
</div>
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
<a href="totoga2-copy-timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
<a href="totoga2-copy-ebook.html" class="btn" aria-current="page" title="紀實電子書內容獨立成頁">電子書</a>
<a href="../fallen/totoga2.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">圖文好讀版</a>
<a href="totoga2-video.html" class="btn" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
</nav>
<div class="content-container ebook-main">
<section class="ebook-intro section" aria-label="電子書說明">
<h2 class="section-title">紀實電子書</h2>
<p class="ebook-intro-lead">
四月那場重逢，不只是一集綜藝，而是塵封十六年的旋律，終於在笑聲與淚水裡再次被聽見。這本紀實電子書留住《無限挑戰》六六歌2
的每一頁：有驚喜、有拉扯，也有那些當時說不出口的想念。慢慢翻過去吧——我們後來才明白，有些情誼早已超越了表演，只是在節目的鏡頭裡，換了一種方式，陪彼此一起變老。
</p>
<div class="ebook-intro-notes fa-before-lead fa-before-lead--balloon">
<p class="ebook-intro-note">看看後面飄落的氣球，等等十秒，電子書就會出現囉。</p>
<p class="ebook-intro-note">翻頁方式：點擊書頁左、右側，或拖曳頁角即可往前／往後翻。</p>
</div>
</section>
<!-- <div class="flip-ebook-shell">
<div class="flip-ebook-aspect">
<iframe src="https://online.fliphtml5.com/tjyxm/vqff/" title="2023_電子書_無限挑戰六六歌2_final跨頁"
allowfullscreen></iframe>
</div>
</div> -->
<div class="flip-ebook-shell">
<div id="book-container" class="flip-ebook-aspect flip-ebook-aspect--pageflip">
<!-- PDF.js + PageFlip 會在此產生頁面 -->
<div id="my-flipbook"></div>
</div>
</div>
</div>
<p class="ebook-back-link content-container">
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
</p>
<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="../assets/js/particles.js"></script>
<script src="../assets/js/portal-nav.js"></script>
<!-- 1. 引入 PDF.js 核心庫 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<!-- 2. 引入 PageFlip -->
<script src="https://cdn.jsdelivr.net/npm/page-flip/dist/js/page-flip.browser.js"></script>
<script>
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
/** 專案內實際存在的 PDF（原 totoga2/ebook/totoga2_ebook.pdf 尚未建檔） */
var EBOOK_PDF_URL = '../assets/images/totoga2/totoga2.pdf';
function showEbookError(message) {
var box = document.getElementById('my-flipbook');
if (!box) return;
box.innerHTML = '<p class="ebook-pdf-error" role="alert">' + message + '</p>';
}
async function initEbook(pdfUrl) {
var container = document.getElementById('my-flipbook');
if (!container) throw new Error('找不到 #my-flipbook');
if (typeof pdfjsLib === 'undefined') throw new Error('PDF.js 未載入');
if (typeof St === 'undefined' || !St.PageFlip) throw new Error('PageFlip（St.PageFlip）未載入');
var loadingTask = pdfjsLib.getDocument(pdfUrl);
var pdf = await loadingTask.promise;
/* 第 1 頁為封面；內文比例以第 2 頁為準（與 PageFlip showCover 一致） */
var sizePageIndex = pdf.numPages >= 2 ? 2 : 1;
var sizePage = await pdf.getPage(sizePageIndex);
var natural = sizePage.getViewport({ scale: 1 });
var shell = document.querySelector('.flip-ebook-shell');
var bookHost = document.getElementById('book-container');
if (bookHost) {
bookHost.style.width = '100%';
bookHost.style.maxWidth = '100%';
bookHost.style.marginLeft = '0';
bookHost.style.marginRight = '0';
}
container.style.width = '100%';
container.style.maxWidth = '100%';
var measureEl = bookHost || shell;
var pageW = Math.max(320, Math.floor((measureEl && measureEl.clientWidth) || 0));
var pageH = Math.floor(pageW * (natural.height / natural.width));
var renderScale = (pageW / natural.width) * Math.min(window.devicePixelRatio || 1, 2);
for (var i = 1; i <= pdf.numPages; i++) {
var page = await pdf.getPage(i);
var viewport = page.getViewport({ scale: renderScale });
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
await page.render({ canvasContext: context, viewport: viewport }).promise;
var pageElement = document.createElement('div');
pageElement.className = 'page';
if (i === 1) {
pageElement.setAttribute('data-density', 'hard');
} else if (i === pdf.numPages) {
pageElement.setAttribute('data-density', 'hard');
}
pageElement.appendChild(canvas);
container.appendChild(pageElement);
}
var pageFlip = new St.PageFlip(container, {
width: pageW,
height: pageH,
/* stretch 在寬容器會固定走 landscape（總寬=2×半頁），跨頁 PDF 會被切成左空白+右半頁 */
size: 'fixed',
usePortrait: true,
showCover: true,
startPage: 0,
autoSize: true,
drawShadow: true,
maxShadowOpacity: 0.4
});
pageFlip.loadFromHTML(document.querySelectorAll('#my-flipbook .page'));
}
initEbook(EBOOK_PDF_URL).catch(function (err) {
console.error(err);
showEbookError(
'電子書 PDF 無法載入或翻頁初始化失敗。若用本機直接開檔案（file://），請改由本機伺服器開啟；並確認路徑存在：<code>'
+ EBOOK_PDF_URL + '</code>'
);
});
</script>
</body>
</html>
<body><p>頁面已搬至 <a href="../totoga2/ebook.html">totoga2/ebook.html</a></p></body>
</html>
extra/totoga2-copy-timeline.html
+7 -81
View File
@@ -1,85 +1,11 @@
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水晶男孩｜六六歌2 — 時間軸與紀實長文</title>
<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="../assets/css/tablet.css">
<link rel="stylesheet" href="totoga2-split-nav.css">
<meta charset="UTF-8">
<meta http-equiv="refresh" content="0; url=../totoga2/timeline.html">
<link rel="canonical" href="../totoga2/timeline.html">
<title>已搬移</title>
<script>location.replace("../totoga2/timeline.html" + location.hash);</script>
</head>
<body class="ebook-ssg2-page totoga2-page">
<header class="map-archive-header">
<div class="header-inner site-header-inner">
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
<div class="subtitle-wrap">
<span class="sub-title">水晶男孩回來啦！</span>
</div>
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
<a href="totoga2-copy-timeline.html" class="btn" aria-current="page" title="時間軸與紀實八章長文單頁">時間軸</a>
<a href="totoga2-copy-ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
<a href="../fallen/totoga2.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">圖文好讀版</a>
<a href="totoga2-video.html" class="btn" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
</nav>
<div class="totoga2-reader-hub content-container ebook-main">
<section class="story-archive totoga2-plot content-container" aria-labelledby="totoga2-plot-title">
<h2 class="section-title" id="totoga2-plot-title">傳奇的轉折</h2>
<div class="subtitle-wrap">
<span class="sub-title">PLOT TWIST</span>
</div>
<p class="intro-text">
與首頁相同的節點提要；點下方連結可跳到本頁「紀實長文」對應章節（八章皆在本頁，無需另開檔案）。
</p>
<div class="merged-storyline">
<article id="totoga2-special" class="story-node" data-era="六六歌">
<h3>六六歌實錄</h3>
<p>把懸念、試探與哭點縫在同一條時間軸上；很多人第一次真正把「水晶男孩」打進搜尋框，就是從這種瘋狂的剪輯節奏開始。</p>
<p><a href="#ssg2">對照本頁幕後敘事 · 六六歌第二季</a></p>
</article>
<article id="totoga2-negotiate-card" class="story-node" data-era="交涉">
<h3>命運的交涉</h3>
<p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面，而是還願不願意再一次肩並肩。</p>
<p><a href="#negotiate">讀本頁 · 正式交涉</a></p>
</article>
<article id="totoga2-complete" class="story-node" data-era="歸位">
<h3>拼圖的歸位</h3>
<p>變數一個個被排除之後，驚喜接上登場段落；缺一角舞台的視覺，終於對齊觀眾席上堅守的那片黃。</p>
<p><a href="#gather">從本頁「召集」段開始補這條線</a></p>
</article>
<article id="totoga2-past" class="story-node" data-era="最初">
<h3>巔峰與雨天</h3>
<p>急凍、告別、各自的跑道——並不是要你沉浸遺憾，而是讓你懂：後來每一次亮燈，為什麼會更值得尖叫。</p>
<p><a href="#sechskies-profile">讀本頁脈絡起點 · 水晶男孩</a></p>
</article>
</div>
</section>
<p class="ebook-back-link content-container">
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
</p>
<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="../assets/js/particles.js"></script>
<script src="../assets/js/portal-nav.js"></script>
<script src="../assets/js/totoga2.js"></script>
</body>
</html>
<body><p>頁面已搬至 <a href="../totoga2/timeline.html">totoga2/timeline.html</a></p></body>
</html>
extra/totoga2-split-nav.css
-14
View File
@@ -1,14 +0,0 @@
/* 僅 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
+6 -116
View File
@@ -1,121 +1,11 @@
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水晶男孩｜六六歌2 — 節目影片</title>
<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="../assets/css/tablet.css">
<link rel="stylesheet" href="totoga2-split-nav.css">
<meta charset="UTF-8">
<meta http-equiv="refresh" content="0; url=../totoga2/video.html">
<link rel="canonical" href="../totoga2/video.html">
<title>已搬移</title>
<script>location.replace("../totoga2/video.html" + location.hash);</script>
</head>
<body class="ebook-ssg2-page totoga2-page totoga2-video-copy-page">
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
<a href="totoga2-copy-timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
<a href="totoga2-copy-ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
<a href="../fallen/totoga2.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">圖文好讀版</a>
<a href="totoga2-video.html" class="btn" aria-current="page" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
</nav>
<div class="content-container ebook-main">
<section class="ebook-intro section" aria-labelledby="ebook-bilivideo-heading">
<h2 class="section-title" id="ebook-bilivideo-heading">節目影片</h2>
<div id="bilivideo-tabs" class="bilivideo-tabs__shell">
<!-- tablist 在 DOM 上須先於 iframe，否則 B 站播放器合成層易蓋住下方按鈕文字；畫面順序改由 CSS flex order 控制 -->
<nav class="bilivideo-episode-nav" role="tablist" aria-label="節目影片集數">
<button type="button" class="btn bilivideo-episode-nav__tab bilivideo-episode-nav__tab--active"
role="tab" id="bilivideo-tab-1" aria-controls="bilivideo-panel-1"
aria-selected="true">上集</button>
<button type="button" class="btn bilivideo-episode-nav__tab" role="tab" id="bilivideo-tab-2"
aria-controls="bilivideo-panel-2" aria-selected="false" tabindex="-1">中集</button>
<button type="button" class="btn bilivideo-episode-nav__tab" role="tab" id="bilivideo-tab-3"
aria-controls="bilivideo-panel-3" aria-selected="false" tabindex="-1">下集</button>
</nav>
<div class="bilivideo-tabs__panels">
<div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-1"
aria-labelledby="bilivideo-tab-1">
<div class="bilivideo-frame">
<iframe title="無限挑戰 六六歌2 上集"
src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353565&p=1"
scrolling="no" border="0" frameborder="no" framespacing="0"
allowfullscreen="true"></iframe>
</div>
</div>
<div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-2"
aria-labelledby="bilivideo-tab-2" hidden>
<div class="bilivideo-frame">
<iframe title="無限挑戰 六六歌2 中集"
data-src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353561&p=2"
scrolling="no" border="0" frameborder="no" framespacing="0"
allowfullscreen="true"></iframe>
</div>
</div>
<div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-3"
aria-labelledby="bilivideo-tab-3" hidden>
<div class="bilivideo-frame">
<iframe title="無限挑戰 六六歌2 下集"
data-src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353562&p=3"
scrolling="no" border="0" frameborder="no" framespacing="0"
allowfullscreen="true"></iframe>
</div>
</div>
</div>
</div>
</section>
</div>
<p class="ebook-back-link content-container">
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
</p>
<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="../assets/js/particles.js"></script>
<script src="../assets/js/portal-nav.js"></script>
<script>
(function () {
var root = document.getElementById("bilivideo-tabs");
if (!root) return;
var tabs = Array.prototype.slice.call(root.querySelectorAll('[role="tab"]'));
var panels = Array.prototype.slice.call(root.querySelectorAll('[role="tabpanel"]'));
function activate(index) {
tabs.forEach(function (tab, i) {
var on = i === index;
tab.setAttribute("aria-selected", on ? "true" : "false");
tab.tabIndex = on ? 0 : -1;
if (on) tab.classList.add("bilivideo-episode-nav__tab--active");
else tab.classList.remove("bilivideo-episode-nav__tab--active");
panels[i].hidden = !on;
if (on) {
var iframe = panels[i].querySelector("iframe[data-src]");
if (iframe && !iframe.getAttribute("src")) {
iframe.setAttribute("src", iframe.getAttribute("data-src"));
}
}
});
}
tabs.forEach(function (tab, i) {
tab.addEventListener("click", function () {
activate(i);
});
});
activate(0);
})();
</script>
</body>
<body><p>頁面已搬至 <a href="../totoga2/video.html">totoga2/video.html</a></p></body>
</html>