FinchUI 文章目录导航

自动为文章生成多级嵌套目录,支持滚动高亮、折叠展开、浮动侧边栏等功能

版本 1.0.26 更新 2026-03-07 作者 星岚工作室
升级日志 立即购买

目录生成

自动解析文章标题,生成真正的树形嵌套目录
  • 多级嵌套目录

    真正的 ul/li 树形结构 子级条目前显示 └ 层级符号

  • 自由选择标题层级

    支持 h2 ~ h6 多选组合,灵活配置

  • 唯一锚点 ID

    自动为标题生成 id 属性 相同标题自动追加 -2、-3 避免冲突

  • 最少标题阈值

    标题数量低于设定值时不显示目录 避免短文章出现多余目录

  • 自动编号

    可选显示层级编号 格式:1. / 1.1. / 1.1.1.

  • 插入位置

    文章顶部 第一段落之后 第一个标题之前

  • 显示设备控制

    PC 和移动端同时显示 仅 PC 端显示 仅移动端显示

目录样式

三种展示风格,跟随 FinchUI 2.0 设计规范
  • 简约风格 (simple)

    无背景无边框 标题栏下方细线分隔 融入正文排版

  • 边框卡片 (boxed)

    白色卡片背景 圆角边框 标题栏蓝色底线

  • 浮动侧边栏 (floating)

    固定在页面右侧 随页面滚动保持可见 小屏自动退回行内模式

  • 深色模式

    跟随 FinchUI 2.0 深色规范 外层加 .fui-dark 自动切换

  • 自定义配色

    后台颜色选择器设置标题色 后台颜色选择器设置链接色 不影响深色模式

交互功能

纯原生 JS 驱动,无任何第三方依赖
  • 折叠 / 展开

    点击标题栏切换 支持键盘 Enter / Space 操作 可设置默认折叠

  • 滚动高亮

    滚动时实时标记当前章节 浮动侧边栏模式效果最佳 可关闭

  • 平滑跳转

    点击条目平滑滚动至对应标题 支持固定顶栏偏移量配置

  • 无障碍支持

    ARIA 属性标注 键盘焦点样式