在 Ghost 部落格中添加目錄 (TOC) 可以讓讀者輕鬆瀏覽長帖子,從而增強閱讀體驗。本指南將展示如何使用 TOCBOT 將 TOC 整合到任何 Ghost 主題中,TOCBOT 是一個 JavaScript 插件,可根據內容中的標題產生 TOC。
在 Ghost 中設定 TOCBOT
TOCBOT 根據您貼文中的標題自動建立目錄。請依照以下步驟進行設定:
- 存取您的 Ghost 管理儀表板並導航至
Settings > Code injection
。 - 在
Site Header
部分,新增 TOCBOT 腳本和樣式表:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.css" rel="stylesheet">
- 在
Site Footer
部分,使用以下腳本初始化 TOCBOT:
<script>
document.addEventListener('DOMContentLoaded', function() {
tocbot.init({
tocSelector: '.toc',
contentSelector: '.post-content',
headingSelector: 'h1, h2, h3, h4',
scrollSmooth: true
});
});
</script>
確保contentSelector
與您的主題中用於貼文內容的類別相符。常見的類別包括.post-content
,.gh-content
, 或者.c-content
。
- 將變更儲存到
Code injection
設定.
將目錄佔位符加入貼文中
若要在貼文中顯示目錄,請在您希望目錄出現的位置插入佔位符:
- 編輯要新增目錄的貼文。
- 在所需位置,透過鍵入新增 HTML 卡
/html
在編輯器中。 - 將以下程式碼插入 HTML 卡:
<div class="toc"></div>

此程式碼為目錄建立一個容器。在查看貼文時,TOCBOT 將根據內容中的標題使用產生的目錄填充此容器。
設定目錄樣式
您可以自訂目錄的外觀以符合您的主題:
- 在
Site Header
下的部分Settings > Code injection
,在 a 中加入自訂 CSS 樣式<style>
標籤:
<style>
.toc {
padding: 20px;
border: 1px solid #e0e0e0;
background-color: #f9f9f9;
border-radius: 5px;
}
.toc a {
text-decoration: none;
color: #333;
}
.toc a:hover {
text-decoration: underline;
}
</style>
根據需要調整樣式以適合您的設計偏好。
針對不同主題進行調整
由於不同的主題可能使用不同的類別名稱作為內容容器,因此請確保contentSelector
TOCBOT 初始化腳本中的內容與您的主題的內容類別相符:
- 檢查您的主題以找到適當的內容類別。首先,在您網站的標籤中開啟貼文。
- 右鍵點擊貼文內容並選擇
Inspect
開啟瀏覽器的開發者工具。 - 標識包含您的貼文內容的元素的類別名稱(例如,
.post-content
)。

- 更新
contentSelector
相應地在 TOCBOT 腳本中。
使 TOC 具有黏性
如果您希望目錄在讀者滾動時保持可見,您可以將其設定為黏性:
- 將以下 CSS 加入到
Site Header
在一個<style>
標籤:
<style>
.toc {
position: sticky; top: 20px;
}
</style>
這會將目錄相對於視口定位,從而在用戶滾動瀏覽帖子時使其保持在視圖中。
透過執行這些步驟,您可以透過動態目錄來增強 Ghost 博客,從而改善帖子的導航和讀者參與。