為 Blogger 新增「巢狀頁籤」，再多資訊也能一目了然 (SOP教學)
當一篇文章需要呈現的資訊量過於龐大、層級複雜時，傳統的線性寫作方式常會導致頁面過長，讓讀者迷失在無盡的滾動中。「巢狀頁籤 (Nested Tabs)」是一種專業的使用者介面 (User Interface) 設計模式，它允許您在一個頁籤的內容中，再嵌入另一組頁籤，是解決此問題的絕佳方案。
使用巢狀頁籤主要有三大好處：
- 最大化空間效益： 在有限的頁面空間內，收納極為豐富的內容，版面更顯清爽。
- 內容結構化： 建立清晰的資訊層級，引導使用者從大分類逐步深入到子項目細節。
- 提升使用者體驗： 使用者可以根據興趣快速跳轉到目標內容，有效降低資訊焦慮感。
本篇教學將提供一套完整的標準作業流程 (SOP)，讓您只需安裝一次，即可在任何文章中重複使用這套專業的巢狀頁籤系統。
第一章：安裝標準作業流程 (SOP)
我們的目標是將核心的 CSS 和 JavaScript 一次性地安裝到 Blogger 範本中。這是一個一勞永逸的過程。
步驟一：進入 HTML 編輯模式 (並備份！)
⚠️ 絕對必要： 在修改任何程式碼之前，請務必先備份！
- 前往您的 Blogger 後台，點選「主題」。
- 點擊「自訂」按鈕旁的下拉箭頭，選擇「備份」以下載目前的範本，確保安全。
- 備份後，再次點擊下拉箭頭，選擇「編輯 HTML」。
步驟二：貼上「巢狀頁籤」核心程式碼
在 HTML 編輯器中，使用 Ctrl + F 或 Cmd + F 搜尋 </head> 標籤。將下方這一段完整的程式碼，貼在 </head> 標籤的正上方。
重要提示：
為了確保程式碼能成功儲存在 Blogger 的 XML 範本中，CSS 與 JavaScript 都必須用 <![CDATA[...]]> 包裹起來，以避免特殊字元導致的解析錯誤。我們的程式碼已為您處理好這一點。
程式碼 (放置於 </head> 之前)
<style type='text/css'>/*<![CDATA[*/
/* --- 紫色主題巢狀頁籤 CSS --- */
.tabs-container {
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
margin-top: 20px;
overflow: hidden;
}
.tabs-container.inner-tabs {
margin-top: 25px;
box-shadow: none;
border: 1px solid #e0d6e4;
}
.tab-buttons {
display: flex;
border-bottom: 2px solid #e0d6e4;
background-color: #f9f6fb;
}
.tab-button {
padding: 12px 20px;
cursor: pointer;
border: none;
background-color: transparent;
font-size: 1em;
font-weight: 500;
color: #583d72;
position: relative;
transition: color 0.3s ease, background-color 0.3s ease;
}
.tab-button:hover {
background-color: #f3e5f5;
color: #4a148c;
}
.tab-button.active {
color: #6a1b9a;
font-weight: 600;
}
.tab-button.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background-color: #6a1b9a;
}
.tab-contents {
padding: 25px;
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
}
/* --- 卡片系統 CSS (用於頁籤內容) --- */
.card-list-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 15px;
padding-top: 15px;
}
.article-card {
display: flex;
flex-direction: column;
text-decoration: none;
background-color: #fff;
border: 1px solid #e9ecef;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: all 0.2s ease;
}
.article-card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}
.card-thumbnail {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
background-color: #f0f0f0;
}
.card-content {
padding: 15px;
flex-grow: 1;
}
.card-title {
margin: 0;
font-size: 1em;
line-height: 1.4;
color: #34495e;
}
/*]]>*/</style>
<script type='text/javascript'>//<![CDATA[
document.addEventListener('DOMContentLoaded', () => {
// 使用更穩健的選擇器和初始化邏輯
const containers = document.querySelectorAll('.tabs-container');
containers.forEach(container => {
const buttons = container.querySelectorAll(':scope > .tab-buttons > .tab-button');
buttons.forEach(button => {
button.addEventListener('click', () => {
const targetId = button.dataset.tabTarget;
const targetPanel = container.querySelector(targetId);
// 只處理當前容器內的按鈕和面板
container.querySelectorAll(':scope > .tab-buttons > .tab-button').forEach(btn => btn.classList.remove('active'));
container.querySelectorAll(':scope > .tab-contents > .tab-panel').forEach(panel => panel.classList.remove('active'));
button.classList.add('active');
if (targetPanel) {
targetPanel.classList.add('active');
}
});
});
});
});
//]]></script>步驟三：儲存主題
點擊編輯器右下角的「儲存」圖示。至此，您的部落格已經具備了建立巢狀頁籤的功能。
第二章：使用藍圖 (Usage Blueprint)
安裝好核心程式碼後，您就可以在任何文章或頁面中，透過編輯「HTML 檢視」，來撰寫頁籤的內容。
HTML 結構解析
- .tabs-container: 這是整個頁籤系統的最外層容器。
- .tab-buttons: 裝載所有頁籤按鈕的容器。
- <button class="tab-button">: 頁籤按鈕。
- data-tab-target="#panel-id": 這個屬性非常關鍵，它的值必須對應到下方內容面板的 id (記得加上 #)。
- .tab-contents: 裝載所有內容面板的容器。
- <div class="tab-panel">: 內容面板。
- id="panel-id": 它的 id 必須與上方按鈕的 data-tab-target 對應。
- .active: 將這個 class 加到您希望「預設顯示」的按鈕和面板上。
- 巢狀結構: 要建立巢狀頁籤，只需在一個 .tab-panel 內部，再完整地放入一組新的 .tabs-container 即可。
完整 HTML 範例 (含實際效果預覽)
您可以直接複製下方的結構作為模板，再修改成您自己的內容。下方的區塊就是使用這套系統的實際效果：
物理學 (Physics)
探索物質、能量、空間與時間的基本原理。物理學是最基礎的自然科學之一，旨在理解宇宙的基本組成和支配它們的法則。
力學 (Mechanics)
研究物體的運動和力的關係。牛頓三大運動定律是古典力學的基石。
電磁學 (Electromagnetism)
研究電、磁以及它們之間交互作用的物理學分支。馬克士威方程組是其核心理論。
熱力學 (Thermodynamics)
研究熱現象中物態轉變和能量轉換規律的學科。
Tags
Blogger技巧