jekkinoopy/sechskies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
295f18d567ba77a6c88347061148318e44d3a364
sechskies/待確認/extra/site-guide.html
T

524 lines
30 KiB
HTML
Raw Normal View History

docs: 新增 color-tokens 規範文件
2026-06-11 15:34:47 +08:00
<!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="../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">
<style>
/* 本頁專用：導覽列捲到視窗頂端後固定，不再隨頁面上移 */
body.site-guide-page .portal-nav {
position: sticky;
top: 0;
z-index: 100;
width: 100%;
box-sizing: border-box;
margin: 0 0 14px;
padding: 0.8rem clamp(16px, 4vw, 100px);
background-color: var(--black);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
overflow: visible;
}
/* 主選單樹巢狀：data-site-guide-depth + .site-guide-nav-name */
body.site-guide-page .site-guide-nav-table .site-guide-nav-menu-cell {
text-align: left;
}
body.site-guide-page .site-guide-nav-table tr[data-site-guide-depth="1"] .site-guide-nav-menu-cell {
padding-left: 0.65rem;
}
body.site-guide-page .site-guide-nav-table tr[data-site-guide-depth="2"] .site-guide-nav-menu-cell {
padding-left: 1.1rem;
}
body.site-guide-page .site-guide-nav-table tr[data-site-guide-depth="3"] .site-guide-nav-menu-cell {
padding-left: 1.85rem;
}
body.site-guide-page .site-guide-nav-table tr[data-site-guide-depth="4"] .site-guide-nav-menu-cell {
padding-left: 2.6rem;
}
body.site-guide-page .site-guide-nav-table tr[data-site-guide-depth="2"] .site-guide-nav-name::before {
content: "——\00a0";
}
body.site-guide-page .site-guide-nav-table tr[data-site-guide-depth="3"] .site-guide-nav-name::before {
content: "————\00a0";
}
body.site-guide-page .site-guide-nav-table tr[data-site-guide-depth="4"] .site-guide-nav-name::before {
content: "——————\00a0";
}
body.site-guide-page .site-guide-nav-table tr[data-site-guide-depth] .site-guide-nav-name::before {
display: inline;
font-family: inherit;
font-size: 0.92em;
color: rgba(0, 0, 0, 0.38);
letter-spacing: 0.02em;
}
/* 站主待辦提醒（處理完 header 統整後可刪除此區與樣式） */
body.site-guide-page .site-guide-todo-reminder {
margin: 0 0 1.25rem;
padding: 0.85rem 1rem;
border: 2px solid rgba(255, 204, 0, 0.75);
border-radius: 10px;
background: #fffbe8;
text-align: left;
font-size: 0.92rem;
line-height: 1.55;
color: #3a300a;
}
body.site-guide-page .site-guide-todo-reminder strong {
color: #5c4a0f;
}
</style>
</head>
<body class="site-guide-page">
<header class="map-archive-header">
<div class="header-inner">
<h1 class="main-title">全站導覽</h1>
<div class="subtitle-wrap">
<span class="sub-title">SITE MAP · 一表為主</span>
</div>
</div>
</header>
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav data-portal-nav-all-open></nav>
<canvas id="particles"></canvas>
<main class="content-container site-guide-main">
<aside class="site-guide-todo-reminder" role="note" aria-label="站主待辦提醒">
<p><strong>優化</strong>：內頁 header 統一 →
<a href="../.cursor/inner-page-header-audit.md" class="mark_b">差異整理</a></p>
</aside>
<p class="site-guide-lead site-guide-lead--short">
本頁為站主自用全站導覽：主表與小表連結皆可進目標頁。頂欄加 <code>data-portal-nav-all-open</code>，不套用籌備中、且為同分頁開啟；訪客可見之其他頁仍依
<code>portal-nav.js</code> 籌備中規則與另開新分頁。
</p>
<section class="site-guide-group site-guide-group--nav-hero" aria-labelledby="sg-nav-tree">
<h2 class="section-title" id="sg-nav-tree">主選單樹</h2>
<p class="site-guide-legend">
<span><span class="site-guide-legend__on">●</span> 有連結</span>
<span><span class="site-guide-legend__off">●</span> 無連結</span>
</p>
<div class="site-guide-nav-table-wrap">
<table class="site-guide-nav-table">
<caption class="site-guide-nav-caption">路徑相對站根。</caption>
<thead>
<tr>
<th scope="col">選單名稱</th>
<th scope="col">頁面簡介</th>
<th scope="col">連結</th>
</tr>
</thead>
<tbody>
<tr data-site-guide-depth="1">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a
href="../index.html">淪陷瞬間</a></span></td>
<td class="site-guide-nav-desc">Hero、入坑敘事與站方初衷；LOGO 理念、宣言與跨時空軌跡時間軸。</td>
<td class="site-guide-nav-link-cell"><a href="../index.html"><code>index.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
class="site-guide-nav-nolink">傳奇的轉折（六六歌2）</span></span></td>
<td class="site-guide-nav-desc">四種入口（順序）：時間軸、電子書為獨立單頁；網頁版為 TOTOGA2 整合長頁（章節錨點）；影片為嵌入單頁。</td>
<td class="site-guide-nav-link-cell"><span class="site-guide-nav-nolink">—</span></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-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>
</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>
<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>
</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>
<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>
</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>
<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>
</tr>
<tr data-site-guide-depth="2">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><span
class="site-guide-nav-nolink">全員發瘋</span></span></td>
<td class="site-guide-nav-desc">—</td>
<td class="site-guide-nav-link-cell"><span class="site-guide-nav-nolink">—</span></td>
</tr>
<tr data-site-guide-depth="3">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a
href="../variety/variety.html#variety">隊長帶弟弟</a></span></td>
<td class="site-guide-nav-desc">綜藝頁「瘋狂出演中」主區；與頂欄「隊長帶弟弟」同頁錨點。</td>
<td class="site-guide-nav-link-cell"><a
href="../variety/variety.html#variety"><code>variety/variety.html#variety</code></a>
</td>
</tr>
<tr data-site-guide-depth="3">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><span
class="site-guide-nav-nolink">各自暴走</span></span></td>
<td class="site-guide-nav-desc">—</td>
<td class="site-guide-nav-link-cell"><span class="site-guide-nav-nolink">—</span></td>
</tr>
<tr data-site-guide-depth="4">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a
href="../variety/NJTW/NJTW5.html">新西遊記</a></span></td>
<td class="site-guide-nav-desc">與鬼神同行企劃文案、六人介紹與 OB／YB 雙隊版面。</td>
<td class="site-guide-nav-link-cell"><a
href="../variety/NJTW/NJTW5.html"><code>variety/NJTW/NJTW5.html</code></a></td>
</tr>
<tr data-site-guide-depth="1">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a
href="../member/member.html">完整的六顆</a></span></td>
<td class="site-guide-nav-desc">黑／白水晶六人海報板、團名典故與成員靜態介紹。</td>
<td class="site-guide-nav-link-cell"><a
href="../member/member.html"><code>member/member.html</code></a></td>
</tr>
<tr data-site-guide-depth="1">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a
href="../concert/concert.html">現場的震撼</a></span></td>
<td class="site-guide-nav-desc">巡迴場次、場館與曲目展開；搜尋曲目或場次。</td>
<td class="site-guide-nav-link-cell"><a
href="../concert/concert.html"><code>concert/concert.html</code></a></td>
</tr>
<tr data-site-guide-depth="2">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a
href="../concert/concert.html">集結水晶</a></span></td>
<td class="site-guide-nav-desc">巡迴場次、場館與曲目展開；搜尋曲目或場次。</td>
<td class="site-guide-nav-link-cell"><a
href="../concert/concert.html"><code>concert/concert.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
class="site-guide-nav-nolink">隊長的氣場</span></span></td>
<td class="site-guide-nav-desc">—</td>
<td class="site-guide-nav-link-cell"><span class="site-guide-nav-nolink">—</span></td>
</tr>
<tr data-site-guide-depth="1">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a
href="../albums/albums.html">黃色留聲機</a></span></td>
<td class="site-guide-nav-desc">導聽文案；新篇章與全盛期年表、深水連結與曲目表。</td>
<td class="site-guide-nav-link-cell"><a
href="../albums/albums.html"><code>albums/albums.html</code></a></td>
</tr>
<tr data-site-guide-depth="2">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a
href="../albums/albums.html#new">啟動新篇章</a></span></td>
<td class="site-guide-nav-desc">回歸後數位單曲／專輯敘事與代表曲目表。</td>
<td class="site-guide-nav-link-cell"><a
href="../albums/albums.html#new"><code>albums/albums.html#new</code></a></td>
</tr>
<tr data-site-guide-depth="2">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a
href="../albums/albums.html#classic">輝煌全盛期</a></span></td>
<td class="site-guide-nav-desc">1997–1999 全盛期年表、專輯列與主打記憶整理。</td>
<td class="site-guide-nav-link-cell"><a
href="../albums/albums.html#classic"><code>albums/albums.html#classic</code></a>
</td>
</tr>
<tr data-site-guide-depth="1">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a
href="../yellow-note/map.html">Yellow Note</a></span></td>
<td class="site-guide-nav-desc">台灣行程表、成員行程篩選、搜尋與地圖主體。</td>
<td class="site-guide-nav-link-cell"><a
href="../yellow-note/map.html"><code>yellow-note/map.html</code></a></td>
</tr>
<tr data-site-guide-depth="2">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a
href="../yellow-note/minister.html">視覺進化論</a></span></td>
<td class="site-guide-nav-desc">「從好奇到全端」自述與時間軸式章節段落。</td>
<td class="site-guide-nav-link-cell"><a
href="../yellow-note/minister.html"><code>yellow-note/minister.html</code></a></td>
</tr>
<tr data-site-guide-depth="2">
<td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a
href="../yellow-note/map.html">聖地巡禮</a></span></td>
<td class="site-guide-nav-desc">台灣行程表、成員行程篩選、搜尋與地圖主體。</td>
<td class="site-guide-nav-link-cell"><a
href="../yellow-note/map.html"><code>yellow-note/map.html</code></a></td>
</tr>
</tbody>
</table>
</div>
<h3 class="site-guide-subh" id="sg-rules-quick">一般頁籌備中（掃一眼）</h3>
<div class="site-guide-nav-table-wrap">
<table class="site-guide-mini-table" aria-describedby="sg-rules-quick">
<tbody>
<tr>
<th scope="row"><code>COMING_SOON_PAGES</code></th>
<td><code>albums</code>、<code>yellow-note/map</code>、<code>minister</code>、<code>minister_ge</code>、<code>totoga2</code>、<code>variety</code>
檔名 → 一般頁改 <code>#</code></td>
</tr>
<tr>
<th scope="row"><code>INDEX_NAV_OPEN_HASHES</code></th>
<td>僅 <code>index.html</code>
無片段、<code>#origin</code>、<code>#start</code>、<code>#mission</code>、<code>#timeline</code>
</td>
</tr>
<tr>
<th scope="row">固定</th>
<td>「隊長的氣場」與 Set 無關</td>
</tr>
</tbody>
</table>
</div>
<p class="site-guide-fine-print site-guide-fine-print--center">綜藝主頁：<a
href="../variety/variety.html">variety.html</a></p>
</section>
<section class="site-guide-group" aria-labelledby="sg-nav-origin">
<h2 class="section-title" id="sg-nav-origin">淪陷瞬間 <span class="site-guide-nav-sub">站根</span></h2>
<div class="site-guide-nav-table-wrap">
<table class="site-guide-mini-table">
<thead>
<tr>
<th scope="col">頁／錨點</th>
<th scope="col">用途</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="../index.html">index.html</a></td>
<td>首頁 Hero</td>
</tr>
<tr>
<td><a href="../index.html#start">#start</a> 等</td>
<td>區塊錨點（<code>#story</code> 不在頂欄白名單）</td>
</tr>
<tr>
<td><a href="totoga2-copy-timeline.html">時間軸</a></td>
<td>平行單頁 · <code>totoga2-copy-timeline.html</code></td>
</tr>
<tr>
<td><a href="totoga2-copy-ebook.html">電子書</a></td>
<td>平行單頁 · <code>totoga2-copy-ebook.html</code></td>
</tr>
<tr>
<td><a href="../fallen/totoga2.html">圖文好讀版</a></td>
<td>整合長頁 · <code>fallen/totoga2.html</code></td>
</tr>
<tr>
<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>
<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>
</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>
</nav>
</article>
</div>
</section>
<section class="site-guide-group" aria-labelledby="sg-nav-member">
<h2 class="section-title" id="sg-nav-member">完整的六顆</h2>
<div class="site-guide-nav-table-wrap">
<table class="site-guide-mini-table">
<tbody>
<tr>
<th scope="row">頁</th>
<td><a href="../member/member.html">member/member.html</a></td>
</tr>
<tr>
<th scope="row">錨點</th>
<td><a href="../member/member.html#crystal-board">#crystal-board</a></td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="site-guide-group" aria-labelledby="sg-nav-concert">
<h2 class="section-title" id="sg-nav-concert">現場的震撼</h2>
<div class="site-guide-nav-table-wrap">
<table class="site-guide-mini-table">
<tbody>
<tr>
<th scope="row">集結水晶</th>
<td><a href="../concert/concert.html">concert.html</a> · <a
href="../concert/concert.html#stage-now">#stage-now</a> · <a
href="../concert/concert.html#stage-past">#stage-past</a></td>
</tr>
<tr>
<th scope="row">隊長的氣場</th>
<td>—</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="site-guide-group" aria-labelledby="sg-nav-albums">
<h2 class="section-title" id="sg-nav-albums">黃色留聲機</h2>
<div class="site-guide-nav-table-wrap">
<table class="site-guide-mini-table">
<tbody>
<tr>
<th scope="row">典藏</th>
<td><a href="../albums/albums.html">albums.html</a> · <a
href="../albums/albums.html#new">#new</a> · <a
href="../albums/albums.html#classic">#classic</a></td>
</tr>
<tr>
<th scope="row">歌詞</th>
<td><a href="lyrics.html">extra/lyrics.html</a>（未列主欄）</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="site-guide-group" aria-labelledby="sg-nav-yellow-note">
<h2 class="section-title" id="sg-nav-yellow-note">Yellow Note</h2>
<div class="site-guide-nav-table-wrap">
<table class="site-guide-mini-table">
<tbody>
<tr>
<th scope="row">視覺</th>
<td><a href="../yellow-note/minister.html">yellow-note/minister.html</a></td>
</tr>
<tr>
<th scope="row">minister 長版</th>
<td><a href="minister_ge.html">minister_ge.html</a>（備份；未列頂欄）</td>
</tr>
<tr>
<th scope="row">地圖</th>
<td><a href="../yellow-note/map.html">map.html</a> · <a
href="../yellow-note/map.html#taipei">#taipei</a> · <a
href="../yellow-note/map.html#global">#global</a></td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="site-guide-group" aria-labelledby="sg-nav-variety">
<h2 class="section-title" id="sg-nav-variety">variety/（無主欄）</h2>
<div class="site-guide-nav-table-wrap">
<table class="site-guide-mini-table">
<tbody>
<tr>
<th scope="row">主頁</th>
<td><a href="../variety/variety.html">variety.html</a> · <a
href="../variety/variety.html#variety">#variety</a></td>
</tr>
<tr>
<th scope="row">NJTW5</th>
<td><a href="../variety/NJTW/NJTW5.html">NJTW5.html</a></td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="site-guide-group site-guide-group--extra" aria-labelledby="sg-nav-extra">
<h2 class="section-title" id="sg-nav-extra">extra/ 其餘</h2>
<p class="site-guide-folder-hint">未列頂欄主模板之草稿／實驗頁。主選單對應頁面已移至
<code>fallen/</code>、<code>member/</code>、<code>yellow-note/</code>、<code>variety/</code> 等資料夾；六六歌2
四入口之複本仍在本目錄。</p>
<div class="site-guide-nav-table-wrap">
<table class="site-guide-mini-table">
<thead>
<tr>
<th scope="col">檔案</th>
<th scope="col">備註</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="site-guide.html">site-guide.html</a></td>
<td>全站導覽（本頁）</td>
</tr>
<tr>
<td><a href="grok.html">grok.html</a></td>
<td>實驗單頁</td>
</tr>
<tr>
<td><a href="totoga2%20copy.html">totoga2 copy.html</a></td>
<td>複本總覽</td>
</tr>
<tr>
<td><a href="Untitled-1.html">Untitled-1.html</a></td>
<td>草稿</td>
</tr>
<tr>
<td><a href="sunghoon.html">sunghoon.html</a></td>
<td>—</td>
</tr>
<tr>
<td><a href="minister_ge.html">minister_ge.html</a></td>
<td>minister 長版備份（Yellow Note 小節亦列）</td>
</tr>
</tbody>
</table>
</div>
</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="../assets/js/particles.js"></script>
<script src="../assets/js/portal-nav.js"></script>
<script>
/* 全站導覽頁：頂欄改為同分頁開啟（他頁仍由 portal-nav 另開） */
(function () {
document.querySelectorAll("body.site-guide-page nav.portal-nav a[target=\"_blank\"]").forEach(function (a) {
a.removeAttribute("target");
a.removeAttribute("rel");
});
})();
</script>
</body>
fix 調整data-era=2016.05為三區塊
2026-05-16 16:12:14 +08:00
</html>
Reference in New Issue Copy Permalink