首先确认piti插件的目录功能已启用，检查piti.config.js中是否设置toc: true，并在markdown中插入[[toc]]标记；其次通过配置minlevel和maxlevel控制标题范围，使用containerclass自定义样式，或在vue/react中引入组件动态渲染目录。
如果您使用Piti插件为文档或网站内容生成结构化目录，但发现目录未正确显示或无法自动生成，可能是配置或调用方式存在问题。以下是解决此问题的步骤：
本文运行环境：MacBook Pro，macOS Sonoma
一、启用Piti插件的目录生成功能
确保Piti插件已正确安装并激活目录生成模块。该功能依赖于标题层级的识别，因此需确认插件设置中启用了基于标题（如H1-H6）的自动索引。
1、打开项目根目录下的piti.config.js文件。
2、在配置对象中添加toc: true字段，表示开启目录生成。
3、保存文件并重新启动本地服务，查看页面是否渲染出目录区域。
二、在Markdown文件中插入目录标记
Piti插件通常通过特定语法标识目录插入位置。若未手动指定，则不会自动创建目录容器。
1、在目标Markdown文档的开头或所需位置插入特殊标记 [[toc]]。
2、确保该标记独占一行，且前后无其他字符干扰解析。
3、构建文档后检查页面是否出现层级化的标题列表。
三、配置标题层级过滤范围
有时生成的目录包含过多细粒度标题，影响阅读体验。可通过设置限定参与生成的标题级别范围。
1、编辑piti.config.js中的toc选项，将其设为对象形式。
2、添加minLevel: 2和maxLevel: 4，表示仅包含H2至H4级别的标题。
3、重新生成页面，验证目录条目是否符合预期筛选结果。
四、自定义目录样式与容器类名
默认样式可能不符合主题设计需求，可通过自定义CSS类控制目录外观。
1、在配置文件中为toc添加containerClass: "custom-toc"属性。
2、在项目的全局CSS文件中定义.custom-toc { /* 自定义样式 */ }。
3、刷新页面后观察目录是否应用了新的字体、缩进或边框效果。
五、使用前端组件动态渲染目录
对于支持Vue或React框架的Piti项目，可利用内置组件实现更灵活的目录集成。
1、在Vue模板中引入<toc></toc>组件标签。
2、确保当前上下文提供了包含标题信息的headers数据源。
3、组件将根据路由变化实时更新目录结构，适用于单页应用模式。
