Макет страницы и удобство чтения
Чтобы обеспечить читателям комфортное и эффективное чтение, EpoCanvas Docs использует классическую и понятную трёхколоночную разметку страницы. При чтении длинных статей читатель в любой момент понимает, в каком месте сайта он находится и какой раздел статьи сейчас читает.
Описание основных зон интерфейса
Открыв любой документ, вы увидите страницу, разделённую на четыре основные функциональные зоны:
Рисунок: аннотированная схема трёхколоночной разметки на примере страницы «Подробно о правилах рендеринга». ① верхняя глобальная панель навигации; ② левое меню категорий; ③ центральная область чтения; ④ правая панель «Оглавление страницы». Все четыре зоны на схеме отмечены рамками и номерами.
Рисунок: структурная схема трёхколоночной разметки с названиями и назначением каждой зоны.
1. Верхняя глобальная панель навигации (Header)
Расположена в самом верху страницы, закреплена и остаётся видимой при прокрутке вниз; высота — 3.5rem. Слева направо на панели расположены следующие элементы (см. аннотированное изображение ниже):
Рисунок: крупный план элементов верхней панели с аннотациями. ① логотип и название сайта; ② глобальное поле поиска; ③ группа кнопок главной навигации; ④ бейдж версии; ⑤ переключатель языков; ⑥ переключение светлой и тёмной темы; ⑦ вход в репозиторий GitHub; ⑧ вход в сообщество Telegram.
- Логотип и название сайта (①): слева отображаются значок EpoCanvas и название проекта; клик быстро возвращает на главную страницу сайта документации.
- Глобальное поле поиска (②): вводите ключевые слова прямо в поле, чтобы искать по содержимому текущей страницы; сочетание
Ctrl+K/Cmd+Kоткрывает окно полнотекстового поиска по всему сайту, подробнее — в разделе Полнотекстовый поиск и горячие клавиши. - Кнопки главной навигации (③): быстрые ссылки на часто используемые разделы — «Главная», «О продукте», «Быстрый старт» и другие; текущий раздел подсвечивается автоматически.
- Бейдж версии (④): показывает номер релиза, соответствующий текущей документации (например,
v1.2.0); по клику открывается подробный журнал изменений на GitHub. - Переключатель языков (⑤): по клику на кнопку языка раскрывается список из 10 доступных языков; после выбора открывается та же статья на выбранном языке, при этом навигация, боковая панель и основной текст переключаются вместе.
- Переключение светлой и тёмной темы (⑥): значки солнца и луны позволяют переключаться между светлым и тёмным режимами.
- GitHub и Telegram (⑦⑧): значки справа ведут соответственно на открытый репозиторий и в техническое сообщество.
2. Левая боковая панель с категориями (Sidebar)
Расположена слева (ширина 16.5rem, около 264 пикселей) и отображает все разделы документации в логической иерархии:
- Сворачивание групп: документы сгруппированы по разделам — «Обзор продукта и начало работы», «Основные функции и руководство по использованию» и другие; клик по названию группы разворачивает или сворачивает её.
- Подсветка текущей страницы: статья, которую вы читаете, выделяется в левом меню капсульной подложкой цвета темы.
- Запоминание позиции прокрутки: при переходе от одной статьи к другой позиция прокрутки боковой панели сохраняется и не сбрасывается к началу.
3. Центральная область основного текста (Main Content)
Находится в центре экрана и служит основной областью с содержимым технической документации:
- Заголовок страницы и дата обновления: вверху основного текста отображаются заголовок статьи (из поля
titleво Frontmatter) и дата «последнего обновления», что помогает оценить актуальность материала. - Комфортная ширина для чтения: максимальная ширина области основного текста ограничена значением
60rem, чтобы на слишком широких мониторах строки не были чрезмерно длинными и взгляд не сбивался. - Ссылки навигации внизу: в конце каждого документа автоматически создаются ссылки «Предыдущая» и «Следующая» для последовательного чтения в порядке боковой панели.
- Кнопка копирования в блоках кода: в правом верхнем углу каждого блока кода есть кнопка, копирующая исходный код одним нажатием.
4. Правая панель с планом статьи (Table of Contents)
Расположена справа от основного текста:
- Автоматический сбор заголовков: при рендеринге страницы система автоматически разбирает заголовки второго уровня (
##) и третьего уровня (###) текущего документа и формирует «оглавление страницы». - Отслеживание с подсветкой: по мере прокрутки страницы вниз оглавление автоматически подсвечивает раздел, который вы сейчас читаете.
- Плавный переход по клику: клик по любому подразделу в оглавлении плавно прокручивает страницу к соответствующему абзацу и обновляет якорь в адресной строке (например,
#описание-основных-зон-интерфейса), что удобно для копирования и распространения ссылок.
Светлая и тёмная темы
EpoCanvas Docs предоставляет одновременно светлую и тёмную темы; обе цветовые схемы полностью определены CSS-переменными в src/styles/custom.css:
- Следование системным настройкам: при первом открытии сайт определяет настройки светлой/тёмной темы операционной системы и показывает соответствующую тему.
- Ручное переключение и запоминание: переключить тему можно кнопкой в верхней панели; выбор сохраняется в LocalStorage браузера и действует при следующих открытиях.
Рисунок: вид того же сайта в светлой теме (на примере страницы быстрого старта).
Адаптивность для телефонов и планшетов
На экранах разного размера — телефонов, планшетов и других устройств — макет страницы автоматически подстраивается под размеры экрана:
| Тип устройства | Ширина экрана | Поведение макета |
|---|---|---|
| Широкоэкранный ПК / ноутбук | >= 1152px | Полностью отображается стандартная трёхколоночная разметка (левое меню + центральный текст + правое оглавление). |
| Планшет / узкое окно | 800px ~ 1152px | Правое оглавление скрывается, остаётся двухколоночная разметка (левая навигация + основной текст). |
| Смартфон | < 800px | Обе боковые панели сворачиваются, основной текст занимает всю ширину. По клику на кнопку меню в верхней панели боковая панель выдвигается как шторка. |
И на сверхшироком мониторе, и при беглом просмотре с телефона чтение остаётся естественным и комфортным.