Docsify Sidebar Pro

English

Docsify Sidebar Pro is a comprehensive plugin that completely overhauls the navigation and reading experience of your Docsify documentation. It brings a modern UI, collapsible sidebar, a draggable floating TOC, a customizable progress bar, multiple themes, and handy utility tools.

✨ Key Features

• 📂 Enhanced Sidebar: Collapsible folders (Accordion mode), file counts, and smooth transitions.
• 🎨 Multiple Themes: Built-in presets including Minimal, Colorful, Tech, Forest, Ocean, and Space.
• 🌗 Dark/Light Mode: Native support with persistence.
• 📑 Floating TOC: A detached, vertical-draggable-like Table of Contents panel for easier navigation.
• ⚙️ Settings Hub (Alt + M): A centralized modal to control settings, search pages, and adjust preferences.
• ⏯️ Auto Read: Automatic scrolling functionality with adjustable speed and Spotlight Reading.
• 📊 Word Count: Statistics for words, characters, symbols, and estimated reading time (supports English & Chinese).
• 📱 Mobile Ready: Optimized layout for smaller screens.

🚀 Installation

Add the CSS and JS files to your index.html after the Docsify script.

<!-- 1. Import CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-sidebar-pro@latest/docsify-sidebar-pro.min.css">

<!-- 2. Docsify Init -->
<script>
  window.$docsify = {
    name: 'My Docs',
    // ... other docsify settings ...
    
    // 3. Plugin Configuration (Optional)
    sidebarPro: {
      theme: 'minimal',      // 'minimal', 'colorful', 'tech', 'forest', 'ocean', 'space'
      accordion: false,      // Whether to close other folders when opening one
      showCount: true,       // Show file counts on folders
      darkMode: false,       // Default dark mode state
      scrollSpeed: 3,        // Default auto-read speed (1-10)
      panelOpacity: 0.9,    // Default opacity for the settings modal
      wordCount: {
        countable: true,
        language: "english", // or "chinese"
        showReadTime: true
      },
      autoReadSpotlight: true,
      progressBar: {
        enabled: true,
        type: 'line',        // 'line', 'gradient', 'runner', 'cat-paw', 'sakura', 'heartbeat'
        height: 3,           // Thickness in pixels
        position: 'top',       // 'top' or 'bottom'
        showPercentage: false
      }
    }
  };
</script>

<!-- 4. Import JS -->
<script src="https://cdn.jsdelivr.net/npm/docsify-sidebar-pro@latest/docsify-sidebar-pro.min.js"></script>

⌨️ Shortcuts & Usage

• Floating Button (Bottom Right):
  • Main Button: Click to jump to Top/Bottom. Hover to reveal menu.
  • Menu Items: Toggle TOC, Auto-Read, Dark Mode, Word Count info, and Settings.
• Settings Modal:
  • Open via the floating menu ⚙️ button.
  • Shortcut: Press Alt + M to open.
  • Esc: Close the modal.
  • Search: Quickly filter and jump to pages within the modal.

🎨 Theme Customization

You can switch themes instantly via the Settings Modal. Available themes:

| Theme | Accent Color | Vibe | | ------------ | ------------------- | ----------------------- | | Minimal | Green (#42b983) | Clean, Default Vue-like | | Colorful | Red (#FF5252) | Vibrant, Energetic | | Tech | Cyan (#00ffcc) | Dark, Cyberpunk-ish | | Forest | Green (#4caf50) | Nature, Calm | | Ocean | Blue (#00acc1) | Relaxing, Blue tones | | Space | Blue-Grey (#60a5fa) | Deep, Modern |

简体中文

Docsify Sidebar Pro 是一款功能全面的 Docsify 插件，旨在彻底改造文档的导航和阅读体验。它提供了现代化的 UI、可折叠侧边栏、可拖动的悬浮目录、可自定义的阅读进度条、多主题切换，以及自动阅读、深色模式等实用工具。

✨ 核心功能

• 📂 增强侧边栏: 支持文件夹折叠（手风琴模式）、显示文件数量徽标，拥有丝滑的动画效果。
• 🎨 多种主题: 内置 Minimal, Colorful, Tech, Forest, Ocean, Space 等多款精美主题。
• 🌗 深色/浅色模式: 完美支持夜间阅读，状态自动保存。
• 📑 可拖动悬浮目录 (TOC): 在右下角提供可垂直拖动并记忆位置的独立目录面板，长文阅读更轻松。
• 📊 自定义进度条: 多种风格（线条、B站小人、猫爪、樱花、心跳等）可选，实时展示阅读进度。
• ⚙️ 设置中心 (Alt + M): 集中管理的模态框，支持全局搜索页面、调节透明度、切换主题和进度条样式等。
• ⏯️ 自动阅读: 释放双手的自动滚动功能，支持速度调节和聚焦阅读。
• 📊 字数统计: 支持统计汉字、字符、符号及预计阅读时间。
• 📱 移动端适配: 针对手机屏幕进行了优化。

⌨️ 快捷键与使用

• 右下角悬浮球:
  • 主按钮: 点击快速跳转顶部/底部。悬停显示功能菜单。
  • 菜单项: 包含 目录(TOC)、自动阅读、模式切换、字数详情、设置。
• 设置面板:
  • 通过悬浮菜单的 ⚙️ 按钮打开。
  • 快捷键: 按下 Alt + M 快速呼出。
  • Esc: 关闭面板。
  • 搜索: 在面板内可以快速过滤并跳转文档页面。

🎨 主题列表

你可以在设置面板中实时切换主题。

| 主题名 | 强调色 | 风格描述 | | ------------ | -------------- | ------------------- | | Minimal | 绿色 (#42b983) | 简洁，默认 Vue 风格 | | Colorful | 红色 (#FF5252) | 鲜艳，充满活力 | | Tech | 青色 (#00ffcc) | 极客，赛博朋克风 | | Forest | 墨绿 (#4caf50) | 自然，森系 | | Ocean | 蓝色 (#00acc1) | 海洋，宁静 | | Space | 蓝灰 (#60a5fa) | 深邃，太空感 |

📝 License

MIT