FinchUI 文章目录导航(fui_toc) 是 FinchUI 系列的 Z-BlogPHP 插件,能自动解析文章标题并生成真正的树形嵌套目录。支持简约、边框卡片、浮动侧边栏三种展示样式,可自由配置标题层级、自动编号、默认折叠、滚动高亮和插入位置。
样式跟随 FinchUI 2.0 设计规范,内置深色模式适配——只需外层容器添加 `.fui-dark` 即可自动切换。
后台提供颜色选择器,用于在浅色模式下自定义标题和链接配色。
前台交互由纯原生 JS 驱动,无任何第三方依赖。
作品升级日志
https://www.finchui.com/showcase/fui_toc_changelog.html
插件前端效果
如当前页面显示,使用了边框样式。
插件设置截图

多级嵌套目录
真正的 ul/li 树形结构子级条目前显示 └ 层级符号
自由选择标题层级
支持 h2 ~ h6多选组合,灵活配置
唯一锚点 ID
自动为标题生成 id 属性相同标题自动追加 -2、-3 避免冲突
最少标题阈值
标题数量低于设定值时不显示目录避免短文章出现多余目录
自动编号
可选显示层级编号格式:1. / 1.1. / 1.1.1.
显示设备控制
PC 和移动端同时显示仅 PC 端显示仅移动端显示
简约风格 (simple)
无背景无边框标题栏下方细线分隔融入正文排版
边框卡片 (boxed)
跟随主题的表面背景圆角边框标题栏蓝色底线
浮动侧边栏 (floating)
固定在页面右侧随页面滚动保持可见小屏自动退回行内模式
深色模式
跟随 FinchUI 2.0 深色规范外层加 .fui-dark 自动切换
自定义配色
后台颜色选择器设置标题色后台颜色选择器设置链接色不影响深色模式
折叠 / 展开
点击标题栏切换支持键盘 Enter / Space 操作可设置默认折叠
滚动高亮
滚动时实时标记当前章节浮动侧边栏模式效果最佳可关闭
平滑跳转
点击条目平滑滚动至对应标题支持固定顶栏偏移量配置