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-14 22:41:52 +08:00
parent 03597e1c53
commit 3032383ced
89 changed files with 1337 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.cursor/rules/portal-nav-rules.mdc
+1 -1
View File
@@ -14,7 +14,7 @@ alwaysApply: true
- **未經站主明確同意**，不得自行：從 `COMING_SOON_PAGES` 移除檔名、擴充 `INDEX_NAV_OPEN_HASHES`、在 `buildPortalNavInnerHTML` **新增**導覽項目、**刪除站主已同意列入頂欄**的項目、或把籌備中連結改成可點（**例外見下**）。
- 「檔案已在 repo 裡」**不代表**可以開放導覽或當成已上線。
- **`extra/site-guide.html`（全站導覽索引頁）**：頂欄 `<nav>` 使用 **`data-portal-nav-all-open`** 時，腳本**不套用**籌備中，頂欄內連結**全部可點**（僅此頁；站內其他頁**禁止**加此屬性）。
- 頂欄模板**不含**未同意掛列的頁（例如 `member.html`「六顆水晶」）；該頁仍可由 `site-guide` 卡片或網址直開。
- 頂欄模板**不含**未同意掛列的頁；該頁仍可由 `site-guide` 卡片或網址直開。
---
assets/css/index.css
+25
View File
@@ -186,6 +186,31 @@ section.archive-block p:last-child {
margin-bottom: 0;
}
/* 入坑歷程：手繪感雙線波浪黃底線（SVG 拼貼，略不規則） */
.home-page #start .fan-journey-wave {
display: inline;
padding: 0 0.04em 0.42em;
background-image: url("../images/fan-journey-wave-underline.svg");
background-repeat: repeat-x;
background-position: left 0 bottom 3px;
background-size: 280px 0.62em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.home-page #start .fan-journey-wave i {
margin: 0 0.18em;
color: rgba(180, 140, 0, 0.72);
font-size: 0.78em;
vertical-align: 0.08em;
}
@media (max-width: 520px) {
.home-page #start .fan-journey-wave {
background-size: min(220px, 100%) 0.58em;
}
}
/* 與首頁同欄寬：區塊內列表（minister_ge 等） */
.home-page .container>section .intro-text ul {
margin: 0.5rem 0 0;
assets/css/style.css
+501 -4
View File
@@ -133,6 +133,11 @@ nav a:hover {
flex: 1 1 200px;
}
.portal-nav>ul>li:hover,
.portal-nav>ul>li:focus-within {
z-index: 70;
}
.portal-nav>ul>li>a {
display: inline-flex;
flex-direction: column;
@@ -208,15 +213,205 @@ nav a:hover {
color: #3a300a;
}
.portal-nav a.nav-current {
/* 淪陷瞬間 · 全員發瘋：僅第一層選單向下；第二層起向右飛出（≥1025px），小螢幕改直向堆疊 */
.portal-nav .portal-submenu .portal-nav__subgroup {
position: relative;
z-index: 0;
margin-top: 4px;
padding-top: 6px;
border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.portal-nav .portal-submenu .portal-nav__subgroup:hover {
z-index: 4;
}
.portal-nav .portal-submenu .portal-nav__subgroup-head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 6px 26px 8px 10px;
position: relative;
color: #4a4a4a;
font-size: 0.84rem;
font-weight: 700;
letter-spacing: 0;
}
.portal-nav .portal-submenu .portal-nav__subgroup-head::after {
content: "\203A";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 1rem;
font-weight: 700;
opacity: 0.35;
pointer-events: none;
}
.portal-nav .portal-submenu .portal-nav__subgroup-head .portal-nav__sub {
font-weight: 500;
}
.portal-nav .portal-nav__subgroup>.portal-submenu-nested {
list-style: none;
margin: 0;
padding: 8px 10px;
display: none;
flex-direction: column;
gap: 4px;
position: absolute;
left: calc(100% + 3px);
top: 0;
min-width: 216px;
background: #fff;
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
border: 1px solid rgba(0, 0, 0, 0.06);
z-index: 96;
}
.portal-nav .portal-nav__subgroup:hover>.portal-submenu-nested,
.portal-nav .portal-nav__subgroup:focus-within>.portal-submenu-nested {
display: flex;
}
.portal-nav .portal-submenu-nested li {
padding-bottom: 0;
}
.portal-nav .portal-submenu .portal-nav__subgroup--nested {
position: relative;
z-index: 0;
margin: 0;
padding: 0;
border: 0;
}
.portal-nav .portal-submenu .portal-nav__subgroup--nested:hover {
z-index: 5;
}
.portal-nav .portal-submenu .portal-nav__subgroup-head--nested {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 8px 24px 8px 10px;
position: relative;
font-size: 0.82rem;
color: #4a4a4a;
font-weight: 700;
}
.portal-nav .portal-nav__subgroup-head--nested::after {
content: "\203A";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-size: 0.95rem;
font-weight: 700;
opacity: 0.35;
pointer-events: none;
}
.portal-nav .portal-submenu-nested--tier3 {
list-style: none;
margin: 0;
padding: 8px 10px;
display: none;
flex-direction: column;
gap: 2px;
position: absolute;
left: calc(100% + 3px);
top: 0;
min-width: 200px;
background: #fff;
border-radius: 12px;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
border: 1px solid rgba(0, 0, 0, 0.07);
z-index: 102;
}
.portal-nav .portal-nav__subgroup--nested:hover>.portal-submenu-nested--tier3,
.portal-nav .portal-nav__subgroup--nested:focus-within>.portal-submenu-nested--tier3 {
display: flex;
}
@media (max-width: 1024px) {
.portal-nav .portal-submenu .portal-nav__subgroup-head::after,
.portal-nav .portal-nav__subgroup-head--nested::after {
display: none;
}
.portal-nav .portal-nav__subgroup>.portal-submenu-nested,
.portal-nav .portal-nav__subgroup:hover>.portal-submenu-nested,
.portal-nav .portal-nav__subgroup:focus-within>.portal-submenu-nested {
position: static;
display: flex !important;
width: 100%;
min-width: 0;
margin: 8px 0 0;
padding: 8px 0 8px 12px;
border: 0;
border-left: 2px solid rgba(255, 204, 0, 0.45);
border-radius: 0;
box-shadow: none;
}
.portal-nav .portal-submenu-nested--tier3,
.portal-nav .portal-nav__subgroup--nested:hover>.portal-submenu-nested--tier3,
.portal-nav .portal-nav__subgroup--nested:focus-within>.portal-submenu-nested--tier3 {
position: static;
display: flex !important;
margin: 8px 0 0 10px;
padding: 6px 0 6px 12px;
border: 0;
border-left: 2px solid rgba(255, 180, 0, 0.38);
border-radius: 0;
box-shadow: none;
min-width: 0;
}
}
.portal-nav .portal-submenu>li+li>a[data-coming-soon="true"] {
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid rgba(0, 0, 0, 0.07);
}
/* 目前頁：僅頂層主欄用白字（深色頂欄）；子選單白底上若用白字會看不見 */
.portal-nav>ul>li>a.nav-current {
color: #ffffff;
}
.portal-nav a.nav-current .portal-nav__sub {
.portal-nav>ul>li>a.nav-current .portal-nav__sub {
color: rgba(255, 255, 255, 0.82);
opacity: 1;
}
.portal-nav .portal-submenu a.nav-current,
.portal-nav .portal-submenu-nested a.nav-current {
color: #3a300a;
background: rgba(255, 204, 0, 0.22);
}
.portal-nav .portal-submenu a.nav-current .portal-nav__sub,
.portal-nav .portal-submenu-nested a.nav-current .portal-nav__sub {
color: #5a4810;
opacity: 0.92;
}
.portal-nav .portal-submenu a.nav-current:hover,
.portal-nav .portal-submenu-nested a.nav-current:hover {
background: rgba(255, 204, 0, 0.32);
color: #2a2206;
}
.portal-nav>ul>li.coming-soon>a {
cursor: default;
opacity: 0.82;
@@ -484,7 +679,7 @@ section {
.mission-section .mission-row+.mission-row {
margin-top: 2.75rem;
padding-top: 2.75rem;
border-top: 1px solid rgba(255, 204, 0, 0.45);
/* border-top: 1px solid rgba(255, 204, 0, 0.45); */
}
.mission-section .mission-row__visual {
@@ -538,9 +733,10 @@ section {
border-bottom: 2px solid rgba(255, 204, 0, 0.5);
}
/*
.mission-section .mission-row--concept .mission-row__body>p {
text-align: center;
}
} */
.mission-section .mission-row--intro .logo-wrapper {
position: sticky;
@@ -975,6 +1171,33 @@ a {
margin: 0 0 10px;
}
/* 時間軸內文：外站連結（例：Disney+ 劇集） */
.merged-storyline .story-external-inline {
display: inline-flex;
align-items: center;
gap: 0.35em;
font-weight: 700;
color: var(--dark-yellow);
text-decoration: underline;
text-decoration-color: currentColor;
text-underline-offset: 0.22em;
text-decoration-thickness: 2px;
text-underline-position: from-font;
}
.merged-storyline .story-external-inline:hover,
.merged-storyline .story-external-inline:focus-visible {
color: var(--primary);
text-decoration-thickness: 2px;
}
.merged-storyline .story-external-inline i {
font-size: 0.78em;
opacity: 0.88;
line-height: 1;
flex-shrink: 0;
}
@media (max-width: 900px) {
/* 備註：手機版主軸維持在左側，避免鑽石與內容互相遮擋 */
@@ -1074,6 +1297,11 @@ footer a .mark_b {
line-height: 1;
}
.map-page .portal-nav>ul>li:hover,
.map-page .portal-nav>ul>li:focus-within {
z-index: 35;
}
.map-page .portal-nav>ul>li>a {
display: inline-flex;
flex-direction: column;
@@ -1133,6 +1361,76 @@ footer a .mark_b {
color: #3a300a;
}
.map-page .portal-nav .portal-submenu a.nav-current,
.map-page .portal-nav .portal-submenu-nested a.nav-current {
color: #3a300a;
background: rgba(255, 204, 0, 0.22);
}
.map-page .portal-nav .portal-submenu a.nav-current .portal-nav__sub,
.map-page .portal-nav .portal-submenu-nested a.nav-current .portal-nav__sub {
color: #5a4810;
opacity: 0.92;
}
.map-page .portal-nav .portal-submenu .portal-nav__subgroup-head {
align-items: flex-end;
text-align: right;
padding-left: 26px;
padding-right: 10px;
}
.map-page .portal-nav .portal-submenu .portal-nav__subgroup-head::after {
right: auto;
left: 10px;
}
.map-page .portal-nav .portal-nav__subgroup>.portal-submenu-nested {
left: auto;
right: calc(100% + 3px);
}
.map-page .portal-nav .portal-submenu-nested a {
align-items: flex-end;
text-align: right;
}
.map-page .portal-nav .portal-nav__subgroup-head--nested {
align-items: flex-end;
text-align: right;
padding-left: 24px;
padding-right: 10px;
}
.map-page .portal-nav .portal-nav__subgroup-head--nested::after {
right: auto;
left: 8px;
}
.map-page .portal-nav .portal-submenu-nested--tier3 {
left: auto;
right: calc(100% + 3px);
}
@media (max-width: 1024px) {
.map-page .portal-nav .portal-nav__subgroup>.portal-submenu-nested,
.map-page .portal-nav .portal-nav__subgroup:hover>.portal-submenu-nested,
.map-page .portal-nav .portal-nav__subgroup:focus-within>.portal-submenu-nested {
border-left: none;
border-right: 2px solid rgba(255, 204, 0, 0.45);
padding: 8px 12px 8px 0;
}
.map-page .portal-nav .portal-submenu-nested--tier3,
.map-page .portal-nav .portal-nav__subgroup--nested:hover>.portal-submenu-nested--tier3,
.map-page .portal-nav .portal-nav__subgroup--nested:focus-within>.portal-submenu-nested--tier3 {
border-left: none;
border-right: 2px solid rgba(255, 180, 0, 0.38);
padding: 6px 12px 6px 0;
}
}
.map-page .portal-nav>ul>li>a[data-coming-soon="true"]:hover,
.map-page .portal-nav>ul>li>a[data-coming-soon="true"]:focus-visible {
color: rgba(212, 196, 150, 0.95);
@@ -1886,6 +2184,26 @@ body.totoga2-page .ebook-back-link {
gap: 12px;
}
/* extra/totoga2 copy.html — 複本改為三獨立頁後的總覽；子頁共用 .totoga2-split-crossnav */
body.totoga2-page .totoga2-split-crossnav {
margin-top: 0.75rem;
}
body.totoga2-page .totoga2-copy-hub-main {
max-width: 960px;
margin: 0 auto 2rem;
padding: 0 14px;
}
body.totoga2-page .totoga2-copy-hub-nav {
margin-bottom: 2rem;
}
body.totoga2-page .totoga2-copy-hub-anchor-hint {
text-align: center;
font-size: 0.95rem;
}
/* extra/member.html — 黑白水晶交錯格（2×4）與懸賞令海報 */
body.member-crystal-page .member-crystal-main {
padding: 1.75rem 14px 3rem;
@@ -2160,6 +2478,185 @@ body.site-guide-page .site-guide-lead {
font-size: 1rem;
}
body.site-guide-page .site-guide-lead--short {
max-width: 52rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.25rem;
font-size: 0.95rem;
line-height: 1.65;
}
body.site-guide-page .site-guide-group--nav-hero {
margin-bottom: 2.25rem;
padding: clamp(14px, 2.5vw, 22px);
border-radius: 16px;
border: 1px solid rgba(255, 204, 0, 0.28);
background: linear-gradient(165deg, rgba(255, 252, 240, 0.95) 0%, #fff 55%);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}
body.site-guide-page .site-guide-group--nav-hero > .section-title {
margin-bottom: 0.5rem;
}
body.site-guide-page .site-guide-legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.25rem;
margin: 0 0 1rem;
font-size: 0.86rem;
color: #555;
}
body.site-guide-page .site-guide-legend__on {
color: #5c4810;
font-weight: 800;
}
body.site-guide-page .site-guide-legend__off {
color: #9a9a9a;
font-weight: 700;
}
body.site-guide-page .site-guide-nav-table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 1.25rem;
}
body.site-guide-page .site-guide-nav-table,
body.site-guide-page .site-guide-mini-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
line-height: 1.45;
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
body.site-guide-page .site-guide-nav-table caption.site-guide-nav-caption {
caption-side: top;
text-align: center;
padding: 0 0.5rem 0.65rem;
font-size: 0.8rem;
color: #777;
line-height: 1.4;
}
body.site-guide-page .site-guide-nav-table th,
body.site-guide-page .site-guide-nav-table td,
body.site-guide-page .site-guide-mini-table th,
body.site-guide-page .site-guide-mini-table td {
border: 1px solid rgba(0, 0, 0, 0.08);
padding: 0.55rem 0.65rem;
vertical-align: top;
text-align: left;
}
body.site-guide-page .site-guide-nav-table thead th,
body.site-guide-page .site-guide-mini-table thead th {
background: rgba(255, 220, 140, 0.35);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #4a3a10;
}
body.site-guide-page .site-guide-nav-table tbody tr:nth-child(even),
body.site-guide-page .site-guide-mini-table tbody tr:nth-child(even) {
background: rgba(255, 250, 235, 0.45);
}
body.site-guide-page .site-guide-nav-table td.site-guide-nav-desc {
font-size: 0.86rem;
line-height: 1.55;
color: #444;
vertical-align: top;
}
body.site-guide-page .site-guide-nav-table td.site-guide-nav-link-cell {
font-size: 0.78rem;
line-height: 1.45;
vertical-align: top;
word-break: break-word;
min-width: 7.5rem;
}
body.site-guide-page .site-guide-nav-table td.site-guide-nav-link-cell code {
font-size: 0.92em;
font-weight: 600;
}
body.site-guide-page .site-guide-nav-table a {
color: #5c4010;
font-weight: 800;
text-decoration: none;
}
body.site-guide-page .site-guide-nav-table a:hover,
body.site-guide-page .site-guide-mini-table a:hover {
text-decoration: underline;
}
body.site-guide-page .site-guide-mini-table a {
color: #5c4010;
font-weight: 700;
text-decoration: none;
}
body.site-guide-page .site-guide-nav-nolink {
color: #959595;
font-weight: 600;
}
body.site-guide-page .site-guide-mini-table th[scope="row"] {
width: 7rem;
background: rgba(0, 0, 0, 0.03);
font-weight: 700;
color: #555;
}
body.site-guide-page .site-guide-subh {
margin: 1.5rem 0 0.65rem;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
text-align: center;
color: #6a5a30;
}
body.site-guide-page .site-guide-grid--compact {
margin-top: 1rem;
grid-template-columns: minmax(0, min(100%, 40rem));
justify-content: center;
}
body.site-guide-page .site-guide-inline-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
margin: 0 0 0.75rem;
padding: 0;
list-style: none;
font-size: 0.92rem;
}
body.site-guide-page .site-guide-inline-links a {
font-weight: 700;
color: #5c4810;
}
body.site-guide-page .site-guide-fine-print--center {
text-align: center;
margin-top: 0.25rem;
}
body.site-guide-page .site-guide-group {
margin-bottom: 2.75rem;
}
assets/images/fan-journey-wave-underline.svg
+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 20" width="320" height="20" preserveAspectRatio="none" aria-hidden="true">
<path fill="none" stroke="#c9a000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
d="M2 13c11-9 23 8 36-1s28-7 42 5 30-12 46-2 34 9 50-1 26-6 40 4 22-8 36 2 28 5 42-3"/>
<path fill="none" stroke="#f5d24a" stroke-width="1.5" stroke-linecap="round" opacity="0.92"
d="M0 14c16-10 30 9 48-2s34-5 52 6 38-11 56-1 30 7 48-2 36-4 52 5 28-7 40 3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 517 B

assets/images/未整理/04a3f75e5eeb5c819ca3db404f7db57a.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

assets/images/未整理/05204AE42334F80F601C530581C38A40A46157A8.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 312 KiB

assets/images/未整理/30d6fb10abe6e2245e34947c497dd0b7.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

assets/images/未整理/37a553b57094a8107c32cb6997f2586c.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

assets/images/未整理/39c9d29c04768f72577ccebcb542f374.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

assets/images/未整理/4886e6cac3b44a76fff0bf7b21c41d86.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

assets/images/未整理/63ea94a15b8ca16c26907483f7436df3.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

assets/images/未整理/7130B2BA-AC7D-48A7-A5BB-78B3D52F8E36-364-00000038FB3CDD1A.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB

assets/images/未整理/76b3c9c6ff38d996d15b9723f541bce5.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

assets/images/未整理/894A688A-C6A9-494E-9A50-DFE75174DF13-364-0000003780D3C853.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 505 KiB

assets/images/未整理/9EC7483915A7E35BEF8296B28182733E17B2E612.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 328 KiB

assets/images/未整理/9bd053973005b4281d31aa8a6d01a286.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

assets/images/未整理/B2471DD6A203D85011906000C0523CC7FB967678.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 319 KiB

assets/images/未整理/BBF94EB1-651D-487E-986A-66E2A130D9F8-364-0000003A2890811D.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 174 KiB

assets/images/未整理/CA53E8335F8A69BEC14D5F017B77BED6BBD8CD22.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 366 KiB

assets/images/未整理/D0B3979B-7E73-42C9-A23E-646B6755DDDA-364-00000039863E286E.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 322 KiB

assets/images/未整理/IMG_0053.HEIC
BIN
View File
Binary file not shown.
assets/images/未整理/IMG_0054.HEIC
BIN
View File
Binary file not shown.
assets/images/未整理/IMG_0056.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 KiB

assets/images/未整理/IMG_0372.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

assets/images/未整理/IMG_0373.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 151 KiB

assets/images/未整理/IMG_0562.PNG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.2 MiB

assets/images/未整理/IMG_0570.PNG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 MiB

assets/images/未整理/IMG_0571.PNG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 MiB

assets/images/未整理/IMG_0572.PNG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 MiB

assets/images/未整理/IMG_0573.PNG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 MiB

assets/images/未整理/IMG_0574.PNG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 MiB

assets/images/未整理/IMG_0575.PNG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 MiB

assets/images/未整理/IMG_0576.PNG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 MiB

assets/images/未整理/IMG_0577.PNG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 MiB

assets/images/未整理/IMG_0578.PNG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 MiB

assets/images/未整理/IMG_0579.PNG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 MiB

assets/images/未整理/IMG_0580.PNG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 MiB

assets/images/未整理/f8ce83ca8d33a6720a506ba099872790.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

assets/images/未整理/tumblr_oimsut6IOc1veto16o1_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

assets/images/未整理/tumblr_oimsut6IOc1veto16o2_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

assets/images/未整理/tumblr_oimsut6IOc1veto16o3_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

assets/images/未整理/tumblr_oimsut6IOc1veto16o4_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

assets/images/未整理/tumblr_oimsut6IOc1veto16o5_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

assets/images/未整理/tumblr_ojux71dF5R1vtw6dho1_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 595 KiB

assets/images/未整理/tumblr_ojux71dF5R1vtw6dho2_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 723 KiB

assets/images/未整理/tumblr_ojux71dF5R1vtw6dho3_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 562 KiB

assets/images/未整理/tumblr_ojux71dF5R1vtw6dho4_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 634 KiB

assets/images/未整理/tumblr_ojux71dF5R1vtw6dho5_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 377 KiB

assets/images/未整理/tumblr_ojux71dF5R1vtw6dho6_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 177 KiB

assets/images/未整理/tumblr_ojux71dF5R1vtw6dho7_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 220 KiB

assets/images/未整理/tumblr_ola88gtptJ1qe1sypo1_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 262 KiB

assets/images/未整理/tumblr_ola88gtptJ1qe1sypo2_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 336 KiB

assets/images/未整理/tumblr_ola88gtptJ1qe1sypo3_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 195 KiB

assets/images/未整理/tumblr_op3shbL4YT1vi4vzmo2_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

assets/images/未整理/tumblr_op3shbL4YT1vi4vzmo3_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 212 KiB

assets/images/未整理/tumblr_op3shbL4YT1vi4vzmo4_540.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

assets/images/未整理/tumblr_op3shbL4YT1vi4vzmo5_r1_1280.PNG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 732 KiB

assets/images/未整理/tumblr_opgrmpu0iS1vkx4hso6_400.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

assets/images/未整理/tumblr_orcoub1kcL1vkx4hso3_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 KiB

assets/images/未整理/tumblr_orkp92WC5h1veto16o2_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

assets/images/未整理/tumblr_orkp92WC5h1veto16o4_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

assets/images/未整理/tumblr_p2fd4lyE0g1wkt8kzo6_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 161 KiB

assets/images/未整理/新增資料夾 (2)/tumblr_orkp92WC5h1veto16o1_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

assets/images/未整理/新增資料夾 (2)/tumblr_orkp92WC5h1veto16o3_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

assets/images/未整理/新增資料夾 (2)/tumblr_orkp92WC5h1veto16o5_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

assets/images/未整理/新增資料夾 (3)/tumblr_or6hvqEfCM1veto16o1_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 132 KiB

assets/images/未整理/新增資料夾 (3)/tumblr_or6hvqEfCM1veto16o2_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

assets/images/未整理/新增資料夾 (3)/tumblr_or6hvqEfCM1veto16o6_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

assets/images/未整理/新增資料夾 (3)/tumblr_or6hvqEfCM1veto16o7_1280.JPG
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 KiB

assets/images/未整理/新增資料夾/檔案_028.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

assets/images/未整理/新增資料夾/檔案_029.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

assets/images/未整理/新增資料夾/檔案_030.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

assets/images/未整理/新增資料夾/檔案_031.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

assets/images/未整理/新增資料夾/檔案_032.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

assets/images/未整理/新增資料夾/檔案_033.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

assets/images/未整理/新增資料夾/檔案_034.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

assets/images/未整理/新增資料夾/檔案_035.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

assets/images/未整理/新增資料夾/檔案_036.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

assets/images/未整理/新增資料夾/檔案_037.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

assets/images/未整理/檔案_000.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 MiB

assets/images/未整理/檔案_023.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 447 KiB

assets/js/portal-nav.js
+44 -27
View File
@@ -1,7 +1,7 @@
(() => {
/**
* ── 導覽「尚未開放」連結 ─────────────────────────────────────────
* ① 頂欄 `buildPortalNavInnerHTML`：僅列站主同意掛在頂欄的分類（**不含**未同意的頁，例如 `member`「六顆水晶」）。
* ① 頂欄 `buildPortalNavInnerHTML`：僅列站主同意掛在頂欄的分類（**不含**未同意的頁）。
* ② `COMING_SOON_PAGES`／`INDEX_NAV_OPEN_HASHES`：在 Set／白名單外＝籌備中（`href` 改 `#`）。
* ③ **唯一例外**：`extra/site-guide.html` 的 `<nav data-portal-nav data-portal-nav-all-open>` **不套用**籌備中（索引頁預覽用，頂欄連結全可點）；**其他任何頁**不得加 `data-portal-nav-all-open`。
* ④ 文案 NAV_SOON_PHRASES：滑過／聚焦時隨機一句；無障礙固定「尚無開放」。
@@ -19,6 +19,9 @@
"夢想航行中", // 未來規劃中，期待水晶男孩的下一個十年
];
/** 主選單欄 `mouseleave` 後延遲關閉（ms），方便移入子選單或右側飛出層，避免略偏就關閉 */
const SUBMENU_CLOSE_DELAY_MS = 480;
function pickSoonPhrase() {
return NAV_SOON_PHRASES[Math.floor(Math.random() * NAV_SOON_PHRASES.length)];
}
@@ -31,17 +34,17 @@
}
const COMING_SOON_PAGES = new Set([
"variety.html",
"njtw5.html",
"concert.html",
"albums.html",
"map.html",
"minister.html",
"minister_ge.html",
]);
/** 首頁僅下列錨點可點；其餘（如 #story）維持籌備中，須站主同意後才可加入 */
const INDEX_NAV_OPEN_HASHES = new Set(["#origin", "#start", "#mission", "#timeline"]);
/**
* 首頁僅下列錨點可點；其餘（如 #story）維持籌備中，須站主同意後才可加入。
* 空字串：連到 index.html 且無 # 片段時視為可點（淪陷瞬間 · 初心與軌跡）。
*/
const INDEX_NAV_OPEN_HASHES = new Set(["", "#origin", "#start", "#mission", "#timeline"]);
function normalizePageKey(href) {
if (!href || href === "#") return "";
@@ -83,6 +86,7 @@
}
link.setAttribute("href", "#");
link.dataset.portalNavSoonRoll = "1";
}
function linkShouldBeComingSoon(href, pageKey, pageKeysSoon) {
@@ -153,30 +157,35 @@
}
}
/** 全站導覽 HTML — `rp` 為站根相對前綴；僅修改此模板即可同步所有頁面 */
/** 全站導覽 HTML — `rp` 為站根相對前綴；僅修改此模板即可同步所有頁面
* 五主項：淪陷瞬間（全員發瘋巢狀）、完整的六顆（member）、現場的震撼、黃色留聲機、Yellow Note（minister、map）；variety 僅經淪陷子選單進入。 */
function buildPortalNavInnerHTML(rp) {
return `
<a class="logo" target="_blank" rel="noopener noreferrer" href="${rp}index.html"><img src="${rp}assets/images/logov.svg" alt="SECHSKIES Logo"></a>
<ul>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}index.html#origin"><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">六顆永恆的水晶 · 左右命運的傳奇</span></a>
<ul class="portal-submenu">
<li><a target="_blank" rel="noopener noreferrer" href="${rp}index.html#start"><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#mission"><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#timeline"><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#story"><span class="portal-nav__label">傳奇的轉折</span><span class="portal-nav__sub">重逢與敘事主線</span></a></li>
</ul>
</li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}variety/variety.html"><span class="portal-nav__label">瘋子與天才</span><span class="portal-nav__sub">EUN JI-WON × VARIETY GRAVITY</span></a>
<ul class="portal-submenu">
<li><a target="_blank" rel="noopener noreferrer" href="${rp}variety/variety.html#variety"><span class="portal-nav__label">瘋狂出演中</span><span class="portal-nav__sub">綜藝鏡頭與名場面</span></a></li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}variety/variety.html#stage"><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">我們現在：從好奇觀看到淪陷的起點</span></a></li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}extra/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">全員發瘋</span><span class="portal-nav__sub">原來我是個正常人啊！團綜與失控現場</span></span>
<ul class="portal-submenu-nested" aria-label="全員發瘋">
<li><a target="_blank" rel="noopener noreferrer" href="${rp}variety/variety.html#stage"><span class="portal-nav__label">隊長帶弟弟</span><span class="portal-nav__sub">控場與隊內互動</span></a></li>
<li class="portal-nav__subgroup portal-nav__subgroup--nested">
<span class="portal-nav__subgroup-head portal-nav__subgroup-head--nested"><span class="portal-nav__label">各自暴走</span><span class="portal-nav__sub">獨立內頁籌備中</span></span>
<ul class="portal-submenu-nested portal-submenu-nested--tier3" aria-label="各自暴走">
<li><a target="_blank" rel="noopener noreferrer" href="${rp}variety/NJTW/NJTW5.html"><span class="portal-nav__label">新西遊記</span><span class="portal-nav__sub">成員介紹 · MEMBER GUIDE</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}extra/member.html"><span class="portal-nav__label">完整的六顆</span><span class="portal-nav__sub">六顆水晶 · 黑白分流</span></a></li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}concert/concert.html"><span class="portal-nav__label">現場的震撼</span><span class="portal-nav__sub">SECHSKIES CONCERT ARCHIVE</span></a>
<ul class="portal-submenu">
<li><a target="_blank" rel="noopener noreferrer" href="${rp}concert/concert.html#stage-now"><span class="portal-nav__label">永恆的重逢</span><span class="portal-nav__sub">近年與重聚舞台</span></a></li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}concert/concert.html#stage-past"><span class="portal-nav__label">燦爛的最初</span><span class="portal-nav__sub">全盛期經典場次</span></a></li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}concert/concert.html"><span class="portal-nav__label">集結水晶</span><span class="portal-nav__sub">團體演唱會</span></a></li>
<li><a href="#" data-coming-soon="true" aria-disabled="true" aria-label="隊長的氣場，尚無開放"><span class="portal-nav__label">隊長的氣場</span><span class="portal-nav__sub">個人見面會與演唱會</span></a></li>
</ul>
</li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}albums/albums.html"><span class="portal-nav__label">黃色留聲機</span><span class="portal-nav__sub">YELLOW PHONOGRAPH</span></a>
@@ -185,10 +194,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>
</ul>
</li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}map/map.html"><span class="portal-nav__label">聖地巡禮</span><span class="portal-nav__sub">SECHSKIES TAIWAN ARCHIVE</span></a>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}map/map.html"><span class="portal-nav__label">Yellow Note</span><span class="portal-nav__sub">視覺進化論 · 聖地巡禮</span></a>
<ul class="portal-submenu">
<li><a target="_blank" rel="noopener noreferrer" href="${rp}map/map.html#taipei"><span class="portal-nav__label">台北聖地</span><span class="portal-nav__sub">行程與地點整理</span></a></li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}map/map.html#global"><span class="portal-nav__label">海外遠征</span><span class="portal-nav__sub">跨國足跡</span></a></li>
<li><a target="_blank" rel="noopener noreferrer" href="${rp}extra/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}map/map.html"><span class="portal-nav__label">聖地巡禮</span><span class="portal-nav__sub">SECHSKIES TAIWAN ARCHIVE</span></a></li>
</ul>
</li>
</ul>
@@ -209,7 +218,8 @@
const currentPage = window.location.pathname.split("/").pop() || "index.html";
navs.forEach((nav) => {
const items = Array.from(nav.querySelectorAll("li"));
/* 僅頂層主欄；子選單內巢狀 li 不綁 open，否則會關閉整欄下拉 */
const items = Array.from(nav.querySelectorAll(":scope > ul > li"));
const soonLinks = Array.from(nav.querySelectorAll('a[data-coming-soon="true"]'));
const blockNavigation = (event) => {
@@ -219,6 +229,13 @@
soonLinks.forEach((link) => {
link.addEventListener("click", blockNavigation);
link.addEventListener("auxclick", blockNavigation);
if (!link.dataset.portalNavSoonRoll) {
link.dataset.portalNavSoonRoll = "1";
const onSoonInteract = () => rollSoonLabel(link);
link.addEventListener("pointerenter", onSoonInteract);
link.addEventListener("focus", onSoonInteract);
link.addEventListener("touchstart", onSoonInteract, { passive: true });
}
});
items.forEach((item) => {
@@ -237,7 +254,7 @@
};
const scheduleClose = () => {
closeTimer = window.setTimeout(() => item.classList.remove("open"), 180);
closeTimer = window.setTimeout(() => item.classList.remove("open"), SUBMENU_CLOSE_DELAY_MS);
};
item.addEventListener("mouseenter", openItem);
@@ -267,8 +284,8 @@
}
});
const topLevelLinks = Array.from(nav.querySelectorAll(":scope > ul > li > a[href]"));
topLevelLinks.forEach((link) => {
const navLinks = Array.from(nav.querySelectorAll("a[href]")).filter((link) => !link.classList.contains("logo"));
navLinks.forEach((link) => {
const fallback = link.getAttribute("href");
const source = link.dataset.originalHref || fallback;
if (!source || source === "#") return;
extra/site-guide.html
+335 -176
View File
@@ -8,6 +8,63 @@
<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;
}
</style>
</head>
<body class="site-guide-page">
@@ -15,7 +72,7 @@
<div class="header-inner">
<h1 class="main-title">全站導覽</h1>
<div class="subtitle-wrap">
<span class="sub-title">SITE MAP · 頁面索引</span>
<span class="sub-title">SITE MAP · 一表為主</span>
</div>
</div>
</header>
@@ -25,212 +82,314 @@
<canvas id="particles"></canvas>
<main class="content-container site-guide-main">
<p class="site-guide-lead">
以下索引<strong>依頂欄全站導覽</strong>的分類與順序排列（與 <code>assets/js/portal-nav.js</code> 一致），並盡量對齊<strong>資料夾</strong>（站根 <code>index.html</code>、<code>variety/</code>、<code>concert/</code>、<code>albums/</code>、<code>map/</code>）。
每張卡片含<span class="mark_b">連結</span>、<span class="mark_b">標題</span>（<code>&lt;title&gt;</code>）、<span class="mark_b">錨點</span>。
<span class="mark_b">本頁頂欄</span>已設 <code>data-portal-nav-all-open</code>，連結全可點；一般內容頁頂欄仍依站主籌備中設定。
此頁<strong>未</strong>掛在頂欄選單內，請自行書籤或開啟 <code>extra/site-guide.html</code>。
<p class="site-guide-lead site-guide-lead--short">
棕字可點、灰字無連結。本頁頂欄全開；他頁依 <code>portal-nav.js</code>。
</p>
<!-- 順序與 portal-nav 主選單一致：淪陷瞬間 → 瘋子與天才 → 現場的震撼 → 黃色留聲機 → 聖地巡禮；其餘為 extra/ 未列頂欄 -->
<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"><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"><a href="totoga2.html">傳奇的轉折</a></span></td>
<td class="site-guide-nav-desc">六六歌2 紀實長頁：影片、電子書、長文與章節錨點。</td>
<td class="site-guide-nav-link-cell"><a href="totoga2.html"><code>extra/totoga2.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#stage">隊長帶弟弟</a></span></td>
<td class="site-guide-nav-desc">綜藝頁「隊長的氣場」段：控場、團內互動與後續切片預留。</td>
<td class="site-guide-nav-link-cell"><a href="../variety/variety.html#stage"><code>variety/variety.html#stage</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.html">完整的六顆</a></span></td>
<td class="site-guide-nav-desc">黑／白水晶六人海報板、團名典故與成員靜態介紹。</td>
<td class="site-guide-nav-link-cell"><a href="member.html"><code>extra/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="../map/map.html">Yellow Note</a></span></td>
<td class="site-guide-nav-desc">台灣行程表、成員行程篩選、搜尋與地圖主體。</td>
<td class="site-guide-nav-link-cell"><a href="../map/map.html"><code>map/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="minister.html">視覺進化論</a></span></td>
<td class="site-guide-nav-desc">「從好奇到全端」自述與時間軸式章節段落。</td>
<td class="site-guide-nav-link-cell"><a href="minister.html"><code>extra/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="../map/map.html">聖地巡禮</a></span></td>
<td class="site-guide-nav-desc">台灣行程表、成員行程篩選、搜尋與地圖主體。</td>
<td class="site-guide-nav-link-cell"><a href="../map/map.html"><code>map/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>map</code>、<code>minister</code>、<code>minister_ge</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>
<p class="site-guide-folder-hint">站根 · 對應 <code>index.html#origin</code> 與子選單錨點</p>
<div class="site-guide-grid">
<article class="site-guide-card">
<h3><a href="../index.html">index.html</a> <span class="site-guide-path">（站根）</span></h3>
<p class="site-guide-meta">標題列：<cite>SECHSKIES - 水晶男孩傳奇介紹</cite></p>
<p class="site-guide-note">主選單「淪陷瞬間」主連結；子項與導覽子選單用語一致。</p>
<h4>子選單錨點（與頂欄一致）</h4>
<ul>
<li><a href="../index.html#origin">#origin</a> — 淪陷瞬間 · 主選單主連結（Hero）</li>
<li><a href="../index.html#start">#start</a> — 好奇的開端 · 從好奇觀看到淪陷的起點</li>
<li><a href="../index.html#mission">#mission</a> — 成立的初衷 · 推廣部與黃色奇蹟</li>
<li><a href="../index.html#timeline">#timeline</a> — 跨時空軌跡 · 年表與作品節點</li>
<li><a href="../index.html#story">#story</a> — 傳奇的轉折 · 重逢與敘事主線</li>
</ul>
</article>
<article class="site-guide-card site-guide-card--totoga2">
<h3><a href="totoga2.html">extra/totoga2.html</a> <span class="site-guide-path">（敘事延伸）</span></h3>
<p class="site-guide-meta">標題列：<cite>水晶男孩｜無限挑戰六六歌2 — 紀實電子書</cite></p>
<p class="site-guide-note">呼應首頁「傳奇的轉折」軸線；檔案在 <code>extra/</code>，頂欄未單獨列項。</p>
<div class="site-guide-totoga2-panel">
<p class="site-guide-kicker">怎麼開</p>
<ul class="site-guide-modes site-guide-modes--totoga2">
<li><a href="totoga2.html">影片模式</a> — 預設（三集 Bilibili）</li>
<li><a href="totoga2.html#ebook">電子書模式</a> — FlipHTML5 全螢幕</li>
<li><a href="totoga2.html#challenge">紀實長文</a> — 自「無限挑戰」章起</li>
</ul>
<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.html">totoga2.html</a></td>
<td>六六歌2 整合</td>
</tr>
</tbody>
</table>
</div>
<div class="site-guide-totoga2-panel">
<p class="site-guide-kicker">長文章節捷徑</p>
<nav class="site-guide-chapter-nav" aria-label="totoga2 紀實長文章節">
<div class="site-guide-grid site-guide-grid--compact">
<article class="site-guide-card site-guide-card--totoga2">
<h3><a href="totoga2.html">totoga2 模式</a></h3>
<ul class="site-guide-inline-links">
<li><a href="totoga2.html">影片</a></li>
<li><a href="totoga2.html#ebook">電子書</a></li>
<li><a href="totoga2.html#challenge">長文</a></li>
</ul>
<nav class="site-guide-chapter-nav" aria-label="totoga2 章節">
<a href="totoga2.html#challenge">無限挑戰</a>
<a href="totoga2.html#ssg2">六六歌第二季</a>
<a href="totoga2.html#ssg2">六六歌2</a>
<a href="totoga2.html#sechskies-profile">水晶男孩</a>
<a href="totoga2.html#gather">召集</a>
<a href="totoga2.html#negotiate">正式交涉</a>
<a href="totoga2.html#negotiate">交涉</a>
<a href="totoga2.html#variables">變數</a>
<a href="totoga2.html#surprise">驚喜</a>
<a href="totoga2.html#final-stage">登場</a>
</nav>
</div>
<p class="site-guide-fine-print">舊檔 <code>ssg2-ebook.html</code>、<code>chronicle.html</code> 已併入本頁。</p>
</article>
</div>
</section>
<section class="site-guide-group" aria-labelledby="sg-nav-variety">
<h2 class="section-title" id="sg-nav-variety">瘋子與天才 <span class="site-guide-nav-sub">EUN JI-WON × VARIETY GRAVITY</span></h2>
<p class="site-guide-folder-hint">資料夾 <code>variety/</code> · 對應頂欄第二主項</p>
<div class="site-guide-grid">
<article class="site-guide-card">
<h3><a href="../variety/variety.html">variety/variety.html</a></h3>
<p class="site-guide-meta">標題列：<cite>水晶男孩｜瘋子與天才</cite></p>
<h4>子選單錨點（與頂欄一致）</h4>
<ul>
<li><a href="../variety/variety.html#variety">#variety</a> — 瘋狂出演中 · 綜藝鏡頭與名場面</li>
<li><a href="../variety/variety.html#stage">#stage</a> — 隊長的氣場 · 控場與隊內互動</li>
</ul>
</article>
<article class="site-guide-card">
<h3><a href="../variety/NJTW/NJTW5.html">variety/NJTW/NJTW5.html</a></h3>
<p class="site-guide-meta">標題列：<cite>新西遊記：成員介紹</cite></p>
<p class="site-guide-note">頂欄「瘋子與天才」子選單第三項：新西遊記 · MEMBER GUIDE</p>
</article>
<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.html">extra/member.html</a></td>
</tr>
<tr>
<th scope="row">錨點</th>
<td><a href="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">現場的震撼 <span class="site-guide-nav-sub">SECHSKIES CONCERT ARCHIVE</span></h2>
<p class="site-guide-folder-hint">資料夾 <code>concert/</code> · 對應頂欄第三主項</p>
<div class="site-guide-grid">
<article class="site-guide-card">
<h3><a href="../concert/concert.html">concert/concert.html</a></h3>
<p class="site-guide-meta">標題列：<cite>SECHSKIES Concert Archive</cite></p>
<h4>子選單錨點（與頂欄一致）</h4>
<ul>
<li><a href="../concert/concert.html#stage-now">#stage-now</a> — 永恆的重逢 · 近年與重聚舞台</li>
<li><a href="../concert/concert.html#stage-past">#stage-past</a> — 燦爛的最初 · 全盛期經典場次</li>
</ul>
</article>
<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">黃色留聲機 <span class="site-guide-nav-sub">YELLOW PHONOGRAPH</span></h2>
<p class="site-guide-folder-hint">資料夾 <code>albums/</code> · 對應頂欄第四主項；歌詞單頁檔在 <code>extra/</code>，主題歸典藏</p>
<div class="site-guide-grid">
<article class="site-guide-card">
<h3><a href="../albums/albums.html">albums/albums.html</a></h3>
<p class="site-guide-meta">標題列：<cite>水晶男孩｜黃色留聲機</cite></p>
<h4>子選單錨點（與頂欄一致）</h4>
<ul>
<li><a href="../albums/albums.html#new">#new</a> — 啟動新篇章 · 重啟後作品與單曲</li>
<li><a href="../albums/albums.html#classic">#classic</a> — 輝煌全盛期 · 1997–1999 年表</li>
</ul>
</article>
<article class="site-guide-card">
<h3><a href="lyrics.html">extra/lyrics.html</a> <span class="site-guide-path">（同區索引）</span></h3>
<p class="site-guide-meta">標題列：<cite>세 단어 (THREE WORDS) — SECHSKIES</cite></p>
<p class="site-guide-note"><code>&lt;html lang="ko"&gt;</code>；歌詞＋ YouTube 嵌入；頂欄未單獨列項。</p>
<h4>結構</h4>
<ul>
<li><code>.lyrics-layout</code> — 主標＋表格雙欄</li>
</ul>
</article>
<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-map">
<h2 class="section-title" id="sg-nav-map">聖地巡禮 <span class="site-guide-nav-sub">SECHSKIES TAIWAN ARCHIVE</span></h2>
<p class="site-guide-folder-hint">資料夾 <code>map/</code> · 對應頂欄第五主項</p>
<div class="site-guide-grid">
<article class="site-guide-card">
<h3><a href="../map/map.html">map/map.html</a></h3>
<p class="site-guide-meta">標題列：<cite>SECHSKIES 台灣行程地圖</cite></p>
<h4>子選單錨點（與頂欄一致）</h4>
<ul>
<li><a href="../map/map.html#taipei">#taipei</a> — 台北聖地 · 行程與地點整理</li>
<li><a href="../map/map.html#global">#global</a> — 海外遠征 · 跨國足跡</li>
</ul>
</article>
<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="minister.html">minister.html</a></td>
</tr>
<tr>
<th scope="row">地圖</th>
<td><a href="../map/map.html">map.html</a> · <a href="../map/map.html#taipei">#taipei</a> · <a href="../map/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> · <a href="../variety/variety.html#stage">#stage</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">其他 HTML（<code>extra/</code> · 頂欄未列）</h2>
<p class="site-guide-folder-hint">仍在本站 repo，但未出現在 <code>buildPortalNavInnerHTML</code>；請由此索引或書籤開啟。</p>
<div class="site-guide-grid">
<article class="site-guide-card">
<h3><a href="grok.html">grok.html</a></h3>
<p class="site-guide-meta">標題列：<cite>水晶男孩 SECHSKIES | 永恆的六顆水晶</cite></p>
<p class="site-guide-note">單頁多區塊（實驗／簡報）。</p>
<h4>錨點</h4>
<ul>
<li><a href="grok.html#story">#story</a></li>
<li><a href="grok.html#members">#members</a></li>
<li><a href="grok.html#discography">#discography</a></li>
<li><a href="grok.html#now">#now</a></li>
</ul>
</article>
<article class="site-guide-card">
<h3><a href="totoga2%20copy.html">totoga2 copy.html</a> <span class="site-guide-path">（檔名含空白）</span></h3>
<p class="site-guide-meta">標題列：<cite>水晶男孩｜無限挑戰六六歌2 — 紀實電子書</cite>（與 <a href="totoga2.html">totoga2.html</a> 相同）</p>
<p class="site-guide-note">六六歌 2 頁之<strong>複本／備份</strong>；版型與主檔相近。正式連結與索引敘事請以 <code>totoga2.html</code> 為準；若不再需要可刪除此檔。</p>
</article>
<article class="site-guide-card">
<h3><a href="Untitled-1.html">Untitled-1.html</a> <span class="site-guide-path">（未命名草稿）</span></h3>
<p class="site-guide-meta">標題列：<cite>Document</cite></p>
<p class="site-guide-note">編輯器暫存草稿；<code>&lt;head&gt;</code> 內 <code>meta viewport</code> 與標記<strong>毀損</strong>，預覽可能異常。曾含跨頁 JPG 容器示意，尚未整理成正式頁。</p>
</article>
<article class="site-guide-card">
<h3><a href="member.html">member.html</a></h3>
<p class="site-guide-meta">標題列：<cite>水晶男孩｜六顆水晶 · 黑白分流</cite></p>
<h4>錨點</h4>
<ul>
<li><a href="member.html#crystal-board">#crystal-board</a></li>
</ul>
</article>
<article class="site-guide-card">
<h3><a href="sunghoon.html">sunghoon.html</a></h3>
<p class="site-guide-meta">標題列：<cite>水晶男孩｜消失的真相</cite></p>
<h4>錨點</h4>
<ul>
<li><a href="sunghoon.html#truth">#truth</a></li>
<li><a href="sunghoon.html#voice">#voice</a></li>
</ul>
</article>
<article class="site-guide-card">
<h3><a href="minister.html">minister.html</a></h3>
<p class="site-guide-meta">標題列：<cite>水晶男孩推廣部｜視覺進化論</cite></p>
<p class="site-guide-note">圖檔 <code>assets/images/minister/</code></p>
<h4>錨點</h4>
<ul>
<li><a href="minister.html#intro">#intro</a></li>
<li><a href="minister.html#slant">#slant</a></li>
<li><a href="minister.html#journey">#journey</a></li>
<li><a href="minister.html#journey-2016">#journey-2016</a></li>
<li><a href="minister.html#journey-2017">#journey-2017</a></li>
<li><a href="minister.html#journey-now">#journey-now</a></li>
</ul>
</article>
<article class="site-guide-card">
<h3><a href="minister_ge.html">minister_ge.html</a></h3>
<p class="site-guide-meta">標題列：<cite>水晶男孩推廣部｜視覺進化論：認真魔人的進化之路</cite></p>
<p class="site-guide-note">備份／改稿用長版。</p>
<h4>錨點</h4>
<ul>
<li><a href="minister_ge.html#intro">#intro</a></li>
<li><a href="minister_ge.html#identity">#identity</a></li>
<li><a href="minister_ge.html#evolution">#evolution</a></li>
<li><a href="minister_ge.html#journey">#journey</a></li>
<li><a href="minister_ge.html#training">#training</a></li>
<li><a href="minister_ge.html#tech-stack">#tech-stack</a></li>
</ul>
</article>
<h2 class="section-title" id="sg-nav-extra">extra/ 其餘</h2>
<p class="site-guide-folder-hint">未列頂欄主模板；<code>member</code>／<code>totoga2</code>／<code>minister</code> 已見上表。</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="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="totoga2-copy-video.html">…-video</a> · <a href="totoga2-copy-ebook.html">…-ebook</a> · <a href="totoga2-copy-timeline.html">…-timeline</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 長版備份</td>
</tr>
</tbody>
</table>
</div>
</section>
</main>
extra/totoga2 copy.html
+15 -151
View File
@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水晶男孩｜無限挑戰六六歌2 — 紀實電子書</title>
<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">
@@ -13,7 +13,6 @@
<body class="ebook-ssg2-page totoga2-page">
<header class="map-archive-header">
<div class="header-inner">
<!-- 核心特輯名稱 -->
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
<div class="main-content-title">
@@ -22,7 +21,7 @@
</div>
<div class="subtitle-wrap">
<span class="sub-title">INFINITE CHALLENGE · SIX SONGS 2 — E-BOOK</span>
<span class="sub-title">INFINITE CHALLENGE · SIX SONGS 2 — 複本導覽</span>
<span class="event-date">APRIL 14, 2016</span>
</div>
</div>
@@ -32,163 +31,29 @@
<canvas id="particles"></canvas>
<div class="totoga2-hub-controls content-container" role="tablist" aria-label="六六歌2 內容模式">
<button type="button" class="mode-btn totoga2-hub-btn active" data-totoga-hub="video">影片模式</button>
<button type="button" class="mode-btn totoga2-hub-btn" data-totoga-hub="ebook">電子書模式</button>
<button type="button" class="mode-btn totoga2-hub-btn" data-totoga-hub="reader">紀實長文（時間軸＋長卷）</button>
</div>
<!-- 影片：上／中／下三集（Bilibili 嵌入；中／下可替換 bvid） -->
<div class="totoga2-hub-panel content-container ebook-main" data-totoga-panel="video">
<section class="ebook-intro section" aria-label="影片三集">
<h2 class="section-title">節目影片</h2>
<main class="content-container ebook-main totoga2-copy-hub-main">
<section class="ebook-intro section" aria-labelledby="totoga2-copy-hub-title">
<h2 class="section-title" id="totoga2-copy-hub-title">六六歌2 複本 · 三頁分開</h2>
<p class="ebook-intro-lead">
以下為 Bilibili 嵌入播放器（16：9）。若無法播放，請至站內搜尋同一 BV 號；中集、下集請將 iframe 的 <code>bvid</code> 換成你的分集連結。
原先單頁以按鈕切換「影片／電子書／時間軸＋長文」；此複本改為<strong>三個獨立 HTML</strong>（檔名無空白，較利分享與書籤）。
正式整合版仍以 <a href="totoga2.html">extra/totoga2.html</a> 為準。
</p>
</section>
<div class="bilivideo-stack">
<section class="bilivideo-block" aria-labelledby="bilivideo-top">
<h3 id="bilivideo-top">上集</h3>
<div class="bilivideo-frame">
<iframe src="https://player.bilibili.com/player.html?bvid=BV1SW411a7cZ&amp;page=1&amp;high_quality=1&amp;danmaku=0"
title="Bilibili 影片：上集（BV1SW411a7cZ）" allowfullscreen></iframe>
</div>
</section>
<section class="bilivideo-block" aria-labelledby="bilivideo-mid">
<h3 id="bilivideo-mid">中集</h3>
<p class="bilivideo-placeholder-note">預設與上集同一支；請替換 <code>bvid</code> 為中集 BV。</p>
<div class="bilivideo-frame">
<iframe src="https://player.bilibili.com/player.html?bvid=BV1SW411a7cZ&amp;page=1&amp;high_quality=1&amp;danmaku=0"
title="Bilibili 影片：中集（請替換 BV）" allowfullscreen></iframe>
</div>
</section>
<section class="bilivideo-block" aria-labelledby="bilivideo-bot">
<h3 id="bilivideo-bot">下集</h3>
<p class="bilivideo-placeholder-note">預設與上集同一支；請替換 <code>bvid</code> 為下集 BV。</p>
<div class="bilivideo-frame">
<iframe src="https://player.bilibili.com/player.html?bvid=BV1SW411a7cZ&amp;page=1&amp;high_quality=1&amp;danmaku=0"
title="Bilibili 影片：下集（請替換 BV）" allowfullscreen></iframe>
</div>
</section>
</div>
</div>
<nav class="ebook-back-link totoga2-split-crossnav totoga2-copy-hub-nav" aria-label="六六歌2 複本分頁入口">
<a href="totoga2-copy-video.html" class="btn">節目影片 · 三集 Bilibili</a>
<a href="totoga2-copy-ebook.html" class="btn">紀實電子書 · FlipHTML5</a>
<a href="totoga2-copy-timeline.html" class="btn">時間軸＋紀實長文八章</a>
</nav>
<div class="totoga2-hub-panel content-container ebook-main" data-totoga-panel="ebook" hidden>
<section class="ebook-intro section" aria-label="電子書說明">
<h2 class="section-title">紀實電子書</h2>
<p class="ebook-intro-lead">
以下為《無限挑戰》六六歌2 相關跨頁電子書（FlipHTML5）。若載入較慢，請稍候或重新整理；全螢幕閱讀請使用閱讀器內建控制項。
<p class="ebook-intro-lead totoga2-copy-hub-anchor-hint">
長文章節錨點請用 <a href="totoga2-copy-timeline.html#challenge">#challenge</a> 等同名 id（見時間軸頁）。
</p>
</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>
<div class="totoga2-hub-panel totoga2-reader-hub" data-totoga-panel="reader" hidden>
<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>
<div class="chronicle-controls content-container totoga2-chronicle-controls">
<button type="button" class="mode-btn active" data-totoga-reader-mode="scroll">網漫模式（一路滑下去）</button>
<button type="button" class="mode-btn" data-totoga-reader-mode="paged">分頁模式（上一頁 / 下一頁）</button>
</div>
<main class="content-container chronicle-reader" id="totoga2-reader" data-mode="scroll">
<article class="chronicle-chapter active" id="challenge" data-title="無限挑戰">
<h2>04 無限挑戰</h2>
<p>《無限挑戰》是韓國綜藝史上指標性的真人秀節目。「星期六星期六是歌手（六六歌）」企劃，成為水晶男孩 2016 回歸舞台的關鍵起點。</p>
<p>第一季掀起 90 年代懷舊熱潮，雖然水晶男孩未能完整出演，卻留下「總有一天要六人完整回到舞台」的遺憾伏筆。</p>
</article>
<article class="chronicle-chapter" id="ssg2" data-title="六六歌第二季">
<h2>06 六六歌第二季</h2>
<p>第二季改成「為單一團體打造完整回歸敘事」，保密層級更高，連主持群都縮小到劉在錫與 HAHA，避免消息提前走漏。</p>
<p>從開場的復古裝扮、試探式線索到真正揭曉團體身份，節目節奏在搞笑與懸念間拉開這場 16 年重逢序章。</p>
</article>
<article class="chronicle-chapter" id="sechskies-profile" data-title="水晶男孩">
<h2>08 水晶男孩</h2>
<p>1997 出道後迅速登頂，與同世代頂流並列，短短三年創下極高銷量與舞台紀錄，卻在 2000 無預警解散，留下集體創傷。</p>
<p>16 年間六人從未以水晶男孩名義完整合體，這次企劃不只是回憶，而是回應當年未說完的離別。</p>
</article>
<article class="chronicle-chapter" id="gather" data-title="召集">
<h2>10 召集</h2>
<p>製作組先與隊長殷志源交涉，再透過隱藏攝影機確認成員意願。大家都希望重組，卻同時知道最困難的拼圖是離開演藝圈多年的高志溶。</p>
<p>這個階段的重點不是舞台，而是「願不願意再次站在一起」的心理門檻。</p>
</article>
<article class="chronicle-chapter" id="negotiate" data-title="正式交涉">
<h2>11 正式交涉</h2>
<p>主持人與成員深度對話，回顧解散緣由、舞台記憶、KTV 挑戰與游擊演唱會規則。笑鬧之間，團魂逐漸浮現。</p>
<p>同時，節目也把高志溶議題正式擺上檯面：如果不是完整體，這次回歸是否還成立？</p>
</article>
<article class="chronicle-chapter" id="variables" data-title="變數">
<h2>16 變數</h2>
<p>排練期間接連出現傷病、手術需求與消息外流，原本理想的游擊演唱會計畫屢次被迫改寫，團隊陷入 B 計畫陰影。</p>
<p>在體力與心理都被拉到極限的情況下，成員仍選擇撐住，只為把久違舞台交回給等待 16 年的小黃。</p>
</article>
<article class="chronicle-chapter" id="surprise" data-title="驚喜">
<h2>19 驚喜</h2>
<p>當所有人幾乎接受「不完整」時，節目仍悄悄推進最後安排。高志溶與成員的情感張力在此段達到最高點。</p>
<p>這份驚喜不是綜藝反轉，而是把六顆水晶的空位真正填回舞台。</p>
</article>
<article class="chronicle-chapter" id="final-stage" data-title="登場">
<h2>21 登場</h2>
<p>眼罩揭開後，滿場黃海與哭聲同時湧現。從《請記得我》到安可，《離別曲》在那一晚變成了「重逢證詞」。</p>
<p>2000 的缺憾，在 2016 終於補上。這一頁不是結束，而是團體與粉絲共同完成的回歸章節。</p>
</article>
</main>
<div class="chronicle-pager content-container" id="totoga2-pager" hidden>
<button type="button" id="totoga2-prev" class="btn">上一頁</button>
<span id="totoga2-chapter-indicator">1 / 8</span>
<button type="button" id="totoga2-next" class="btn">下一頁</button>
</div>
</div>
<p class="ebook-back-link content-container">
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
<a href="#ebook" class="btn">同頁 · 電子書全螢幕</a>
<a href="totoga2.html" class="btn">主檔 totoga2.html</a>
</p>
<footer>
@@ -200,7 +65,6 @@
<script src="../assets/js/particles.js"></script>
<script src="../assets/js/portal-nav.js"></script>
<script src="../assets/js/totoga2.js"></script>
</body>
</html>
extra/totoga2-copy-ebook.html
+72
View File
@@ -0,0 +1,72 @@
<!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">
</head>
<body class="ebook-ssg2-page totoga2-page">
<header class="map-archive-header">
<div class="header-inner">
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
<div class="main-content-title">
<span class="highlight-text">水晶男孩回來啦！</span>
<span class="eng-title">SECHSKIES COM' BACK</span>
</div>
<div class="subtitle-wrap">
<span class="sub-title">INFINITE CHALLENGE · SIX SONGS 2 — E-BOOK</span>
<span class="event-date">APRIL 14, 2016</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-video.html" class="btn">節目影片</a>
<a href="totoga2-copy-ebook.html" class="btn" aria-current="page">紀實電子書</a>
<a href="totoga2-copy-timeline.html" class="btn">時間軸＋長文</a>
<a href="totoga2%20copy.html" class="btn">複本總覽</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 相關跨頁電子書（FlipHTML5）。若載入較慢，請稍候或重新整理；全螢幕閱讀請使用閱讀器內建控制項。
</p>
</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>
<p class="ebook-back-link content-container">
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
<a href="totoga2-copy-video.html" class="btn">節目影片（另頁）</a>
<a href="totoga2-copy-timeline.html" 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>
</body>
</html>
extra/totoga2-copy-timeline.html
+153
View File
@@ -0,0 +1,153 @@
<!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">
</head>
<body class="ebook-ssg2-page totoga2-page">
<header class="map-archive-header">
<div class="header-inner">
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
<div class="main-content-title">
<span class="highlight-text">水晶男孩回來啦！</span>
<span class="eng-title">SECHSKIES COM' BACK</span>
</div>
<div class="subtitle-wrap">
<span class="sub-title">INFINITE CHALLENGE · 時間軸 · 紀實長文</span>
<span class="event-date">APRIL 14, 2016</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-video.html" class="btn">節目影片</a>
<a href="totoga2-copy-ebook.html" class="btn">紀實電子書</a>
<a href="totoga2-copy-timeline.html" class="btn" aria-current="page">時間軸＋長文</a>
<a href="totoga2%20copy.html" class="btn">複本總覽</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>
<div class="chronicle-controls content-container totoga2-chronicle-controls">
<button type="button" class="mode-btn active" data-totoga-reader-mode="scroll">網漫模式（一路滑下去）</button>
<button type="button" class="mode-btn" data-totoga-reader-mode="paged">分頁模式（上一頁 / 下一頁）</button>
</div>
<main class="content-container chronicle-reader" id="totoga2-reader" data-mode="scroll">
<article class="chronicle-chapter active" id="challenge" data-title="無限挑戰">
<h2>04 無限挑戰</h2>
<p>《無限挑戰》是韓國綜藝史上指標性的真人秀節目。「星期六星期六是歌手（六六歌）」企劃，成為水晶男孩 2016 回歸舞台的關鍵起點。</p>
<p>第一季掀起 90 年代懷舊熱潮，雖然水晶男孩未能完整出演，卻留下「總有一天要六人完整回到舞台」的遺憾伏筆。</p>
</article>
<article class="chronicle-chapter" id="ssg2" data-title="六六歌第二季">
<h2>06 六六歌第二季</h2>
<p>第二季改成「為單一團體打造完整回歸敘事」，保密層級更高，連主持群都縮小到劉在錫與 HAHA，避免消息提前走漏。</p>
<p>從開場的復古裝扮、試探式線索到真正揭曉團體身份，節目節奏在搞笑與懸念間拉開這場 16 年重逢序章。</p>
</article>
<article class="chronicle-chapter" id="sechskies-profile" data-title="水晶男孩">
<h2>08 水晶男孩</h2>
<p>1997 出道後迅速登頂，與同世代頂流並列，短短三年創下極高銷量與舞台紀錄，卻在 2000 無預警解散，留下集體創傷。</p>
<p>16 年間六人從未以水晶男孩名義完整合體，這次企劃不只是回憶，而是回應當年未說完的離別。</p>
</article>
<article class="chronicle-chapter" id="gather" data-title="召集">
<h2>10 召集</h2>
<p>製作組先與隊長殷志源交涉，再透過隱藏攝影機確認成員意願。大家都希望重組，卻同時知道最困難的拼圖是離開演藝圈多年的高志溶。</p>
<p>這個階段的重點不是舞台，而是「願不願意再次站在一起」的心理門檻。</p>
</article>
<article class="chronicle-chapter" id="negotiate" data-title="正式交涉">
<h2>11 正式交涉</h2>
<p>主持人與成員深度對話，回顧解散緣由、舞台記憶、KTV 挑戰與游擊演唱會規則。笑鬧之間，團魂逐漸浮現。</p>
<p>同時，節目也把高志溶議題正式擺上檯面：如果不是完整體，這次回歸是否還成立？</p>
</article>
<article class="chronicle-chapter" id="variables" data-title="變數">
<h2>16 變數</h2>
<p>排練期間接連出現傷病、手術需求與消息外流，原本理想的游擊演唱會計畫屢次被迫改寫，團隊陷入 B 計畫陰影。</p>
<p>在體力與心理都被拉到極限的情況下，成員仍選擇撐住，只為把久違舞台交回給等待 16 年的小黃。</p>
</article>
<article class="chronicle-chapter" id="surprise" data-title="驚喜">
<h2>19 驚喜</h2>
<p>當所有人幾乎接受「不完整」時，節目仍悄悄推進最後安排。高志溶與成員的情感張力在此段達到最高點。</p>
<p>這份驚喜不是綜藝反轉，而是把六顆水晶的空位真正填回舞台。</p>
</article>
<article class="chronicle-chapter" id="final-stage" data-title="登場">
<h2>21 登場</h2>
<p>眼罩揭開後，滿場黃海與哭聲同時湧現。從《請記得我》到安可，《離別曲》在那一晚變成了「重逢證詞」。</p>
<p>2000 的缺憾，在 2016 終於補上。這一頁不是結束，而是團體與粉絲共同完成的回歸章節。</p>
</article>
</main>
<div class="chronicle-pager content-container" id="totoga2-pager" hidden>
<button type="button" id="totoga2-prev" class="btn">上一頁</button>
<span id="totoga2-chapter-indicator">1 / 8</span>
<button type="button" id="totoga2-next" class="btn">下一頁</button>
</div>
</div>
<p class="ebook-back-link content-container">
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
<a href="totoga2-copy-video.html" class="btn">節目影片（另頁）</a>
<a href="totoga2-copy-ebook.html" 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>
extra/totoga2-copy-video.html
+91
View File
@@ -0,0 +1,91 @@
<!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">
</head>
<body class="ebook-ssg2-page totoga2-page">
<header class="map-archive-header">
<div class="header-inner">
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
<div class="main-content-title">
<span class="highlight-text">水晶男孩回來啦！</span>
<span class="eng-title">SECHSKIES COM' BACK</span>
</div>
<div class="subtitle-wrap">
<span class="sub-title">INFINITE CHALLENGE · SIX SONGS 2 — 節目影片</span>
<span class="event-date">APRIL 14, 2016</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-video.html" class="btn" aria-current="page">節目影片</a>
<a href="totoga2-copy-ebook.html" class="btn">紀實電子書</a>
<a href="totoga2-copy-timeline.html" class="btn">時間軸＋長文</a>
<a href="totoga2%20copy.html" class="btn">複本總覽</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">
以下為 Bilibili 嵌入播放器（16：9）。若無法播放，請至站內搜尋同一 BV 號；中集、下集請將 iframe 的 <code>bvid</code> 換成你的分集連結。
</p>
</section>
<div class="bilivideo-stack">
<section class="bilivideo-block" aria-labelledby="bilivideo-top">
<h3 id="bilivideo-top">上集</h3>
<div class="bilivideo-frame">
<iframe src="https://player.bilibili.com/player.html?bvid=BV1SW411a7cZ&amp;page=1&amp;high_quality=1&amp;danmaku=0"
title="Bilibili 影片：上集（BV1SW411a7cZ）" allowfullscreen></iframe>
</div>
</section>
<section class="bilivideo-block" aria-labelledby="bilivideo-mid">
<h3 id="bilivideo-mid">中集</h3>
<p class="bilivideo-placeholder-note">預設與上集同一支；請替換 <code>bvid</code> 為中集 BV。</p>
<div class="bilivideo-frame">
<iframe src="https://player.bilibili.com/player.html?bvid=BV1SW411a7cZ&amp;page=1&amp;high_quality=1&amp;danmaku=0"
title="Bilibili 影片：中集（請替換 BV）" allowfullscreen></iframe>
</div>
</section>
<section class="bilivideo-block" aria-labelledby="bilivideo-bot">
<h3 id="bilivideo-bot">下集</h3>
<p class="bilivideo-placeholder-note">預設與上集同一支；請替換 <code>bvid</code> 為下集 BV。</p>
<div class="bilivideo-frame">
<iframe src="https://player.bilibili.com/player.html?bvid=BV1SW411a7cZ&amp;page=1&amp;high_quality=1&amp;danmaku=0"
title="Bilibili 影片：下集（請替換 BV）" allowfullscreen></iframe>
</div>
</section>
</div>
</div>
<p class="ebook-back-link content-container">
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
<a href="totoga2-copy-ebook.html" class="btn">紀實電子書（另頁）</a>
<a href="totoga2-copy-timeline.html" 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>
</body>
</html>
index.html
+32 -22
View File
@@ -30,16 +30,17 @@
<section id="start">
<h2 class="section-title">好奇的開端</h2>
<div class="intro-text">
<p class="intro-text">
身為在回歸後才被這場 <span class="mark_b mark_y">「黃色奇蹟」</span>
擊中的新一代粉絲，我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。
</p>
<p class="core-description">
這段旅程始於 2016 年 4 月，透過國民綜藝<span class="mark_b mark_y">《無限挑戰》</span>的回歸企劃，讓原本不認識這組傳奇的我，因一時好奇點開節目。
即便錯過了那個屬於他們的世紀末，但跟著節目的編排鋪陳，從歡笑到感動，我依然被那份熱血、真誠且專業的魅力所震撼。
即便錯過了那個屬於他們的世紀末，但跟著節目的編排鋪陳，從歡笑到感動，我被這些熱血、真誠且專業的大男孩所震撼。
</p>
<p class="call-to-action">
對我來說，經典不是博物館的玻璃櫃，而是每次重播都讓人想跟著跳的節奏。這種從路人轉化為深陷其中的過程，證明了魅力可以跨越時間，也正是這一切好奇的起點。
身為在回歸後才被這場 <span class="mark_b mark_y">「黃色奇蹟」</span>
擊中的新一代粉絲，我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。這種從<span class="mark_b"><span class="fan-journey-wave"
role="text">路人&nbsp;<i class="fa-solid fa-circle-right"
aria-hidden="true"></i>&nbsp;入坑否定期&nbsp;<i class="fa-solid fa-circle-right"
aria-hidden="true"></i>&nbsp;瘋狂考古期&nbsp;<i class="fa-solid fa-circle-right"
aria-hidden="true"></i>&nbsp;坑底躺平深陷其中</span></span>的過程，證明了魅力可以跨越時間，也正是這一切自我覺醒的起點，驅動我不斷進化的無限可能。
</p>
</div>
</section>
@@ -60,7 +61,8 @@
<p class="mission-lead">
以推廣 <span class="mark_b mark_y">SECHSKIES 水晶男孩</span> 為核心，旨在透過 <span
class="mark_b">專業的視覺策展</span> 宣傳成員魅力與 <span
class="mark_b">小黃們的應援活動</span>。我們不滿足於傳統的追星模式，而是嘗試以水晶男孩為 <span class="mark_b">靈感主軸</span>，延伸至
class="mark_b">小黃們的應援活動</span>。我們不滿足於傳統的追星模式，而是嘗試以水晶男孩為 <span
class="mark_b">靈感主軸</span>，延伸至
<span class="mark_b">網頁開發、視覺設計與內容企劃</span>
等多重領域，將對偶像的喜愛轉化為 <span class="mark_b">實質的專業養分</span>。在這裡，你不只能探索他們的 <span
class="mark_b">傳奇軌跡</span>，更能見證追星如何激發 <span class="mark_b">創作潛能</span>。
@@ -75,9 +77,9 @@
<span class="mark_b">「晶」</span>字發想來自<span class="mark_b">六角形的水晶</span>，為了強調水晶男孩<span
class="mark_b">初心為六人</span>。上半部形似<span class="mark_b">數字
6</span>，搭配演唱會必備的<span class="mark_b">手燈圖案</span>，代表粉絲和水晶<span
class="mark_b">密不可分的關係</span>。<br>色彩配置發想來自回歸舞台成員脫下眼罩的剎那，整個場地從<span
class="mark_b mark_y">一片漆黑瞬間發亮</span>，映入眼簾的是一片<span
class="mark_b">黃色海洋</span>。以此片段為契機，設計成<span
class="mark_b">密不可分的關係</span>。<br>色彩配置發想來自無限挑戰六六歌特輯的回歸舞台，成員脫下眼罩的剎那，整個場地從<span
class="mark_b mark_y">一片漆黑瞬間發亮</span>，映入眼簾的是一片<span class="mark_b">黃色海洋</span>，<span
class="mark_y">讓成員和粉絲的世界跟著亮了起來</span>。以此片段為契機，設計成<span
class="mark_b">黑色系與黃色系</span>的色彩搭配，來記錄那瞬間的感動。
</p>
</div>
@@ -97,8 +99,8 @@
</div>
<div class="slogan-quote slogan-quote--mission">
<span class="slogan-quote__inner">我們要用這座<span class="mark_b">藝廊般的網站</span>證明：<br>追星的孩子不僅不會變壞，更會因為那份<span
class="mark_b">守護的熱情</span>，<br>讓現在的自己變得比追星前的自己還要厲害!</span>
<span class="slogan-quote__inner">我要用這座<span class="mark_b">藝廊般的網站</span>證明：<br>追星的孩子不僅不會變壞，更會因為那份<span
class="mark_b">守護並推廣的熱情</span>，<br>讓現在的自己變得比追星前的自己還要厲害!</span>
</div>
</section>
@@ -110,22 +112,30 @@
<div class="merged-storyline">
<article class="story-node" data-era="1997">
<h3>傳奇的誕生：出道與巔峰</h3>
<p>1997年4月15日，水晶男孩以《學園別曲》正式出道，是韓國第一代偶像團體，與H.O.T.並稱為90年代後期兩大山脈。團名源自德語「六顆水晶」，象徵六位成員能左右命運。</p>
<p>分為「黑水晶」（殷志源、李宰鎮、金在德 — Rap與舞蹈）和「白水晶」（姜成勳、高志溶、張水院 — 主唱）。</p>
<h3>傳奇的誕生：六道光芒劃破韓流夜空</h3>
<p>1997年4月15日，水晶男孩以強悍的《學園別曲》為起點，「黑水晶｜Rap與舞蹈」、「白水晶｜主唱」的雙色魅力交織，奠定了
K-POP第一代傳奇的地位，開創了屬於黃色海洋的盛世與巔峰。</p>
<p>在那段被韓劇<a
href="https://www.disneyplus.com/browse/entity-3979fb82-8681-44e8-b7be-e313091f0d73?distributionPartner=google"
class="story-external-inline" target="_blank" rel="noopener noreferrer"><span
class="story-external-inline__label">《請回答1997》</span><i
class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>奉為經典的歲月裡，水晶男孩與
H.O.T.
並稱為兩大巔峰。無論是雨中那場被劇集致敬的粉絲大戰，還是為了買票露宿街頭的狂熱，白與黃的旗幟對決，成了那個世代集體記憶的起點。</p>
</article>
<article class="story-node" data-era="2000">
<h3>遺憾的句點：宣告解散</h3>
<p>2000年5月20日正式解散，成員各自發展，水晶暫時進入休眠期。</p>
<h3>遺憾的休止符：凍結有你的世界</h3>
<p>在最燦爛的時刻，這首華麗的樂章卻被迫畫下了休止符，2000年5月正式解散。成員各自發展走出了不同道路，水晶進入休眠期。
</p>
<p>那一場如同劇中描寫般、讓全韓無數少女世界崩塌的夢想演唱會告別現場，將未完的旋律封存在冷冽的空氣中。這一停頓，就是長達十六年的靜默，成為我們心中最完整、卻也最令人心碎的凝煉模樣。
</p>
</article>
<article class="story-node story-node--ebook-ssg2" data-era="2016">
<h3>傳奇回歸：重逢的感動合體</h3>
<p>透過《無限挑戰》「六六歌2」跨越16年再次重聚，引起全韓黃色氣球海再現。</p>
<a href="extra/totoga2.html#ebook" class="timeline-ebook-cta">
<i class="fa-solid fa-hand-pointer" aria-hidden="true"></i>
<span>點這裡翻開《六六歌2》紀實電子書</span>
<span>點我見證傳奇</span><i class="fa-solid fa-hand-pointer" aria-hidden="true"></i>
</a>
</article>
@@ -140,7 +150,7 @@
</article>
</div>
</section>
<!--
<section id="story" class="story-archive">
<h2 class="section-title">傳奇的轉折</h2>
<div class="subtitle-wrap">
@@ -177,7 +187,7 @@
<p><a href="extra/totoga2.html#sechskies-profile">讀這條脈絡的起點</a></p>
</article>
</div>
</section>
</section> -->
</div>
<footer>
variety/NJTW/njtw5.css
+40 -5
View File
@@ -187,7 +187,7 @@ body.njtw5-page .njtw-member-table td > .njtw-td-fill > .njtw-team-panel {
box-sizing: border-box;
}
/* 與成員卡同列時撐滿儲存格高度：內層直向 flex，標籤列貼底 */
/* 與成員卡同列時撐滿儲存格高度：內層直向 flex；剩餘高度由 .parchment-figure 吸收（見下），標籤列不再用 margin-top:auto */
body.njtw5-page .njtw-member-table .member-card.parchment-card {
display: flex;
flex-direction: column;
@@ -200,11 +200,22 @@ body.njtw5-page .njtw-member-table .member-card.parchment-card .parchment-inner
min-height: 0;
}
body.njtw5-page .njtw-member-table .parchment-card .parchment-tags {
margin-top: auto;
/* 表格內：剩餘高度給頭像區，勿用 tags 的 margin-top:auto 吃掉（會變成標籤上方死空白、壓縮圖區） */
body.njtw5-page .njtw-member-table .member-card.parchment-card .parchment-figure {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
/* 表格內 OB／YB：深色「反色」羊皮紙＋龍珠數值（與角色淺色卡對照） */
body.njtw5-page .njtw-member-table .parchment-card .parchment-figure .member-image {
flex: 1 1 auto;
width: 100%;
min-height: clamp(200px, 34vw, 280px);
height: auto;
}
/* 標籤列：沿用 .parchment-card .parchment-tags 的 margin／虛線，不再 margin-top:auto */
body.njtw5-page .njtw-member-table .njtw-layout-slot.shinmyohan {
white-space: normal;
text-align: left;
@@ -277,7 +288,7 @@ body.njtw5-page .njtw-member-table .njtw-team-title-band {
inset 0 -10px 24px rgba(0, 0, 0, 0.12);
}
/* 原「OB／YB」單字大標的字級，改套在完整隊名上 */
/* 原「OB／YB」單字大標的字級，改套在完整隊名上；OB／YB 欄另見 td.OB／td.YB 覆寫 */
body.njtw5-page .njtw-member-table .njtw-team-hero-title {
margin: 0;
max-width: 100%;
@@ -293,6 +304,30 @@ body.njtw5-page .njtw-member-table .njtw-team-hero-title {
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
/* OB／YB 隊名區：與 OB 同一套加亮暖底＋偏白字（YB 套用同規格） */
body.njtw5-page .njtw-member-table td.OB .njtw-team-title-band,
body.njtw5-page .njtw-member-table td.YB .njtw-team-title-band {
border-color: rgba(255, 210, 175, 0.42);
background:
radial-gradient(ellipse 125% 95% at 50% 0%, rgba(255, 232, 200, 0.5) 0%, transparent 52%),
linear-gradient(165deg, #ffd8a8 0%, #e09050 42%, #c06038 78%, #8a4028 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.28),
inset 0 -8px 22px rgba(60, 28, 16, 0.18);
}
body.njtw5-page .njtw-member-table td.OB .njtw-team-hero-title,
body.njtw5-page .njtw-member-table td.YB .njtw-team-hero-title {
background: none;
-webkit-background-clip: border-box;
background-clip: border-box;
color: rgba(255, 250, 244, 0.97);
text-shadow:
0 1px 2px rgba(40, 18, 8, 0.55),
0 0 20px rgba(255, 200, 150, 0.2);
filter: none;
}
body.njtw5-page .njtw-member-table .njtw-slot-faces {
display: flex;
flex-wrap: nowrap;