fix 調整資料夾結構
This commit is contained in:
+7
-7
@@ -4,17 +4,17 @@
|
||||
|
||||
本文依 **`git diff`** 對照 **`HEAD`** 整理，方便逐項核對；不含未在本 diff 出現之檔案或臆測內容。
|
||||
|
||||
**涉及檔案（5）**：`albums.html`、`index.css`、`index.html`、`portal-nav.js`、`style.css`
|
||||
**涉及檔案（5）**：`albums/albums.html`、`index.css`、`index.html`、`portal-nav.js`、`style.css`
|
||||
**統計**：以 `git diff --stat` 為準（以下內容對應該批變更初版筆記）。
|
||||
|
||||
---
|
||||
|
||||
## 1. `albums.html`
|
||||
## 1. `albums/albums.html`
|
||||
|
||||
### 目的
|
||||
|
||||
- 年表區塊（「啟動新篇章」「輝煌全盛期」）每一資料列：**點列上非連結區域**時，於新分頁開對應 **Spotify 專輯**。
|
||||
- 列內既有 `<a>`（本站 `lyrics.html`、`concert.html`、`albums.html#classic`）維持原行為。
|
||||
- 列內既有 `<a>`（本站 `extra/lyrics.html`、`concert/concert.html`、`albums/albums.html#classic`）維持原行為。
|
||||
|
||||
### 標記與無障礙
|
||||
|
||||
@@ -68,14 +68,14 @@
|
||||
|
||||
1. `<article class="story-node">` 追加 modifier：`story-node--ebook-ssg2`。
|
||||
2. 在該篇 `<p>…</p>` 之後新增：
|
||||
- `<a href="totoga2.html#ebook" class="timeline-ebook-cta">`
|
||||
- `<a href="extra/totoga2.html#ebook" class="timeline-ebook-cta">`
|
||||
- Font Awesome：`fa-solid fa-hand-pointer`（`aria-hidden="true"`）
|
||||
- 文案：「點這裡翻開《六六歌2》紀實電子書」
|
||||
|
||||
### 相依性（請檢查）
|
||||
|
||||
- 頁面須已載入 Font Awesome（與現有 `<link>` 一致），否則圖示不顯示。
|
||||
- `totoga2.html` 須存在；`totoga2.js` 會辨識網址列 `#ebook` 並切換至電子書模式。
|
||||
- `extra/totoga2.html` 須存在；`extra/totoga2.js` 會辨識網址列 `#ebook` 並切換至電子書模式。
|
||||
|
||||
---
|
||||
|
||||
@@ -122,8 +122,8 @@
|
||||
|
||||
## 建議檢查步驟（逐項勾選）
|
||||
|
||||
1. **`albums.html`**：每列空白處／封面／年份點擊 → 新分頁 Spotify 正確專輯；點列內本站連結 → 仍進本站、不開 Spotify。
|
||||
2. **`albums.html`**：鍵盤 Tab 聚焦列後 Enter／空白 → 開 Spotify；聚焦在 `<a>` 上時 Enter → 遵循連結。
|
||||
1. **`albums/albums.html`**：每列空白處／封面／年份點擊 → 新分頁 Spotify 正確專輯；點列內本站連結 → 仍進本站、不開 Spotify。
|
||||
2. **`albums/albums.html`**：鍵盤 Tab 聚焦列後 Enter／空白 → 開 Spotify；聚焦在 `<a>` 上時 Enter → 遵循連結。
|
||||
3. **`index.html` + `style.css`**：2016 卡片外觀與 CTA 按鈕、`hover`、`focus-visible`、縮減動態偏好設定下手勢動畫關閉。
|
||||
4. **`portal-nav.js`**：全站注入後選單無「消失的真相」；改 `true` 後該項回來。
|
||||
5. **跨頁**：任意頁載入 `portal-nav.js` 後行為一致。
|
||||
|
||||
@@ -5,10 +5,10 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>水晶男孩｜黃色留聲機</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<link rel="stylesheet" href="../index.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<link rel="stylesheet" href="tablet.css">
|
||||
<link rel="stylesheet" href="../tablet.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -35,7 +35,7 @@
|
||||
<section id="new" class="archive-block">
|
||||
<h2 class="section-title">啟動新篇章</h2>
|
||||
<p>回歸後的數位單曲與專輯，是現在進行式的聲紋紀錄；耳機調大聲一格，就能把「新篇章」接住。</p>
|
||||
<p><a href="lyrics.html">聽見歌詞細節（2016 代表曲目）</a></p>
|
||||
<p><a href="../extra/lyrics.html">聽見歌詞細節（2016 代表曲目）</a></p>
|
||||
<table class="archive-discography">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -50,31 +50,31 @@
|
||||
data-spotify-url="https://open.spotify.com/album/1Dijv8G0wnCN8PzFZoC8bN"
|
||||
aria-label="在 Spotify 開啟：THREE WORDS（2016 數位單曲）">
|
||||
<td class="album-cover-cell">
|
||||
<img src="./img/albums/2016.jpg" width="76" height="76" alt="2016 數位單曲 封面">
|
||||
<img src="../img/albums/2016.jpg" width="76" height="76" alt="2016 數位單曲 封面">
|
||||
</td>
|
||||
<td>2016</td>
|
||||
<td><a href="lyrics.html">數位單曲</a></td>
|
||||
<td><a href="lyrics.html">Three Words (三個詞)</a></td>
|
||||
<td><a href="../extra/lyrics.html">數位單曲</a></td>
|
||||
<td><a href="../extra/lyrics.html">Three Words (三個詞)</a></td>
|
||||
</tr>
|
||||
<tr class="archive-row-spotify" tabindex="0"
|
||||
data-spotify-url="https://open.spotify.com/album/5f2LzIFxljQF4FH7w3rXcQ"
|
||||
aria-label="在 Spotify 開啟：ANOTHER LIGHT">
|
||||
<td class="album-cover-cell">
|
||||
<img src="./img/albums/2017.jpg" width="76" height="76" alt="2017 ANOTHER LIGHT 封面">
|
||||
<img src="../img/albums/2017.jpg" width="76" height="76" alt="2017 ANOTHER LIGHT 封面">
|
||||
</td>
|
||||
<td>2017</td>
|
||||
<td><a href="concert.html#stage-now">ANOTHER LIGHT</a></td>
|
||||
<td><a href="concert.html#stage-now">Something Special / Smile</a></td>
|
||||
<td><a href="../concert/concert.html#stage-now">ANOTHER LIGHT</a></td>
|
||||
<td><a href="../concert/concert.html#stage-now">Something Special / Smile</a></td>
|
||||
</tr>
|
||||
<tr class="archive-row-spotify" tabindex="0"
|
||||
data-spotify-url="https://open.spotify.com/album/7vqIRL00YfTtuO0sSAK3Uv"
|
||||
aria-label="在 Spotify 開啟：ALL FOR YOU">
|
||||
<td class="album-cover-cell">
|
||||
<img src="./img/albums/2020.jpg" width="76" height="76" alt="2020 ALL FOR YOU 封面">
|
||||
<img src="../img/albums/2020.jpg" width="76" height="76" alt="2020 ALL FOR YOU 封面">
|
||||
</td>
|
||||
<td>2020</td>
|
||||
<td><a href="concert.html#stage-now">ALL FOR YOU</a></td>
|
||||
<td><a href="concert.html#stage-now">ALL FOR YOU</a></td>
|
||||
<td><a href="../concert/concert.html#stage-now">ALL FOR YOU</a></td>
|
||||
<td><a href="../concert/concert.html#stage-now">ALL FOR YOU</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -126,8 +126,8 @@
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="particles.js"></script>
|
||||
<script src="portal-nav.js"></script>
|
||||
<script src="../particles.js"></script>
|
||||
<script src="../portal-nav.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
document.querySelectorAll('tr.archive-row-spotify[data-spotify-url]').forEach(function (row) {
|
||||
@@ -12,7 +12,7 @@ body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
min-height: 100dvh;
|
||||
background-image: url('img/header.jpg');
|
||||
background-image: url('../img/header.jpg');
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 108%;
|
||||
@@ -6,9 +6,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SECHSKIES Concert Archive</title>
|
||||
<link rel="stylesheet" href="concert.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="../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="tablet.css">
|
||||
<link rel="stylesheet" href="../tablet.css">
|
||||
</head>
|
||||
|
||||
<body class="concert-page">
|
||||
@@ -33,7 +33,7 @@
|
||||
|
||||
<div class="con-1" data-tour=" YELLOW NOTE">
|
||||
<span class="title">2016 | YELLOW NOTE 首場回歸演唱會</span>
|
||||
<img src="img/concert/2016.jpg" alt="">
|
||||
<img src="../img/concert/2016.jpg" alt="">
|
||||
<div class="con-yk-1 attended" data-date1="09.10">
|
||||
<span class="location">首爾 | 首爾奧林匹克體操競技場</span>
|
||||
<input type="checkbox" id="expand-yk-1" class="expand-trigger">
|
||||
@@ -160,7 +160,7 @@
|
||||
|
||||
<div class="con-2" data-tour="20TH ANNIV.">
|
||||
<span class="title">2017-2018 | 20TH ANNIVERSARY</span>
|
||||
<img src="img/concert/2017.jpg" alt="">
|
||||
<img src="../img/concert/2017.jpg" alt="">
|
||||
|
||||
<div class="con-2-1">
|
||||
<span class="location">首爾：高尺天空巨蛋</span>
|
||||
@@ -352,7 +352,7 @@
|
||||
<!-- 演唱會 03 -->
|
||||
<div class="con-3" data-tour="NOW・HERE・AGAIN.">
|
||||
<span class="title">2018 | NOW・HERE・AGAIN</span>
|
||||
<img src="img/concert/2018.jpg" alt="">
|
||||
<img src="../img/concert/2018.jpg" alt="">
|
||||
<div class="con-3-1 attended" data-date1="10.13" data-date2="10.14">
|
||||
<span class="location">首爾：首爾奧林匹克體操競技場</span>
|
||||
<input type="checkbox" id="expand-con-3-1" class="expand-trigger">
|
||||
@@ -389,7 +389,7 @@
|
||||
<!-- 演唱會 04：與 con-2／con-3 同結構 — title → img → con-4-1；ACCESS 樣式用 con-access-denied；CANCELED 水印為 ::before（::after 保留給 data-tour 緞帶） -->
|
||||
<div class="con-4 con-access-denied" data-tour="ACCESS">
|
||||
<span class="title">2020 | CONCERT [ACCESS]</span>
|
||||
<img src="img/concert/2020.jpg" alt="">
|
||||
<img src="../img/concert/2020.jpg" alt="">
|
||||
|
||||
<div class="con-4-1 canceled" data-date1="03.06" data-date2="03.08">
|
||||
<span class="location">首爾：慶熙大學 平和殿堂</span>
|
||||
@@ -631,7 +631,7 @@
|
||||
init();
|
||||
animate();
|
||||
</script>
|
||||
<script src="portal-nav.js"></script>
|
||||
<script src="../portal-nav.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -6,11 +6,11 @@
|
||||
|
||||
## 1. 必做：把頁面掛進導覽 HTML
|
||||
|
||||
在 **`PORTAL_NAV_INNER_HTML`**（約第 123 行起）裡加入連結：
|
||||
在 **`buildPortalNavInnerHTML`**（`portal-nav.js`）裡維護連結：
|
||||
|
||||
- 依資訊架構放在對應的 **`<li>`** 底下；需要子選單時用 **`portal-submenu`**。
|
||||
- `href` 使用與其他頁一致的**相對路徑**（例如 `newpage.html`、`index.html#section`）。
|
||||
- Logo 列不要動：`<a class="logo" href="index.html">…</a>`。
|
||||
- `href` 使用**站根相對路徑**（腳本會依當前頁深度加上前綴 `rp`）：例如 `` `${rp}jiwon/jiwon.html` ``、`` `${rp}index.html#section` ``。
|
||||
- Logo 列：`` `${rp}index.html` `` 與 `` `${rp}img/logov.svg` ``。
|
||||
|
||||
新增或調整完後，所有帶 **`data-portal-nav`** 的 `<nav class="portal-nav">` 都會在載入腳本時被注入同一份 HTML。
|
||||
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>水晶男孩 SECHSKIES | 永恆的六顆水晶</title>
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="../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="tablet.css">
|
||||
<link rel="stylesheet" href="../tablet.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@@ -9,9 +9,9 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<link rel="stylesheet" href="lyrics.css">
|
||||
<link rel="stylesheet" href="tablet.css">
|
||||
<link rel="stylesheet" href="../tablet.css">
|
||||
</head>
|
||||
|
||||
<body class="lyrics-page">
|
||||
@@ -5,9 +5,9 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>水晶男孩推廣部｜視覺進化論</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="../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="tablet.css">
|
||||
<link rel="stylesheet" href="../tablet.css">
|
||||
</head>
|
||||
|
||||
<body class="chronicle-page minister-page">
|
||||
@@ -60,25 +60,25 @@
|
||||
<p class="minister-month">07 月｜手作初試</p>
|
||||
<p>開始學習勾針，為金在德製作第一個鴨鴨置物籃，這是從旁觀者轉為實踐者的第一步。</p>
|
||||
<figure class="minister-photo">
|
||||
<img src="img/minister/image_3c1739.jpg" alt="手作鴨鴨置物籃" width="1040" height="780" loading="lazy">
|
||||
<img src="../img/minister/image_3c1739.jpg" alt="手作鴨鴨置物籃" width="1040" height="780" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<p class="minister-month">08 月｜螢幕後的參與</p>
|
||||
<p>以「水晶廢人字幕組」粉絲身分，用手繪應援板與勾針作品參與應援影片籌備。</p>
|
||||
<figure class="minister-photo">
|
||||
<img src="img/minister/image_3c13d7.jpg" alt="手繪應援板與勾針作品" width="1040" height="780" loading="lazy">
|
||||
<img src="../img/minister/image_3c13d7.jpg" alt="手繪應援板與勾針作品" width="1040" height="780" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<p class="minister-month">09 月｜孤注一擲的現場</p>
|
||||
<p>在經濟窘迫、甚至需要借錢籌措旅費的情況下，飛往首爾參加首場演唱會。在那裡，我握著導師設計的台灣小黃手幅，第一次感受到設計與才華帶來的震撼。</p>
|
||||
<figure class="minister-photo">
|
||||
<img src="img/minister/image_3bb254.jpg" alt="台灣小黃手幅" width="1040" height="780" loading="lazy">
|
||||
<img src="../img/minister/image_3bb254.jpg" alt="台灣小黃手幅" width="1040" height="780" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<p class="minister-month">12 月｜溫暖的饋贈</p>
|
||||
<p>在「#水晶文具社」聚會中，收到了同好精緻的手繪聖誕卡片。看著別人的創作，我更加確信自己也想成為能用作品傳遞能量的人。</p>
|
||||
<figure class="minister-photo">
|
||||
<img src="img/minister/image_3bab17.jpg" alt="手繪聖誕卡片" width="1040" height="780" loading="lazy">
|
||||
<img src="../img/minister/image_3bab17.jpg" alt="手繪聖誕卡片" width="1040" height="780" loading="lazy">
|
||||
</figure>
|
||||
</article>
|
||||
|
||||
@@ -87,7 +87,7 @@
|
||||
<p class="minister-month">01 月｜職人精神的啟發</p>
|
||||
<p>參與資管組 D 大的新年紅包活動。其書法與刻印結合的質感，深深影響了我對美感的標準。</p>
|
||||
<figure class="minister-photo">
|
||||
<img src="img/minister/image_3ba74f.jpg" alt="新年紅包活動" width="1040" height="780" loading="lazy">
|
||||
<img src="../img/minister/image_3ba74f.jpg" alt="新年紅包活動" width="1040" height="780" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<p class="minister-month">02 月｜身體記憶的熱血</p>
|
||||
@@ -96,8 +96,8 @@
|
||||
<p class="minister-month">04 月｜筆尖的沈澱</p>
|
||||
<p>跟著文具社走遍全台咖啡廳，在鋼筆墨水與玻璃杯的陪伴下，用手寫記錄初心。</p>
|
||||
<figure class="minister-photo minister-photo--dual">
|
||||
<img src="img/minister/image_3baed1.jpg" alt="鋼筆墨水與玻璃杯" width="1040" height="780" loading="lazy">
|
||||
<img src="img/minister/image_3c2299.jpg" alt="手寫記錄初心" width="1040" height="780" loading="lazy">
|
||||
<img src="../img/minister/image_3baed1.jpg" alt="鋼筆墨水與玻璃杯" width="1040" height="780" loading="lazy">
|
||||
<img src="../img/minister/image_3c2299.jpg" alt="手寫記錄初心" width="1040" height="780" loading="lazy">
|
||||
</figure>
|
||||
</article>
|
||||
|
||||
@@ -113,7 +113,7 @@
|
||||
</section>
|
||||
|
||||
<p class="minister-back">
|
||||
<a href="index.html#mission" class="btn">回到首頁 · 成立的初衷</a>
|
||||
<a href="../index.html#mission" class="btn">回到首頁 · 成立的初衷</a>
|
||||
</p>
|
||||
</main>
|
||||
|
||||
@@ -124,8 +124,8 @@
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="particles.js"></script>
|
||||
<script src="portal-nav.js"></script>
|
||||
<script src="../particles.js"></script>
|
||||
<script src="../portal-nav.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -5,10 +5,10 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>水晶男孩推廣部｜視覺進化論：認真魔人的進化之路</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<link rel="stylesheet" href="../index.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<link rel="stylesheet" href="tablet.css">
|
||||
<link rel="stylesheet" href="../tablet.css">
|
||||
</head>
|
||||
|
||||
<body class="home-page minister-page">
|
||||
@@ -225,7 +225,7 @@
|
||||
</section>
|
||||
|
||||
<div class="landing-actions">
|
||||
<a href="index.html#mission" class="btn">回到首頁 · 成立的初衷</a>
|
||||
<a href="../index.html#mission" class="btn">回到首頁 · 成立的初衷</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -236,8 +236,8 @@
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="particles.js"></script>
|
||||
<script src="portal-nav.js"></script>
|
||||
<script src="../particles.js"></script>
|
||||
<script src="../portal-nav.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -5,9 +5,9 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>水晶男孩｜全站導覽</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="../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="tablet.css">
|
||||
<link rel="stylesheet" href="../tablet.css">
|
||||
</head>
|
||||
|
||||
<body class="site-guide-page">
|
||||
@@ -26,24 +26,26 @@
|
||||
|
||||
<main class="content-container site-guide-main">
|
||||
<p class="site-guide-lead">
|
||||
以下為本專案目前所有 HTML 頁面：每張卡片含<span class="mark_b">連結</span>、瀏覽器分頁上的<span class="mark_b">標題</span>（<code><title></code>）、以及主要<span class="mark_b">區塊／錨點</span>，方便你開發或簡報時一鍵跳轉。
|
||||
<span class="mark_b">此頁未放入全站導覽列</span>，僅供你自行書籤或輸入網址（例如 <code>site-guide.html</code>）開啟。
|
||||
以下為本專案目前所有 HTML 頁面：每張卡片含<span class="mark_b">連結</span>、瀏覽器分頁上的<span
|
||||
class="mark_b">標題</span>（<code><title></code>）、以及主要<span
|
||||
class="mark_b">區塊／錨點</span>，方便你開發或簡報時一鍵跳轉。
|
||||
<span class="mark_b">此頁未放入全站導覽列</span>，僅供你自行書籤或輸入網址（例如 <code>extra/site-guide.html</code>）開啟。
|
||||
</p>
|
||||
|
||||
<section class="site-guide-group" aria-labelledby="sg-home">
|
||||
<h2 class="section-title" id="sg-home">首頁與入口</h2>
|
||||
<div class="site-guide-grid">
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="index.html">index.html</a></h3>
|
||||
<h3><a href="../index.html">index.html</a></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>
|
||||
<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>
|
||||
|
||||
@@ -93,7 +95,8 @@
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<p class="site-guide-fine-print">舊檔 <code>ssg2-ebook.html</code>、<code>chronicle.html</code> 已併入 <a href="totoga2.html">totoga2 整合頁</a>。</p>
|
||||
<p class="site-guide-fine-print">舊檔 <code>ssg2-ebook.html</code>、<code>chronicle.html</code> 已併入 <a
|
||||
href="totoga2.html">totoga2 整合頁</a>。</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
@@ -102,12 +105,12 @@
|
||||
<h2 class="section-title" id="sg-members">成員與紀實</h2>
|
||||
<div class="site-guide-grid">
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="jiwon.html">jiwon.html</a></h3>
|
||||
<h3><a href="../jiwon/jiwon.html">jiwon/jiwon.html</a></h3>
|
||||
<p class="site-guide-meta">標題列：<cite>水晶男孩｜瘋子與天才</cite></p>
|
||||
<h4>區塊錨點</h4>
|
||||
<ul>
|
||||
<li><a href="jiwon.html#variety">#variety</a> — 瘋狂出演中</li>
|
||||
<li><a href="jiwon.html#stage">#stage</a> — 隊長的氣場</li>
|
||||
<li><a href="../jiwon/jiwon.html#variety">#variety</a> — 瘋狂出演中</li>
|
||||
<li><a href="../jiwon/jiwon.html#stage">#stage</a> — 隊長的氣場</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
@@ -162,32 +165,32 @@
|
||||
<h2 class="section-title" id="sg-media">現場 · 典藏 · 地圖 · 歌詞</h2>
|
||||
<div class="site-guide-grid">
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="concert.html">concert.html</a></h3>
|
||||
<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.html#stage-now">#stage-now</a> — 永恆的重逢</li>
|
||||
<li><a href="concert.html#stage-past">#stage-past</a> — 燦爛的最初</li>
|
||||
<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>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="albums.html">albums.html</a></h3>
|
||||
<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.html#new">#new</a> — 啟動新篇章</li>
|
||||
<li><a href="albums.html#classic">#classic</a> — 輝煌全盛期</li>
|
||||
<li><a href="../albums/albums.html#new">#new</a> — 啟動新篇章</li>
|
||||
<li><a href="../albums/albums.html#classic">#classic</a> — 輝煌全盛期</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="site-guide-card">
|
||||
<h3><a href="map.html">map.html</a></h3>
|
||||
<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.html#taipei">#taipei</a> — 台北聖地（主版面）</li>
|
||||
<li><a href="map.html#global">#global</a> — 海外遠征</li>
|
||||
<li><a href="../map/map.html#taipei">#taipei</a> — 台北聖地（主版面）</li>
|
||||
<li><a href="../map/map.html#global">#global</a> — 海外遠征</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
@@ -211,8 +214,8 @@
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="particles.js"></script>
|
||||
<script src="portal-nav.js"></script>
|
||||
<script src="../particles.js"></script>
|
||||
<script src="../portal-nav.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -5,9 +5,9 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>水晶男孩｜消失的真相</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="../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="tablet.css">
|
||||
<link rel="stylesheet" href="../tablet.css">
|
||||
</head>
|
||||
|
||||
<body class="chronicle-page">
|
||||
@@ -44,8 +44,8 @@
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="portal-nav.js"></script>
|
||||
<script src="particles.js"></script>
|
||||
<script src="../portal-nav.js"></script>
|
||||
<script src="../particles.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -5,9 +5,9 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>水晶男孩｜無限挑戰六六歌2 — 紀實電子書</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="../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="tablet.css">
|
||||
<link rel="stylesheet" href="../tablet.css">
|
||||
</head>
|
||||
|
||||
<body class="ebook-ssg2-page totoga2-page">
|
||||
@@ -179,7 +179,7 @@
|
||||
</div>
|
||||
|
||||
<p class="ebook-back-link content-container">
|
||||
<a href="index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
|
||||
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
|
||||
<a href="#ebook" class="btn">同頁 · 電子書全螢幕</a>
|
||||
</p>
|
||||
|
||||
@@ -190,8 +190,8 @@
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="particles.js"></script>
|
||||
<script src="portal-nav.js"></script>
|
||||
<script src="../particles.js"></script>
|
||||
<script src="../portal-nav.js"></script>
|
||||
<script src="totoga2.js"></script>
|
||||
</body>
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
<!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="../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="../tablet.css">
|
||||
</head>
|
||||
|
||||
<body class="chronicle-page">
|
||||
<header class="map-archive-header">
|
||||
<div class="header-inner">
|
||||
<h1 class="main-title">瘋子與天才</h1>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">EUN JI-WON × VARIETY GRAVITY</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<main class="content-container variety-page-main chronicle-reader">
|
||||
<section id="variety" class="variety-block">
|
||||
<h2 class="section-title">瘋狂出演中</h2>
|
||||
<p class="intro-text">鏡頭一開就跑偏、台詞唸不完，卻總能把段子的節奏剪成「非他不可」——這是最容易被路人一眼看見的瘋勁，也是綜藝剪輯願意一路卡特寫給他的理由。</p>
|
||||
<p class="intro-text">卸妝後的聊天、運動場上的暴走、對成員毫不修飾的吐槽；那些看起來像日常，其實比劇本更誇張。此區之後會補上節目清單、名場面與入坑路線，先把舞台留好。</p>
|
||||
</section>
|
||||
<section id="stage" class="variety-block">
|
||||
<h2 class="section-title">隊長的氣場</h2>
|
||||
<p class="intro-text">同樣一句話，由他說出口就變成節奏點；同樣混亂的場面，他一站出來觀眾會先笑、再安靜聽。那不是威嚴口號，而是多年在台上台下磨出來的「控場直覺」。</p>
|
||||
<p class="intro-text">此區預留給談話、音樂、與團體互動裡的隊長切片——讓新粉先用氣場認人，再慢慢讀懂他背後的堅持。</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||||
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
|
||||
Design by <span class="mark_b">Jekkinoopy Studio</span>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="../portal-nav.js"></script>
|
||||
<script src="../particles.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 174 KiB After Width: | Height: | Size: 174 KiB |
|
Before Width: | Height: | Size: 333 KiB After Width: | Height: | Size: 333 KiB |
|
Before Width: | Height: | Size: 161 KiB After Width: | Height: | Size: 161 KiB |
|
Before Width: | Height: | Size: 726 KiB After Width: | Height: | Size: 726 KiB |
|
Before Width: | Height: | Size: 502 KiB After Width: | Height: | Size: 502 KiB |
@@ -90,7 +90,7 @@
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* albums.html：.archive-block 已改為 <section>，沿用 style.css 的 section 卡片版型 */
|
||||
/* albums/albums.html：.archive-block 已改為 <section>，沿用 style.css 的 section 卡片版型 */
|
||||
section.archive-block p {
|
||||
color: #4a4a4a;
|
||||
line-height: 1.7;
|
||||
@@ -101,7 +101,7 @@ section.archive-block p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* albums.html：精選作品表（含封面欄） */
|
||||
/* albums/albums.html：精選作品表（含封面欄） */
|
||||
.archive-discography {
|
||||
width: 100%;
|
||||
margin-top: 1.25rem;
|
||||
|
||||
+8
-8
@@ -123,7 +123,7 @@
|
||||
<article class="story-node story-node--ebook-ssg2" data-era="2016">
|
||||
<h3>傳奇回歸：重逢的感動合體</h3>
|
||||
<p>透過《無限挑戰》「六六歌2」跨越16年再次重聚，引起全韓黃色氣球海再現。</p>
|
||||
<a href="totoga2.html#ebook" class="timeline-ebook-cta">
|
||||
<a href="extra/totoga2.html#ebook" class="timeline-ebook-cta">
|
||||
<i class="fa-solid fa-hand-pointer" aria-hidden="true"></i>
|
||||
<span>點這裡翻開《六六歌2》紀實電子書</span>
|
||||
</a>
|
||||
@@ -148,33 +148,33 @@
|
||||
</div>
|
||||
<p class="intro-text">
|
||||
像劇情的反轉一樣過癮：這幾個節點，剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節，請開
|
||||
<a href="totoga2.html">六六歌2 整合專區</a>（影片／電子書／紀實長文八章，同一頁切換模式即可）。
|
||||
<a href="extra/totoga2.html">六六歌2 整合專區</a>（影片／電子書／紀實長文八章，同一頁切換模式即可）。
|
||||
</p>
|
||||
<div class="story-ebook-cta">
|
||||
<a href="totoga2.html#ebook" class="btn story-ebook-btn">開啟六六歌2 紀實電子書</a>
|
||||
<a href="totoga2.html" class="btn story-ebook-btn">六六歌2 整合專區</a>
|
||||
<a href="extra/totoga2.html#ebook" class="btn story-ebook-btn">開啟六六歌2 紀實電子書</a>
|
||||
<a href="extra/totoga2.html" class="btn story-ebook-btn">六六歌2 整合專區</a>
|
||||
</div>
|
||||
|
||||
<div class="merged-storyline">
|
||||
<article id="special" class="story-node" data-era="六六歌">
|
||||
<h3>六六歌實錄</h3>
|
||||
<p>把懸念、試探與哭點縫在同一條時間軸上；很多人第一次真正把「水晶男孩」打進搜尋框，就是從這種瘋狂的剪輯節奏開始。</p>
|
||||
<p><a href="totoga2.html#ssg2">對照這一段幕後敘事</a></p>
|
||||
<p><a href="extra/totoga2.html#ssg2">對照這一段幕後敘事</a></p>
|
||||
</article>
|
||||
<article id="negotiate" class="story-node" data-era="交涉">
|
||||
<h3>命運的交涉</h3>
|
||||
<p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面，而是還願不願意再一次肩並肩。</p>
|
||||
<p><a href="totoga2.html#negotiate">讀交涉與對話肌理</a></p>
|
||||
<p><a href="extra/totoga2.html#negotiate">讀交涉與對話肌理</a></p>
|
||||
</article>
|
||||
<article id="complete" class="story-node" data-era="歸位">
|
||||
<h3>拼圖的歸位</h3>
|
||||
<p>變數一個個被排除之後，驚喜接上登場段落；缺一角舞台的視覺，終於對齊觀眾席上堅守的那片黃。</p>
|
||||
<p><a href="totoga2.html#gather">從「召集」段開始補這條線</a></p>
|
||||
<p><a href="extra/totoga2.html#gather">從「召集」段開始補這條線</a></p>
|
||||
</article>
|
||||
<article id="past" class="story-node" data-era="最初">
|
||||
<h3>巔峰與雨天</h3>
|
||||
<p>急凍、告別、各自的跑道——並不是要你沉浸遺憾，而是讓你懂：後來每一次亮燈，為什麼會更值得尖叫。</p>
|
||||
<p><a href="totoga2.html#sechskies-profile">讀這條脈絡的起點</a></p>
|
||||
<p><a href="extra/totoga2.html#sechskies-profile">讀這條脈絡的起點</a></p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>水晶男孩｜瘋子與天才</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="../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="tablet.css">
|
||||
<link rel="stylesheet" href="../tablet.css">
|
||||
</head>
|
||||
|
||||
<body class="chronicle-page">
|
||||
@@ -44,8 +44,8 @@
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="portal-nav.js"></script>
|
||||
<script src="particles.js"></script>
|
||||
<script src="../portal-nav.js"></script>
|
||||
<script src="../particles.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -5,9 +5,9 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SECHSKIES 台灣行程地圖</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="../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="tablet.css">
|
||||
<link rel="stylesheet" href="../tablet.css">
|
||||
</head>
|
||||
|
||||
<body class="map-page">
|
||||
@@ -508,7 +508,7 @@
|
||||
</footer>
|
||||
|
||||
<script src="map.js"></script>
|
||||
<script src="portal-nav.js"></script>
|
||||
<script src="../portal-nav.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
+52
-21
@@ -119,47 +119,78 @@
|
||||
});
|
||||
}
|
||||
|
||||
/** 全站導覽 HTML — 僅修改此字串即可同步所有頁面 */
|
||||
const PORTAL_NAV_INNER_HTML = `
|
||||
<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
|
||||
/**
|
||||
* 站根與 `portal-nav.js` 同層；依腳本路徑與當前頁路徑計算回到站根的相對前綴（如 `../`）。
|
||||
* 子資料夾內頁面之導覽連結必須帶此前綴，否則 `./img`、`index.html` 會錯層。
|
||||
*/
|
||||
function portalNavRootPrefix() {
|
||||
const el =
|
||||
document.currentScript ||
|
||||
Array.from(document.querySelectorAll("script[src*='portal-nav.js']")).find((s) => s.src);
|
||||
if (!el?.src) return "./";
|
||||
try {
|
||||
const scriptPathname = new URL(el.src, window.location.href).pathname;
|
||||
const scriptDirSegs = scriptPathname.split("/").filter(Boolean);
|
||||
scriptDirSegs.pop();
|
||||
const pageDirSegs = window.location.pathname.split("/").filter(Boolean);
|
||||
pageDirSegs.pop();
|
||||
let i = 0;
|
||||
const a = scriptDirSegs;
|
||||
const b = pageDirSegs;
|
||||
while (i < a.length && i < b.length && a[i] === b[i]) {
|
||||
i += 1;
|
||||
}
|
||||
const ups = b.length - i;
|
||||
return ups > 0 ? "../".repeat(ups) : "./";
|
||||
} catch {
|
||||
return "./";
|
||||
}
|
||||
}
|
||||
|
||||
/** 全站導覽 HTML — `rp` 為站根相對前綴；僅修改此模板即可同步所有頁面 */
|
||||
function buildPortalNavInnerHTML(rp) {
|
||||
return `
|
||||
<a class="logo" href="${rp}index.html"><img src="${rp}img/logov.svg" alt="SECHSKIES Logo"></a>
|
||||
<ul>
|
||||
<li><a href="index.html#origin">淪陷瞬間</a>
|
||||
<li><a href="${rp}index.html#origin">淪陷瞬間</a>
|
||||
<ul class="portal-submenu">
|
||||
<li><a href="index.html#start">好奇的開端</a></li>
|
||||
<li><a href="index.html#mission">成立的初衷</a></li>
|
||||
<li><a href="index.html#timeline">跨時空軌跡</a></li>
|
||||
<li><a href="index.html#story">傳奇的轉折</a></li>
|
||||
<li><a href="${rp}index.html#start">好奇的開端</a></li>
|
||||
<li><a href="${rp}index.html#mission">成立的初衷</a></li>
|
||||
<li><a href="${rp}index.html#timeline">跨時空軌跡</a></li>
|
||||
<li><a href="${rp}index.html#story">傳奇的轉折</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="jiwon.html">瘋子與天才</a>
|
||||
<li><a href="${rp}jiwon/jiwon.html">瘋子與天才</a>
|
||||
<ul class="portal-submenu">
|
||||
<li><a href="jiwon.html#variety">瘋狂出演中</a></li>
|
||||
<li><a href="jiwon.html#stage">隊長的氣場</a></li>
|
||||
<li><a href="${rp}jiwon/jiwon.html#variety">瘋狂出演中</a></li>
|
||||
<li><a href="${rp}jiwon/jiwon.html#stage">隊長的氣場</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="concert.html">現場的震撼</a>
|
||||
<li><a href="${rp}concert/concert.html">現場的震撼</a>
|
||||
<ul class="portal-submenu">
|
||||
<li><a href="concert.html#stage-now">永恆的重逢</a></li>
|
||||
<li><a href="concert.html#stage-past">燦爛的最初</a></li>
|
||||
<li><a href="${rp}concert/concert.html#stage-now">永恆的重逢</a></li>
|
||||
<li><a href="${rp}concert/concert.html#stage-past">燦爛的最初</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="albums.html">黃色留聲機</a>
|
||||
<li><a href="${rp}albums/albums.html">黃色留聲機</a>
|
||||
<ul class="portal-submenu">
|
||||
<li><a href="albums.html#new">啟動新篇章</a></li>
|
||||
<li><a href="albums.html#classic">輝煌全盛期</a></li>
|
||||
<li><a href="${rp}albums/albums.html#new">啟動新篇章</a></li>
|
||||
<li><a href="${rp}albums/albums.html#classic">輝煌全盛期</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="map.html">聖地巡禮</a>
|
||||
<li><a href="${rp}map/map.html">聖地巡禮</a>
|
||||
<ul class="portal-submenu">
|
||||
<li><a href="map.html#taipei">台北聖地</a></li>
|
||||
<li><a href="map.html#global">海外遠征</a></li>
|
||||
<li><a href="${rp}map/map.html#taipei">台北聖地</a></li>
|
||||
<li><a href="${rp}map/map.html#global">海外遠征</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
const rootPrefix = portalNavRootPrefix();
|
||||
document.querySelectorAll("nav.portal-nav[data-portal-nav]").forEach((nav) => {
|
||||
nav.innerHTML = PORTAL_NAV_INNER_HTML;
|
||||
nav.innerHTML = buildPortalNavInnerHTML(rootPrefix);
|
||||
applyComingSoonToNav(nav);
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user