Перейти к основному содержимому

Установленные плагины Docusaurus

Этот документ описывает все плагины, установленные и настроенные в проекте документации SoftOnIT.

Математические плагины​

remark-math + rehype-katex​

  • Назначение: Поддержка математических формул в LaTeX синтаксисе
  • Возможности:
    • Инлайн формулы: $E = mc^2$ E=mc2E = mc^2
    • Блочные формулы: $$\int e^{-x^2} dx = \sqrt{\pi}$$ ∫e−x2dx=π\int e^{-x^2} dx = \sqrt{\pi}
    • Поддержка всех стандартных математических символов и операций
  • Тестовая страница: Тестирование математических формул

GitHub Flavored Markdown​

remark-gfm​

  • Назначение: Поддержка GitHub Flavored Markdown
  • Возможности:
    • Таблицы с выравниванием
    • Зачеркивание: ~~текст~~ текст
    • Автоматические ссылки
    • Списки задач: - [x] выполнено
    • Сноски: текст[^1]
  • Тестовая страница: Тестирование GFM

SEO и навигация​

@docusaurus/plugin-sitemap​

  • Назначение: Автоматическая генерация sitemap.xml
  • Возможности:
    • Индексация всех страниц сайта
    • Улучшение SEO
    • Автоматическое обновление при изменении контента
  • Результат: /sitemap.xml

PWA (Progressive Web App)​

@docusaurus/plugin-pwa​

  • Назначение: Превращение сайта в PWA
  • Возможности:
    • Кэширование контента для офлайн-работы
    • Установка как нативное приложение
    • Push-уведомления (настраиваются отдельно)
    • Быстрая загрузка повторных посещений
  • Файлы:
    • /manifest.json - манифест PWA
    • Service Worker генерируется автоматически

Настройки PWA​

{
  debug: true,
  offlineModeActivationStrategies: [
    'appInstalled',      // После установки как приложение
    'standalone',        // В standalone режиме
    'queryString',       // Через ?sw-debug в URL
  ],
  pwaHead: [
    // Иконки и метаданные для различных платформ
  ],
}

Редиректы​

@docusaurus/plugin-client-redirects​

  • Назначение: Управление редиректами на стороне клиента
  • Возможности:
    • Перенаправление старых URL на новые
    • Поддержка regex-паттернов
    • Клиентские редиректы без серверной конфигурации
  • Конфигурация: Настраивается в docusaurus.config.js

Дополнительные плагины​

docusaurus-plugin-image-zoom​

  • Назначение: Увеличение изображений по клику
  • Возможности: Zoom-эффект для всех изображений в документации

@docusaurus/theme-mermaid​

  • Назначение: Поддержка диаграмм Mermaid
  • Возможности: Создание диаграмм из текстового описания
  • Тестовая страница: Примеры Mermaid

Кастомные плагины​

remark-embed-video​

  • Назначение: Встраивание видео из различных платформ
  • Поддерживаемые платформы:
    • YouTube
    • RuTube
    • VK Video
  • Файл: /plugins/remark-embed-video.js

CSS Framework​

Tailwind CSS​

  • Назначение: Utility-first CSS framework
  • Использование: Стилизация компонентов и страниц
  • Конфигурация:
    • tailwind.config.js
    • postcss.config.js
    • src/css/custom.css

Проверка работы плагинов​

Для проверки работы всех плагинов используйте тестовые страницы:

  1. Типографика - базовые элементы
  2. Компоненты - Docusaurus компоненты
  3. Таблицы и код - таблицы и подсветка кода
  4. Контент-блоки - математика, Mermaid, видео
  5. Интерактивные элементы - формы и кнопки
  6. Математические формулы - LaTeX формулы
  7. GitHub Markdown - GFM функции

Производительность​

После установки всех плагинов рекомендуется:

  1. Проверить время сборки: npm run build
  2. Протестировать производительность: Lighthouse audit
  3. Проверить размер bundle: анализ webpack
  4. Тестировать PWA: в браузере с отключенной сетью

Обновление плагинов​

Для обновления всех плагинов используйте:

npm update

Или для конкретного плагина:

npm install @docusaurus/plugin-pwa@latest