Verticator

для RevealJS и Quarto

Что Verticator делает?

Verticator отображает вертикальные индикаторы

Только на вертикальных слайдах

Стилизованные маркеры

Если вы не измените цвета в настройках, Verticator будет использовать цвета вашей темы: маркеры будут того же цвета, что и текст в вашей презентации

Цвет темы задается как переменная CSS (--c-theme-color) в элементе Reveal и может также использоваться другими элементами. На этой странице это rgb(255, 255,255), потому что это также цвет текста.

Стилизованные маркеры

Verticator определяет, выбран ли другой цвет фона слайда. Если вы не измените цвета в настройках, маркеры все равно будут иметь цвет заголовка или текста слайда.

На этой странице переменная CSS (--c-theme-color) имеет значение rgb(34, 34,34), потому что это также цвет текста.

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

Глобальные параметры

Приведенные ниже параметры настраиваются пользователем. В обычной презентации Reveal.js их можно задать с помощью JavaScript, но в Quarto это можно настроить с помощью параметров YAML.

themetag
color
inversecolor
skipuncounted
clickable

position
offset
autogenerate
scale
tooltip

Опция 1: themetag

Verticator использует ваши заголовки, чтобы задать цвет маркеров, но вы также можете использовать другие элементы:

format:
  revealjs:
    ...
    verticator:
      themetag: 'p'

Опция 2: color

Вы можете изменить (тематический) цвет маркеров на определенный. Вы можете использовать именованные цвета, шестнадцатеричный и rgb:

format:
  revealjs:
    ...
    verticator:
      color: 'yellow'

Опция 3: inversecolor

Вы можете переопределить цвет (тематических) маркеров, обратив его к определенному цвету. Они применяются, если цвет слайда противоположен цвету основного фона темы.

format:
  revealjs:
    ...
    verticator:
      inversecolor: 'red'

Опция 4: skipuncounted

Чтобы не указывать маркеры на определенных слайдах, установите для слайда атрибут данных data-visibility="uncounted". Затем установите для этого параметра (по умолчанию отключенного, но включенного здесь) значение true:

format:
  revealjs:
    ...
    verticator:
      skipuncounted: true

Опция 5: clickable

Нажатие на маркер Verticator приводит к переходу на соответствующую страницу. Этот режим включен по умолчанию, но может быть отключен.

format:
  revealjs:
    ...
    verticator:
      clickable: false

Опция 6: position

Verticator автоматически подстраивает своё положение в зависимости от параметра rtl в RevealJS. Эта опция применяется для языков с направлением письма справа налево, например, для иврита и арабского. В таких случаях Verticator располагается слева. Также его можно разместить вручную следующим образом:

format:
  revealjs:
    ...
    verticator:
      position: 'left' # or 'right'

Опция 7: offset

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

format:
  revealjs:
    ...
    verticator:
      offset: '40px'

Опция 8: autogenerate

Чтобы Verticator мог вставить индикаторы, требуется элемент UL с классом verticator. Если такого элемента ещё нет в HTML, Verticator создаст его автоматически. Эту функцию можно отключить, присвоив параметру autogenerate значение false.

format:
  revealjs:
    ...
    verticator:
      autogenerate: false

Опция 9: tooltip

Verticator может отображать всплывающие подсказки к заголовкам страниц, например, следующим образом:

format:
  revealjs:
    ...
    verticator:
      tooltip: 'data-name'

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

tooltip: 'data-name' или любой другой атрибут вертикального слайда.
tooltip: true or tooltip: 'auto'. Это позволит проверить заголовки каждого слайда в нужном порядке: data-verticator-tooltip, data-name, title, а если ничего не найдено, то заголовки внутри каждого слайда в указанном порядке: h1, h2, h3, h4.

Опция 10: scale

Verticator масштабируется в том же соотношении, что и слайды Reveal. Для корректировки масштаба можно задать его вручную.

format:
  revealjs:
    ...
    verticator:
      scale: 1 #Может быть установлено значение от 0,5 до 2

Параметры слайда

Принудительная установка инверсного цвета
Принудительная установка стандартного цвета
Принудительная установка конкретного цвета

Опция 1: Принудительно установить инверсный цвет

Принудительно установите для маркеров инверсный цвет с помощью атрибута data-verticator="inverse", даже если цвет фона слайдов не изменён.

Опция 2: Принудительно установить стандартный цвет

Принудительно установите стандартный цвет с помощью атрибута data-verticator="regular", даже на слайдах с инверсными цветами фона.

Опция 3: Принудительно установить конкретный цвет

Цвет Verticator может быть задан специально (для каждого слайда) с помощью атрибута данных data-verticator="*", где подстановочный знак является цветом CSS.

Не переусердствуйте! :)

Ограничьте количество вертикальных слайдов. Вероятно, вам не нужны 30 маркеров в правой части презентации.

Имейте ввиду!

Перейдите по ссылке Verticator plugin посмотреть больше демонстрационных материалов по RevealJS