內容簡介
總結：TOC Builder by RobertIvan 是一款內容條目表格的外掛程式，可以自動從您的內容標題生成導覽選單。它包含管理介面進行配置，適用於長篇內容、文件站點和部落格。
問題與答案：
1. TOC Builder by RobertIvan能夠自動掃描內容的標題範圍是什麼？
- 回答：可以自動掃描內容的標題範圍為H1-H6。
2. 這個外掛程式在滾動時如何突出顯示目前所在部分？
- 回答：TOC Builder具備SpyScroll功能，可以在滾動時突出顯示目前所在部分。
3. 未來的架構中，TOC Builder的管理介面將容納哪些功能？
- 回答：包括自訂配色方案和字型選項、進階CSS自定義、性能優化控制、分析追踪能力、預建設計模板和多語言支持基礎架構。
外掛標籤
開發者團隊
原文外掛簡介
TOC Builder by RobertIvan is a Table of Contents plugin that automatically generates a navigation menu from your content’s headings. It includes an admin interface for configuration and is suitable for long-form content, documentation sites, and blogs.
Core Features
Auto-Detection – Automatically scans content for headings (H1-H6)
Smooth Scroll – Animated scrolling to sections
SpyScroll – Highlights the current section in the TOC while scrolling
Gutenberg Ready – Includes a native block with live preview in the editor
Configurable – Customize position, colors, heading levels, and more
Performance – Assets loading and caching optimized
Responsive – Compatible with desktop, tablet, and mobile devices
Admin Interface
TOC Builder by RobertIvan features an admin settings page for configuration:
Design System
Gradient color scheme
Animations and transitions
Card-based layout
System typography
WordPress Sidebar Menu Structure
Dedicated Sidebar Menu – Menu in WordPress sidebar with a custom icon
General Settings – Core TOC functionality with live preview
Appearance Settings – Visual customization options (coming soon)
Advanced Settings – Options for developers (coming soon)
Premium Features – Planned functionality
Bookmarkable URLs – Direct URLs for each section
User Experience
Live Preview – Preview updates based on selected heading levels
Heading Selection – Click on heading boxes (H1-H6) to toggle selection
Visual Hierarchy – Preview shows TOC structure based on heading selections
Interactive Demo – Collapsible TOC preview with hide/show functionality
Visual Feedback – Checkboxes with gradient backgrounds when selected
2-Column Layout – Settings on left, sticky live preview on right (desktop)
Responsive Design – Stacked layout on smaller screens
Future Architecture
The admin interface is designed to accommodate upcoming features:
Custom color schemes and typography options
Advanced CSS customization
Performance optimization controls
Analytics and tracking capabilities
Pre-built design templates
Multi-language support infrastructure
Suitable For
Long-form blog posts and articles
Documentation and knowledge bases
Educational content and tutorials
Product guides and manuals
Any content with multiple headings
Technical Details
File Structure
toc-master/
├── assets/
│ ├── css/
│ │ ├── style.css (Frontend TOC styles)
│ │ └── admin-premium.css (Admin interface styles)
│ └── js/
│ ├── script.js (Frontend functionality)
│ ├── admin-settings.js (Admin interface interactions)
│ └── block.js (Gutenberg block)
├── includes/
│ ├── class-toc-generator.php (Core TOC generation logic)
│ ├── class-toc-settings.php (Settings page with UI)
│ └── class-toc-block.php (Gutenberg block registration)
└── toc-builder.php (Main plugin file)
Admin Interface Architecture
The settings pages use a component-based architecture:
CSS Design System – CSS custom properties, modular components, responsive breakpoints
WordPress Sidebar Navigation – Individual pages for each settings section
Live Preview System – TOC rendering with dynamic heading selection
Color Palette
Primary Colors:
* Primary Gradient: #4F46E5 → #7C3AED
* Accent Cyan: #06B6D4
* Accent Purple: #A855F7
Neutral Colors:
* Gray Scale: #F1F5F9 → #0F172A
* Success: #10B981
* Warning: #F59E0B
Support
For support, feature requests, and bug reports, please visit the plugin’s support forum on WordPress.org.
Credits
Developed with ❤️ for the WordPress community.
