首先確認Piti插件的目錄功能已啟用，檢查piti.config.js中是否設置toc:true，并在Markdown中插入[[toc]]標記；其次通過配置minLevel和maxLevel控制標題范圍，使用containerClass自定義樣式，或在Vue/React中引入組件動態渲染目錄。

如果您使用Piti插件為文檔或網站內容生成結構化目錄，但發現目錄未正確顯示或無法自動生成，可能是配置或調用方式存在問題。以下是解決此問題的步驟：

本文運行環境：MacBookPro，macOSSonoma

一、啟用Piti插件的目錄生成功能

確保Piti插件已正確安裝并激活目錄生成模塊。該功能依賴于標題層級的識別，因此需確認插件設置中啟用了基于標題（如H1-H6）的自動索引。

1、打開項目根目錄下的piti.config.js文件。

2、在配置對象中添加toc:true字段，表示開啟目錄生成。

3、保存文件并重新啟動本地服務，查看頁面是否渲染出目錄區域。

二、在Markdown文件中插入目錄標記

Piti插件通常通過特定語法標識目錄插入位置。若未手動指定，則不會自動創建目錄容器。

1、在目標Markdown文檔的開頭或所需位置插入特殊標記[[toc]]。

2、確保該標記獨占一行，且前后無其他字符干擾解析。

3、構建文檔后檢查頁面是否出現層級化的標題列表。

三、配置標題層級過濾范圍

有時生成的目錄包含過多細粒度標題，影響閱讀體驗。可通過設置限定參與生成的標題級別范圍。

1、piti.config.js中的toc選項，將其設為對象形式。

四、自定義目錄樣式與容器類名

默認樣式可能不符合主題設計需求，可通過自定義CSS類控制目錄外觀。

1、在配置文件中為toc添加containerClass:custom-toc屬性。

2、在項目的全局CSS文件中定義.custom-toc{}。

3、刷新頁面后觀察目錄是否應用了新的字體、縮進或邊框效果。

五、使用前端組件動態渲染目錄

對于支持Vue或React框架的Piti項目，可利用內置組件實現更靈活的目錄集成。

1、在Vue模板中引入<toc></toc>組件標簽。

2、確保當前上下文提供了包含標題信息的headers數據源。

3、組件將根據路由變化實時更新目錄結構，適用于單頁應用模式。

以上就是Piti插件如何生成目錄頁面_Piti插件生成目錄頁面完整教程的詳細內容，！