• 介绍
  • 参数
  • 更新日志
  • 评价
  • 指南

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 端显示仅移动端显示

目录样式

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

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

  • 边框卡片 (boxed)

    跟随主题的表面背景圆角边框标题栏蓝色底线

  • 浮动侧边栏 (floating)

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

  • 深色模式

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

  • 自定义配色

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

交互功能

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

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

  • 滚动高亮

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

  • 平滑跳转

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

  • 无障碍支持

    ARIA 属性标注键盘焦点样式

不喜欢0
版本号
1.0.4
作品 ID
fui_toc
作者官网
https://www.finchui.com/
程序要求
1.7.2
PHP 版本
5.6
包体大小
169.19 KB
  • 202609-30

    v1.0.4

    适配 FinchUI 浅色与深色模式,统一目录主题样式。

    • 优化目录文字、背景、边框、圆角和滚动条接入 FinchUI 主题变量,自动跟随浅色与深色模式。
    • 变更后台自定义标题色和链接色改为目录局部变量,深色模式下优先使用框架主题配色。
    • 安全前台输出自定义颜色前增加十六进制颜色格式校验。
  • 202609-05

    v1.0.3

    目录样式按需加载,完善配置入口保护和运行兼容性。

    • 优化仅在实际生成文章目录时加载目录样式,并避免重复输出。
    • 修复未安装 mbstring 扩展时目录锚点生成不再发生致命错误。
    • 安全配置页面在管理员鉴权后验证应用中心或 Finch Store 已启用。
    • 变更补齐应用身份、兼容环境、价格和更新摘要等打包清单。
  • 202603-13

    v1.0.2

    限制目录仅在文章页生效

    • 修复目录插件现在仅在文章页生效,独立页面(页面管理创建的页面)不再生成目录
  • 202603-07

    v1.0.1

    作品首发

    • 新增作品首发

猜你喜欢

分享

复制链接

星岚工作室添加客服qq

上班时间:9:00-22:00
周六、周日:14:00-22:00
wechat
扫码添加客服微信