Slick carousel: the last carousel you’ll ever need

Установка

Каждое путешествие должно где-то начинаться, и Slick не исключение! Для установки есть два варианта: либо с помощью CDN, либо с помощью диспетчера пакетов.

CDN

Slick предлагает два варианта использования CDN.Сделайте выбор:

После этого просто вставьте CSS как ссылки в HTML-страницу head и JavaScript непосредственно перед закрывающим тегом body .

Et voilà! Вы готовы использовать его. 😊

Диспетчер пакетов

Если вы предпочитаете устанавливать библиотеку через диспетчер пакетов, у вас также есть несколько вариантов.

 
 yarn add slick-carousel 
 
 bower install --save slick-carousel 
 
 npm install slick-carousel 
 

Далее у вас есть еще больше возможностей!. . 🤯 Во-первых, вы можете вставить соответствующие файлы CSS и JavaScript в свою HTML-страницу так же, как и в предыдущем разделе. Только на этот раз вы будете извлекать файлы из папки модулей вашего узла.

С другой стороны, я предпочитаю напрямую импортировать файлы в основные (S) файлы CSS и JavaScript вашего проекта. Это особенно рекомендуется в сочетании с такими инструментами, как Webpack и Gulp.

 
 @import "~ пятно-карусель / пятно / пятно"; 
 
 @import "~ гладкая-карусель / гладкая / гладкая-тема"; 
 

 
 import 'slick-carousel / slick / slick'; 
 

Хорошо, теперь, когда мы успешно установили его, пора показать, как на самом деле все делается в Slick.😋

Понимание основ

С библиотекой Slick carousel 🎠 в вашем распоряжении масса функций, но их слишком много, чтобы на самом деле рассмотреть их все. Но, честно говоря, это не моя цель! Вместо этого я просто хочу помочь вам понять, как работает библиотека и как читать ее документацию.

Код

Предположим, вы начинаете с нескольких изображений и хотите превратить их в красивую карусель. Как вы продвигаетесь?

Ну, сначала мы должны подготовить HTML-макет наших изображений таким образом, чтобы он позволял Slick превратить его в карусель. Мы делаем это, добавляя 2 слоя div в нашу коллекцию изображений с самый внешний слой, содержащий имя класса по вашему выбору.

Класс нашего внешнего блока div особенно важен ❗, потому что мы используем его, чтобы сообщить Slick, где наш карусель, которую мы делаем следующим образом.

 
 $ ('. my-carousel'). slick ({
 
}); 
 

После выбора нашей карусели с помощью селектора jQuery мы применяем slick () и позвольте библиотеке творить чудеса… 🦄. По умолчанию Slick создает карусель из одного элемента со стрелками навигации. Но на этом история еще не заканчивается, потому что мы все еще можем рассказать Slick , как настраивать нашу карусель. И мы делаем это, передавая объект с парами настроек ключ-значение.

Функции

Хорошо, допустим, я хочу создать отзывчивую карусель с несколькими слайдами. Какие настройки мне нужно включить? 🧐

Во-первых, давайте включим несколько слайдов в нашей карусели.Как показано выше, ключ slidesToShow отвечает за эту функцию и принимает значение типа , целое число , для которого по умолчанию установлено значение 1. Как насчет того, чтобы изменить это значение на 2?

 
 $ ('. My-carousel'). Slick ({
 
 slidesToShow: 2, 
 
}); 
 

Далее, наша карусель будет отзывчивой! Опять же, как показано на изображении выше, клавиша , отвечающая за , принимает объект, содержащий точки останова и соответствующий объект настроек.Сначала может быть сложно угадать структуру этого объекта, но, к счастью, мы можем проконсультироваться с демонстрацией с некоторым кодом на их странице.

Как насчет того, чтобы показывать только 1 слайд для мобильных устройств? 📱

 
 $ ('. My-carousel'). Slick ({
 
 slidesToShow: 2, 
 
 отзывчивый: [{
 
 точка останова: 500, 
 
 настройки: {
 
 slidesToShow: 1, 
 
} 
 
} 
}] 
 
}); 
 

Эта небольшая демонстрация может продолжаться бесконечно, но сейчас, я думаю, вы уловили суть (надеюсь 😅).Я рекомендую взглянуть на документацию и изучить различные доступные настройки.

Ошибок в изобилии!

Ни одно программное обеспечение не обходится без недостатков, и во время тестирования Slick я обнаружил две ошибки, которые доставили мне немало головной боли . ..

Отсутствие рендеринга в скрытом элементе div

Когда я впервые использовал Slick, я поместил его в скрытый элемент div, который можно было включать и выключать. К моему удивлению, карусель не отображалась, пока я не нажал одну из кнопок навигации, как показано в этом примере.👈

К счастью, кто-то уже сталкивался с этой проблемой. Как оказалось, ширина слайдов карусели автоматически вычисляется на основе родительского элемента, который оказывается равным 0, если он скрыт. К сожалению, этот вопрос так и не был решен! (╯ ° □ °） ╯︵ ┻━┻

Однако я нашел быстрое и грязное решение. Вместо инициализации карусели при загрузке страницы, она будет инициализирована при щелчке по элементу, отвечающему за создание родительского элемента карусели. видимый.

 
 $ ('# button-toggle'). Click (() => {
 
 setTimeout (() => {
 
 $ ('. My-carousel'). Slick ({
 
}); 
 
}, 200); 
 
 setTimeout (() => {
 
 $ ('. My-carousel'). RemoveClass ('invisible'); 
 
}, 250); 
 
}); 
 

В моем маленьком хаке мне пришлось добавить крошечную задержку, иначе код не запустился. Кроме того, чтобы скрыть от пользователя дрожащую визуализацию, сама карусель по умолчанию невидима и становится видимой только после завершения визуализации.Теперь, когда вы нажимаете кнопку, создается впечатление, что карусель отображается с небольшой задержкой. Еще один грязный трюк — ввести постепенное появление и вуаля! Как будто бага никогда не было.

Ошибка производственной сборки Webpack

Если вы импортируете SCSS Slick с оператором @import и также используете Webpack, вы будете удивлены при создании своего проекта для производства.

 
 ОШИБКА в ./node_modules/css-loader!./node_modules/postcss-loader/lib !./node_modules/sass-loader/lib/loader.js!./sass/app.scss Модуль не найден: ошибка: не удается разрешить './ajax-loader.gif' в '/ Users / Vishal / Documents / Work / nf-core / sass '@ . /node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./sass/app.scss 6: 89679- 89707 
 

Zoinks! 😥 Однако выход есть!

Просто добавьте эти две строки перед операторами импорта:

 
 $ slick-font-path: "~ slick-carousel / slick / fonts /"; 
 
 $ slick-loader-path: "~ пятно-карусель / пятно /"; 
 
 @import '~ slick-carousel / slick / slick'; 
 
 @import '~ гладкая-карусель / гладкая / гладкая-тема'; 
 

available-slick: новая библиотека доступной карусели

Здесь, в Accessible360, мы видим множество каруселей и слайдеров, и мы кое-что узнали о том, как сделать их доступными.Наша команда опытных инженеров по доступности находит их на большинстве веб-сайтов во всех отраслях и размерах компаний, от небольших некоммерческих организаций до крупных платформ электронной коммерции, и практически все они имеют одну общую черту: они в основном недоступны для пользователей программ чтения с экрана и пользователей клавиатуры!

Slick Slider — одна из первых и наиболее широко используемых библиотек кода, которая упростила создание каруселей и слайдеров для разработчиков. Поскольку это одна из библиотек карусели, которую мы чаще всего видим, когда помогаем нашим клиентам исправить их веб-сайты, для нас имеет смысл попытаться помочь решить некоторые проблемы в источнике.К сожалению, Slick Slider не поддерживался активно в течение нескольких лет, с более чем 1000 открытыми проблемами и почти 200 ожидающими pull-запросами, поэтому непосредственный вклад в улучшения — непростая задача.

Чтобы помочь разработчикам по всему миру, которые хотят пройти аудит доступности и улучшить свои веб-сайты для пользователей с ограниченными возможностями, мы официально выпускаем специальный форк Slick Slider со всеми нашими лучшими рекомендациями! Эта вилка включает в себя несколько замечательных новых функций, улучшения существующих функций и множество новых параметров настройки, все они проверены и одобрены командой Accessible360, состоящей из пользователей программ чтения с экрана и инженеров по специальным возможностям! Лучше всего то, что он обратно совместим почти со всеми существующими конфигурациями — просто замените размещенные файлы или ссылки на файлы CDN, и все готово!

Попробуйте!

Все оригинальные живые демонстрации были воссозданы с максимальной точностью, чтобы вы могли испытать и сравнить все новые функции и изменения на себе: https: // available360. github.io/accessible-slick.

Мы также рады поделиться нашей растущей коллекцией реалистичных примеров кода на CodePen, чтобы помочь вам создавать распространенные варианты использования, такие как красивые баннеры-герои и галереи миниатюр PDP: https://codepen.io/collection/nwRGZk.

Начните использовать доступное пятно уже сегодня!

available-slick имеет полностью открытый исходный код и может быть загружен прямо из репозитория Github. Мы также выпустили его как пакет для NPM, поэтому вы можете использовать его в качестве зависимости в своем проекте прямо сейчас, используя следующую команду: npm install @ available360 / available-slick

Поддержка и обслуживание

Мы сделаем все возможное, чтобы своевременно обновлять доступную информацию о последней версии Slick Slider и оперативно реагировать на любые обнаруженные вами ошибки.По общим вопросам об использовании, установке и администрировании проекта создайте ветку на вкладке «Обсуждения»!

← Вернуться в блог

SB Модуль Slick Slider

Модуль Slick Slider / Carousel от Tortoise IT добавляет ряд мощных модулей Carousel в вашу установку Divi Builder для тем Divi или Extra. Это ручная карусель, галерея изображений WooCommerce и рекомендуемые продукты Easy Digital Downloads.Модули обладают встроенной способностью реагировать, поэтому вам не нужно беспокоиться о проблемах с отображением на разных устройствах, и они просты в использовании. Вы даже можете использовать его как ползунок полной ширины отдельно или с несколькими слайдами. Отличный и легкий модуль. Мысли и комментарии приветствуются!

Более подробно модули следующие:

Ручная карусель

Это основное и оригинальное использование плагина. Это позволяет добавлять карусель или слайдер с множеством вариантов макета: полная ширина, 50/50, 75/25, 25/75 для содержимого и изображения.Поскольку это модуль, он работает точно так же, как и другие модули, поэтому вы можете настраивать шрифты, размеры, отступы, поля и цвета раздела. Вы можете ссылаться прямо из изображения слайдера (который очень востребован в разработке) или текста, и, конечно же, если вы хотите добавить кнопку или призыв к действию в тексте, вы можете сделать это с помощью встроенных кнопок Divi или любого кода кнопки. твой выбор!

Карусель сообщений

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

Галерея изображений продуктов WooCommerce

Теперь с поддержкой элементов галереи WooCommerce! При использовании на странице продукта WooCommerce (через Woo Layout Injector или аналогичный) он позволит вам показывать слайдер / карусель Slick, содержащий изображения галереи продуктов.Нет лучшего способа представить изображения вашего продукта, чем в карусели.

Одной из приятных особенностей этого нового модуля является то, что вы можете настроить макет с помощью карусели под обычным модулем изображения продукта (с заданным именем класса), который при нажатии заменяет изображение продукта и его собственную интерактивную ссылку. Действительно, очень аккуратно!

Easy Digital Downloads избранные продукты

Как видно на домашней странице elegancemarketplace.com, этот модуль покажет автоматическую карусель, содержащую ссылки на избранные продукты вашего магазина.Очень эффективный и простой в настройке модуль для сайтов, использующих Easy Digital Downloads для функциональности корзины покупок.

Разработчики

Добавлен фильтр «sb_divi_module_slick_js_init», открывающий для редактирования весь гладкий массив инициализации JS. Просто добавьте свой собственный фильтр и отредактируйте перед возвратом, и это изменит вывод.

Основан на плагине jQuery Carousel ‘Slick’ и преобразован для использования в Divi / Extra (сайты на основе конструктора Divi). Живые демонстрации исходного модуля jQuery можно увидеть здесь.

По любым вопросам поддержки обращайтесь по этой ссылке http://docs.tortoise-it.co.uk/

Прокрутите вниз, чтобы увидеть форму поддержки

Эта тема, макет или плагин состоит из двух частей.

1. Код PHP и встроенный HTML находятся под лицензией General Public License
(GPL). Вы найдете копию GPL в том же каталоге, что и этот файл лицензии
.

2. Все остальные части, включая, помимо прочего, код CSS, изображения и дизайн, защищены авторским правом
соответствующего поставщика и НЕ лицензированы по GPL.

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

* Поддержка предоставляется напрямую поставщиками.

Пожалуйста, войдите, чтобы получить доступ к форме поддержки. вы можете сделать это здесь

Как использовать Slick Module в Drupal 8

Одна из участниц OSTraining хочет, чтобы на ее сайте был слайдер-карусель.Она хочет, чтобы карусель показывала 3 слайда с изображениями и некоторый текст под ними, а карусель перемещалась только на одну позицию за раз, когда вы нажимаете кнопку «Далее».

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

Продолжайте читать, чтобы узнать, как использовать этот модуль!

Шаг №1.

Теперь пора добавить JS-библиотеку для удобного модуля.Вы можете использовать файловый менеджер вашей операционной системы или терминал для следующей операции:

• Введите следующие команды по порядку:

библиотеки mkdir

Это создает каталог с именем библиотеки в корневой папке вашей установки Drupal.

библиотеки компакт-дисков

Для доступа к справочнику.

wget https://github.com/kenwheeler/slick/archive/1.8.0.tar.gz

Эта команда загружает красивую библиотеку из репозитория GitHub в виде сжатого tar-файла .gz файл.

tar xzvf 1.8.0.tar.gz

Для распаковки файла tar.gz .

мв пятно-1.8.0 / пятно

Для изменения имени несжатой папки.

кд ..

Чтобы вернуться в корневую папку.

композитору требуется «drupal / blazy: 1.0-rc4»

Это загрузит конкретную версию Blazy, необходимую для правильной работы Slick, поскольку стабильная версия Slick работает только с версией 1.0 из Blazy.

мв blazy-master / blazy

Для изменения имени несжатой папки.

rm * .zip && rm * .tar.gz

Для удаления обоих сжатых файлов.

У вас должна получиться следующая структура папок:

Файлы slick.min.js и blazy.min.js находятся внутри папок slick и blazy соответственно.

кд ..

Чтобы вернуться в корневую папку.

композитору требуется drupal / slick_views

Это загрузит модуль Slick Views, который интегрирует Drupal Views с Slick.

• Щелкните Расширьте .
• Включить следующие модули:
  • Blazy
  • Blazy UI
  • Slick
  • Slick UI
  • гладкие просмотры
• Щелкните Установить .

Теперь мы настроены и можем приступить к настройке Slick Optionset .

Шаг №2. Набор опций Slick

• Щелкните Конфигурация> Slick .

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

• Щелкните Добавьте гладкий набор опций .

Вам будет предложено множество вариантов, большинство из которых не требуют пояснений. Давайте посмотрим на некоторые из них.

• Наденьте на набор опций надлежащей метки.
• Заменить на Предыдущие и Следующие стрелки текст с символами «<» (меньше чем) и «>» (больше чем), так что код читается следующим образом:

<

• Увеличьте количество слайдов, чтобы показать до 3.
• Увеличьте скорость до 900 мс (замедляя эффект скольжения).
• Измените переопределение CSS на Swing .
• Нажмите Сохранить .

Шаг №3. — Создайте представление карусели

• Щелкните Структура> Представления> Добавить представление .
• Введите — собственное имя представления.
• Показать Контент типа Артикул .
• Выберите Создайте блок .
• Выберите Slick Carousel полей.
• Установить количество элементов в блоке на 0.
• Щелкните Сохранить и отредактировать .

• Щелкните Добавьте в Поля раздел.
• Введите Body в поле поиска.
• Проверьте опцию Body .
• Введите Изображение в поле поиска.
• Отметьте вариант изображения.
• Щелкните Добавьте и настройте поля .

• Измените параметр Formatter на Trimmed .
• Установите количество символов на 150 в качестве ограничения Обрезанный .
• Щелкните Применить и продолжить .

• Измените стиль изображения на Средний .
• Свяжите изображение с Контентом.
• Щелкните Применить .

• Переставьте поля в следующем порядке:
• Щелкните Slick Carousel Settings .
• Check Vanilla Slick .
• Выберите набор параметров, который вы создали ранее.
• Щелкните Применить .

Шаг №4. — Поместите блок

• Щелкните Структура> Компоновка блока .
• Прокрутите до раздела Content .
• Щелкните Поместите блок .
• Найдите только что созданного представления.
• Щелкните Установите блок .

• Перетащите блок за блоком Main page content .
• Прокрутите вниз и нажмите Сохранить блоки.

Теперь вы можете взглянуть на одну из своих статей и протестировать карусель. Поздравляю!

Остальное — стили CSS. Чтобы улучшить макет, например, с помощью CSS Grid, прочтите эту статью.

Спасибо за чтение!

Об авторе

Хорхе жил в Эквадоре и Германии. Теперь он вернулся на родину в Колумбию. Свое время он переводит с английского и немецкого на испанский. Ему нравится играть с Drupal и другими системами и технологиями управления контентом с открытым исходным кодом.

Расширение TYPO3 ‘Slick Carousel’ (гладкая карусель)

3.0,3 / стабильный 20 февраля 2020 г.	Небольшие исправления в сборках и изменение зависимости от typo3 / cms-frontend	9.5.0 — 9.5.99	Скачать ZIP-архив
3. 0,2 / стабильный 13 мая 2019	Обновите версию jquery (выпуск безопасности https://blog.jquery.com/2019/04/10/jquery-3-4-0-released/)	9.5.0 — 9.5.99	Скачать ZIP-архив
3.0,1 / стабильный 9 октября 2018 г.	Выпуск исправления — возникла проблема с номерами версий.	9.5.0 — 9.5.99	Скачать ZIP-архив
3.0,0 / стабильный 8 октября 2018 г.	Slickcarousel версии 3. 0.0 для TYPO3 9LTS	9.5.0 — 9.5.99	Скачать ZIP-архив
2.0,0 / стабильный 26 июня 2017 г.	Новая версия для 8LTS — Сообщите, если есть ошибки	8.6.0 — 8.7.99	Скачать ZIP-архив
1.2,0 / стабильный 8 марта 2017 г.	Возвращает статическую опцию включения	7.6.0 — 7.99.99	Скачать ZIP-архив
1. 1,3 / стабильный 27 февраля 2017 г.	Установите максимальный размер изображения в слайдере с фоновым изображением	7.6.0 — 7.99.99	Скачать ZIP-архив
1.1,2 / стабильный 17 января 2017 г.	Изменены настройки Lazyload по умолчанию.	7.6.0 — 7.99.99	Скачать ZIP-архив
1.1,1 / стабильный 16 января 2017 г.	Повышена совместимость с VHS до 3. 1.0.	7.6.0 — 7.99.99	Скачать ZIP-архив
1.1.0 / стабильный 15 сентября 2016 г.	Теперь совместим с VHS 3.0.1 и PHP7	7.6.0 — 7.99.99	Скачать ZIP-архив
1.0,1 / стабильный 6 сентября 2016 г.	[ВЕРСИЯ 1.0.1] Удалить переход CSS figcaption	7.6.0 — 7.99.99	Скачать ZIP-архив
1. 0,0 / стабильный 2 сентября 2016 г.	[ЗАДАЧА] Версия 1.0.0; Отключить гладкие типы в конфигурации расширения	7.6.0 — 7.99.99	Скачать ZIP-архив
0.3,3 / стабильный 27 июля 2016 г.	Слить ветку ‘release / 0.3.3’	7.6.0 — 7.99.99	Скачать ZIP-архив
0.3,2 / стабильный 21 июля 2016 г.	Версия: 0.3.2 * Исправление: PID IRRE	7.6.0 — 7.99.99	Скачать ZIP-архив
0.3,1 / стабильный 14 апреля 2016 г.	Версия: 0.3.1 • Исправление: пересчет высоты при изменении размера окна • Исправление: гладкие текстовые элементы отображают слайды с другими элементами содержимого • Добавить значки для бэкэнда	7.6.0 — 7.99.99	Скачать ZIP-архив
0,3,0 / стабильный 6 апреля 2016 г.	Версия: 0.3,0 * Добавить Progressbar для всех типов слайдеров * Новый тип слайдера> Slick — Text (изображение как фон CSS) * Добавлена ​​опция «автозапуска» в Basic Slider Подробнее: https://github.com/misterboe/slickcarousel	7.6.0 — 7.99.99	Скачать ZIP-архив
0.2,2 / стабильный 8 марта 2016 г.	Версия: 0.2.2 * Изменено описание * Исправление: (TS) jQuery force сверху	7.6.0 — 7.99.99	Скачать ZIP-архив
0.2,1 / стабильный 2 февраля 2016 г.	Версия: 0.2.1 * Исправление: (TS) JS включает переключатель	7.6.0 — 7.99.99	Скачать ZIP-архив
0.2,0 / стабильный 20 января 2016 г.	Версия: 0.2.0 • Сглаживание теперь по умолчанию и работает [cssEase: cubic-bezier ()] • Улучшения CSS (спасибо Оливеру Ортелю с analog.de)	7.6.0 — 7.99.99	Скачать ZIP-архив
0,1,0 / стабильный 13 января 2016 г.	История изменений: Версия: 0.1,0 • Случайная сортировка для Expert Slider	7.6.0 — 7.99.99	Скачать ZIP-архив
0.0,5 / бета 18 декабря 2015 г.	Slick — последняя карусель, которая вам когда-либо понадобится. Для получения дополнительной информации посетите https://github.com/misterboe/slickcarousel. Если вам нужно больше функций, создайте проблему на github.	7.6.0 — 7.99.99	Скачать ZIP-архив
0,0.4 / бета 9 декабря 2015 г.	Slick — последняя карусель, которая вам когда-либо понадобится.Для получения дополнительной информации посетите https://github.com/misterboe/slickcarousel. Если вам нужно больше функций, создайте проблему на github.	7.6.0 — 7.99.99	Скачать ZIP-архив
0.0,3 / бета 8 декабря 2015 г.	Slick — последняя карусель, которая вам когда-либо понадобится. Для получения дополнительной информации посетите https://github.com/misterboe/slickcarousel. Если вам нужно больше функций, создайте проблему на github.	7.6.0 — 7.99.99	Скачать ZIP-архив
0,0.2 / бета 8 декабря 2015 г.	Slick — последняя карусель, которая вам когда-либо понадобится.это расширение слайдера typo3. для получения дополнительной информации посетите https://github.com/misterboe/slickcarousel	7.6.0 — 7.99.99	Скачать ZIP-архив
0.0,1 / бета 7 декабря 2015 г. No related posts. Вперед Ссылка в тексте html: Виды ссылок | htmlbook.ru Назад Лучшая книга по sql: Лучшие книги по SQL для начинающих – список литературы по базам данных Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт Рубрики Css Html Http Javascript Photoshop Верстка Вопросы и ответы Макет Развитие сайтов Сайт Шаблон Шрифт Разное Рубрики Css Html Http Javascript Linux Photoshop Адаптив Верстка Вопросы и ответы Макет Развитие сайтов Разное Сайт Советы Шаблон Шаблоны Шрифт Шрифты