Skip to content

Latest commit

 

History

History
98 lines (68 loc) · 5.36 KB

shortcodes.md

File metadata and controls

98 lines (68 loc) · 5.36 KB
Raw

Дополнительные компоненты

🎠 Карусель

Компонент позволяет отображать серии изображений (слайдов) в боксе. Каждое изображение (слайд) демонстрируется несколько секунд, пока не сменится следующим. Слайды переключаются стрелками влево и вправо, а также нажатием на маркер слайда в центре бокса. Ниже изображений отображается подпись.

Пример использования карусели.

🔧 Как использовать

Карусель можно встраивать в markdown-разметку с помощью пользовательского макрокода (shortcode) с указанием аргументов:

{{< carousel data-file-name="graduates-2022" items="1" full-height="515" height="425" unit="px" duration="4000" >}}

Аргументы макрокода:

  • data-file-name — наименование YAML-файла с данными для карусели из директории data, о заполнении YAML-файла см. ниже;
  • items — количество слайдов для одновременного отображения (желательно использовать только значение 1);
  • full-height — высота компонента с учётом подписи (желательное значение — 515);;
  • height — высота изображения внутри компонента (должна быть меньше значения full-height, желательное значение — 425);
  • unit — единицы измерения для указания высоты (желательное значение — px);
  • duration — время демонстрации слайда в миллисекундах.

Данные в YAML-файле

YAML-файл следует располагать в корневой директории data.

Файл состоит из массива images, в котором хранятся элементы с следующими полями:

  • image — ссылка на файл изображения;
  • content_text — подпись к изображению.

Пример:

images:
  - image: /static/images/1.png
    content_text: "Подпись к первому изображению"
  - image: 2.png
    content_text: "Подпись к второму изображению"
  • /static/images/1.png — аболютный путь;
  • 2.png — файл в локальной папке.

Рекомендации

  • Желательно не использовать более семи элементов в одной карусели, это замедлит показ картинок.
  • Картинки желательно сжать для ускорения просмотра, использовать формат WebP.

🎠 🔗 Карусель с баннерами

Компонент позволяет отображать серии изображений (слайдов) в боксе. Каждое изображение (слайд) демонстрируется несколько секунд, пока не сменится следующим. Слайды переключаются стрелками влево и вправо, каждое изображение сопровождается кнопкой со ссылкой.

🔧 Как использовать

Аналогично карусели.

{{< banner-carousel data-file-name="banners" items="1" height="450" unit="px" duration="4000" >}}

Аргументы макрокода:

  • data-file-name — наименование YAML-файла с данными для карусели из директории data, о заполнении YAML-файла см. ниже;
  • items — количество слайдов для одновременного отображения (желательно использовать только значение 1);
  • height — высота изображения внутри компонента (должна быть меньше значения full-height, желательное значение — 450);
  • unit — единицы измерения для указания высоты (желательное значение — px);
  • duration — время демонстрации слайда в миллисекундах.

Данные в YAML-файле

YAML-файл следует располагать в корневой директории data.

Файл состоит из массива images, в котором хранятся элементы с следующими полями:

  • image — ссылка на файл изображения;
  • content_link — ссылка в кпопке.
  • content_text — надпись в кпопке.

Пример:

images:
  - image: /images/index-banners/1.jpg
    content_link: "/blog/graduates-2022/"
    content_text: "Выпускники 2022 года"