Плагины VuePress back-to-top и reading-progress

Рассмотрим установку и работу плагинов plugin-back-to-top и plugin-reading-progress.

За основу возьмем HelloWorld проект. Полная версия примера размещена в этом репозитории.

back-to-top

Плагин добавляет кнопку которая скролит страницу наверх. Кнопка появляется только если страницы прокручена по вертикали.

Для установки добавляем команду в скрипт создания проекта 01_CreateProject.bat:

И активируем плагин в config.js:

Запускаем сайт, скролим вниз и видим появившуюся кнопку:

Плагин VuePress scroll to top

reading-progress

Плагин добавляет индикатор показывающий насколько страница прокручена вниз. Это удобно при чтении с телефона, где скроллбар отображается только в процессе прокрутки.

Для установки добавляем команду в скрипт создания проекта 01_CreateProject.bat:

И активируем плагин в config.js:

При прокрутке отображается прогресс чтения:

Плагин VuePress reading progress

Плагин позволяет настроить отображения индикатора только на некоторых страницах: как глобально в настройках, так и для каждой странице отдельно. Пример глабальной настройки включающей индикатор везде кроме главной страницы:

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *