refactor totoga2四頁移入資料夾
This commit is contained in:
@@ -0,0 +1,169 @@
|
||||
<!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="split-nav.css">
|
||||
</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="timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
|
||||
<a href="ebook.html" class="btn" aria-current="page" title="紀實電子書內容獨立成頁">電子書</a>
|
||||
<a href="readable.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">圖文好讀版</a>
|
||||
<a href="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 © 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>
|
||||
Reference in New Issue
Block a user