為 Ghost 主題新增目錄 (TOC)：逐步指南

為 Ghost 主題新增目錄 (TOC)：逐步指南

在 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 博客，從而增強整個貼文的導航和讀者互動。

來源

:

iOS 18.2：歐盟用戶刪除並重新安裝App Store指南
取消 Firestick 遙控器配對的逐步指南

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *