FinchUI Article Directory Navigator（fui_toc）は、FinchUIシリーズ用のZ-Blog PHPプラグインで、記事のタイトルを自動的に解析し、実際のツリーネストされたディレクトリを生成します。シンプル、ボーダーカード、フローティングサイドバーの3つの表示スタイルをサポートし、タイトルレベル、自動番号付け、デフォルトの折りたたみ、スクロールハイライト、挿入位置を自由に設定できます。
スタイルはFinchUI 2.0の設計仕様に従い、ダークモード適応を内蔵しており、外側のコンテナに`.fui-dark`を追加するだけで自動的に切り替えられます。
背景にはカラーピッカーがあり、ライトモードでタイトルとリンクの配色をカスタマイズできます。
フロントエンドのインタラクションは純粋なネイティブJSで駆動され、サードパーティの依存はありません。
アップグレードジャーナル。
https://ja.finchui.com/showcase/fui_toc_changelog.html
プラグインフロントエンドエフェクト
現在のページに表示されているように、境界線スタイルが使用されます。
プラグイン設定のスクリーンショット
マルチレベルネストディレクトリ
真のul/liツリー構造サブバーには現在、階層記号が表示されています
タイトル階層を自由に選択
H 2〜H 6をサポート複数選択の組み合わせ、柔軟な構成
ユニークなアンカーID
タイトルのid属性を自動生成同じタイトルは自動的に2、3を追加して衝突を避ける
最小タイトルしきい値
タイトル数が設定値を下回ると目次が表示されない短い記事に余分な目次が現れないようにする
自動番号付け
オプションで階層番号を表示フォーマット: 1./1.1./1.1.1.
挿入位置
記事のトップ最初の段落の後最初のタイトルの前に
ディスプレイデバイス制御
PCとモバイル端末が同時に表示されますPC版のみ表示されます。モバイル端末のみ表示
シンプルスタイル(simple)
背景なし、枠線なしタイトルバーの下に細い線で区切る本文のレイアウトに統合する
ボーダーカード(boxed)
主題の表面の背景に従ってください角丸のボーダータイトルバーの青い下線
フローティングサイドバー
ページの右側に固定ページをスクロールしても表示小画面は自動的にインラインモードに戻ります
ダークモード
FinchUI 2.0ダーク仕様に従う外側に. fui-blackを追加すると、自動的に切り替えられます。
カスタム配色
バックグラウンドカラーピッカーでタイトルカラーを設定バックグラウンドカラーピッカーでリンクカラーを設定するダークモードに影響を与えません
折りたたみ/展開
タイトルバーをクリックして切り替えますキーボードのEnter/Space操作をサポートデフォルトの折りたたみを設定できます
スクロールハイライト
スクロール中に現在の章をリアルタイムでマークフローティングサイドバーモードが最適です閉じることができます
スムーズジャンプ
項目をクリックすると、対応するタイトルにスムーズにスクロールします固定トップバーオフセット構成をサポート
アクセシビリティサポート
AR IA属性の注釈キーボードフォーカススタイル
914466480
カスタマーサポートQQを追加する