FinchUI 文章目錄導航(fui_toc) 是 FinchUI 系列的 Z-BlogPHP 插件,能自動解析文章標题并生成真正的樹形嵌套目錄。支持简约、邊框卡片、浮動侧邊欄三种展示樣式,可自由配置標题層级、自動编號、默認折叠、滚動高亮和插入位置。
樣式跟随 FinchUI 2.0 设计规範,内置深色模式适配——只需外層容器添加 `.fui-dark` 即可自動切换。
後臺提供颜色選择器,用于在浅色模式下自定義標题和链接配色。
前臺交互由纯原生 JS 驱動,無任何第三方依赖。
作品升级日志
https://zh-tw.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 操作可设置默認折叠
滚動高亮
滚動時實時標记當前章節浮動侧邊欄模式效果最佳可關闭
平滑跳轉
點击條目平滑滚動至對應標题支持固定顶欄偏移量配置