在 Ghost 部落格中加入目錄 (TOC) 可促進較長文章的無縫導航，從而顯著改善讀者的體驗。本教學將引導您完成使用 TOCBOT 將目錄新增至任何 Ghost 主題的過程，TOCBOT 是一個 JavaScript 插件，可根據貼文中的標題自動產生目錄。
在 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，新增包含在標籤內的自訂 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>
您可以隨意調整這些樣式以滿足您的喜好。
修改各種主題
由於主題可能對內容部分使用不同的類別名稱，因此請確保contentSelectorTOCBOT 設定中的 與您主題的內容類別相符：
- 從任何開放的帖子開始檢查您的主題。
- 右鍵單擊貼文內容並選擇
Inspect存取瀏覽器的開發人員工具。 - 尋找與包含您的貼文內容的元素關聯的類別名稱，例如
.post-content。
- 請確保
contentSelector根據您發現的內容更新 TOCBOT 腳本中的 。
建立黏性目錄
要在讀者滾動時保持目錄可見，您可以將其設定為黏性：
- 在 中
Site Header，在標記內加入此 CSS<style>：
<style>
. toc {
position: sticky; top: 20px;
}
</style>
這將定位目錄相對於視口的位置，確保當用戶滾動瀏覽貼文時它仍然在視野中。
透過實作這些說明，您可以透過功能性目錄豐富您的 Ghost 博客，從而增強整個貼文的導航和讀者互動。
發佈留言