ALTGnomeWiki
ALTGnomeWiki copied to clipboard
OlegShchavelev
[ Contest - @Ampernic ] Добавить рендер галереи для оформления статей ALT Gnome Wiki
В рамках улучшения функциональности VitePress предлагается реализовать компонент галерея для layout: doc. Этот компонент должен позволять авторам вставлять галерею(и) изображений использую шаблонную переменную и использовать frontmatter для управления содержанием. Это значительно упростит процесс создания контента и сделает его более удобным для авторов.
Предлагаю использовать шаблонный генератор Vue для вызова компонентов. Вот пример его синтаксис:
<Gallery idx=2 type="slider" col=3 />
Предлагаю следящее layout (типы)
grid — адаптацию делим на мобильные устройства и все остальные. На мобильных устройствах мы обычно прокручиваем изображения с помощью жестов. Для отображения изображений мы используем библиотеку Spiner, которая позволяет отображать 1,2 изображения. На других устройствах мы отображаем галерею в виде сетки с возможностью управления колонками.
carousel — это галерея, которая отображается через библиотеку Swiper. На мобильных устройствах мы показываем 1,2 изображения, на планшетах — 3, а на остальных устройствах — 4 в видимой зоне.
slider — это галерея, которая отображается через библиотеку Swiper. На мобильных устройствах и всех остальных устройствах отображаем 1.2 изображения.
Возможность управлять содержимым галереи через frontmatter или с помощью атрибутов Vue
- Можно подписать изображение.
- Можно управлять ориентацией изображений.
Требования к стилям галереи
Я предлагаю использовать для организации галереи библиотеку Swiper.
Попробуем данный вариант использовать: https://www.npmjs.com/package/markdown-it-gallery
Необходимо добавить возможность размещать несколько экземпляров. Я был бы очень признателен авторам статей, если бы они подсказали, на какой статье можно поэкспериментировать.
Беру в исполнение
Ветка dev-new-gallery
Так же думаю свяжем с задачами #349, коль уж будем трогать галереи
