MenuTree 文章目录树插件

作者：kuakeba.cn | https://www.kuakeba.cn

根据文章内容中的子标题结构（h2/h3/h4）自动生成锚点目录树，点击目录项即可平滑滚动快速跳转至正文相应位置。支持文内占位符或模板插槽控制输出位置，并自带编辑器「插入标题」快捷按钮。

一、功能特性

• 自动生成目录树：扫描正文中的子标题，自动补锚点 id（已有 id 的标题自动复用），生成带层级缩进的目录
• 点击快速跳转：点击目录项平滑滚动至对应位置（scroll-margin-top 防止被吸顶导航遮挡）
• 三种输出位置：

 - auto 文内自动：目录树插入正文开头

 - manual 占位符模式：正文写 [menutree]，目录树在占位符处原位输出

 - slot 模板插槽：输出到 topicaftercontent 插槽（正文之后），配合模板 {:hookslot('topicafter_content')} 控制位置

• 编辑器快捷插入按钮：发帖/单页编辑器工具栏注入「插入标题」按钮，一键插入二级标题；自动适配 wangEditor、TinyMCE、Summernote、Trumbowyg、EasyMDE、纯文本框六种编辑器
• 零宿主改动：仅通过钩子（filterHtml / renderSlot / renderAssets）工作，无数据库表，不影响搜索摘要等非正文场景

二、安装与启用

1. 将 MenuTree 文件夹放入 plugins/ 目录
2. 后台「应用中心 → 插件列表」找到「文章目录树」，点击安装并启用
3. 无需任何数据库操作（无表）

三、配置项

四、使用方法

1. 正文内使用（默认 auto）

正常书写子标题即可（Markdown ## 标题 或富文本标题），保存后正文开头自动出现目录树：

<h2 id="mt-1">安装步骤</h2>
<h3 id="mt-2">环境准备</h3>

2. 占位符模式（manual）

配置输出位置为「占位符模式」，在正文需要的位置写：

第一段内容……

[menutree]

## 第一节

目录树会在 [menutree] 处原位输出（仅首处生效）。

3. 模板插槽模式（slot）

配置输出位置为「模板插槽」，主题/模板在需要的位置调用：

{:hook_slot('topic_after_content')}

提示：插槽输出依赖同请求内正文过滤先生成目录树，适用于帖子详情页/单页详情模板。

4. 编辑器快捷按钮

发帖页（后台 topicform / pageform、前台 create）编辑器工具栏出现「☰ 插入标题」按钮，点击在光标处插入二级标题（富文本编辑器插 <h2>，Markdown 编辑器插 ## 小标题）。

五、常见问题

• 目录树没有出现？ 检查正文是否含配置级别的子标题（默认仅 h2/h3），以及插件是否启用
• 正文已有标题 id？ 已有 id 的标题会被复用为锚点，不会重复添加
• 会被代码块里的 h2 干扰吗？ 只匹配真实 HTML 标题标签，代码高亮/转义文本不会误收录
• 隐藏内容（hide 插件）会生成目录吗？ 不会，仅处理 topic / page 正文场景

六、文件结构

plugins/MenuTree/
├── plugin.json          # 插件元信息
├── MenuTreePlugin.php   # 主类（filterHtml / renderSlot / renderAssets）
├── icon.svg             # 插件图标
└── README.md            # 使用文档

七、版本历史