• 介绍
  • 參数
  • 更新日志
  • 評價
  • 指南

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 端顯示仅移動端顯示

目錄樣式

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

    無背景無邊框標题欄下方細線分隔融入正文排版

  • 邊框卡片 (boxed)

    跟随主题的表面背景圓角邊框標题欄藍色底線

  • 浮動侧邊欄 (floating)

    固定在頁面右侧随頁面滚動保持可見小屏自動退回行内模式

  • 深色模式

    跟随 FinchUI 2.0 深色规範外層加 .fui-dark 自動切换

  • 自定義配色

    後臺颜色選择器设置標题色後臺颜色選择器设置链接色不影響深色模式

交互功能

纯原生 JS 驱動,無任何第三方依赖
  • 折叠 / 展開

    點击標题欄切换支持鍵盤 Enter / Space 操作可设置默認折叠

  • 滚動高亮

    滚動時實時標记當前章節浮動侧邊欄模式效果最佳可關闭

  • 平滑跳轉

    點击條目平滑滚動至對應標题支持固定顶欄偏移量配置

  • 無障礙支持

    ARIA 屬性標注鍵盤焦點樣式

不喜歡0
版本號
1.0.4
作品 ID
fui_toc
作者官网
https://zh-tw.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
扫码添加客服微信