Bootstrap 4 в Drupal 8/9 с Bootstrap Barrio

Мы собираемся использовать Bootstrap 4 в Drupal 8/9 с Bootstrap Barrio. Тема Bootstrap Barrio для Drupal 8/9 интегрирует Bootstrap 4 (или Bootstrap 5, если хотите) с вашим сайтом Drupal.

Bootstrap — очень популярный фреймворк для создания сайтов. Он предоставляет дизайнерам и разработчикам общий язык для общения, что значительно упрощает процесс разработки.

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

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

Шаг №1.- Установите тему

Прежде чем мы начнем, убедитесь, что на вашем сайте есть хотя бы одна статья, чтобы вы могли провести сравнение после изменения настроек темы. Поместите также блок внутри боковой панели региона во вторую очередь (Структура > Макет блока > Разместить блок).

• Откройте терминальное приложение вашей операционной системы.
• Поместите курсор в корень вашей установки Drupal.
• Тип : для композитора требуется drupal/bootstrap_barrio

Это загрузит последнюю стабильную версию темы по адресу: /web/themes/contrib/bootstrap_barrio .

Шаг № 2.- Создайте подтему

• Поместите курсор в каталог темы bootstrap_barrio.
• Тип :

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

Это сделает скрипт с именем create_subtheme внутри папки скриптов исполняемым, а также выполнит его.

Сценарий запросит имя компьютера и описательное имя для вашей пользовательской подтемы.

Введите наиболее подходящие для вас значения. Помните, что имя машины должно быть в нижнем регистре и не должно содержать пробелов.

Этот шаг является необязательным:

• Откройте каталог вашей подтемы (/web/themes/custom/mytheme) в редакторе кода.
• Замените все экземпляры «Bootstrap Barrio» на «Имя вашей темы».
• Сохранить все файлы

Здесь мы меняем только описательный текст, так что не будет никаких проблем, если вы оставите все как есть.

Шаг № 3.- Настройки Bootstrap Barrio

• Нажмите « Внешний вид » в бэкенде вашего сайта Drupal.
• Прокрутите вниз до пользовательской темы
• Нажмите «Установить» и установите по умолчанию.

После установки темы

• Щелкните ссылку Настройки темы

Вы увидите группу вертикальных вкладок в левой части экрана со следующими параметрами:

1. Макет (активная вкладка)
2. Компоненты
3. Прикрепить
4. Прокрутите шпион
5. Шрифты и иконки
6. Цвета

Макет

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

В разделе «Регион» можно назначить пользовательские классы CSS для регионов сайта.

• Добавьте свой собственный класс в определенный регион

• Закройте раздел «Регион».
• Откройте `Позицию боковой панели`
• Измените значение «Положение боковых панелей» на «Слева».
• Откройте «Первый макет боковой панели» и «Первый макет боковой панели».
• Измените значения на 3 столбца и 2 столбца соответственно.

Компоненты

• Щелкните вертикальную вкладку «Компоненты».
• Измените элемент Button на формат контура
• Установите флажок Применить стиль img-fluid ко всем изображениям содержимого.

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

Раздел «Структура панели навигации» определяет размер контейнера панели навигации. Вы должны различать две панели навигации (верхняя панель навигации и панель навигации). Навбар — это главное меню навигации вашего сайта.

• Измените положение панели навигации на фиксированное дно и цвет ссылки панели навигации на темный .
• Установите флажок « Скользящая панель навигации» в разделе «Поведение панели навигации», чтобы отображать скользящее главное меню на маленьких экранах.

Три последних раздела параметра конфигурации «Компоненты» относятся к положению сообщений, доставляемых внутренней системой сообщений Drupal, вкладкам для локальных задач (например, вкладке редактирования содержимого) и внешнему виду элементов формы. Оставьте эти параметры нетронутыми.

Прикрепить

С помощью аффикса можно зафиксировать элемент, т.е. установить фиксированное значение свойства позиции CSS.

прокрутка

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

Шрифты и иконки

Здесь у вас есть возможность выбирать между различными комбинациями шрифтов Google Fonts для текста вашего сайта. Кроме того, вы можете выбирать между наборами предопределенных значков для использования в своих сообщениях.

• Выберите комбинацию шрифтов и набор иконок по своему вкусу

Цвета

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

Если вы продолжите прокручивать вниз, вы найдете «Цветовую схему» для своей подтемы. Вы можете настроить цвет текста и фона для областей темы по умолчанию.

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

Отображение элемента страницы, изображение логотипа и значок Favicon

Это параметры по умолчанию во всех темах Drupal.

Загрузить библиотеку

Вы можете выбирать между несколькими готовыми к использованию онлайн-библиотеками Bootswatch, чтобы улучшить внешний вид вашей темы одним щелчком мыши. Эти варианты стоит проверить.

Здесь можно выбрать, хотите ли вы загружать Bootstrap (Bootstrap CSS и JS) локально или через CDN. Эта конфигурация не должна быть изменена здесь. Гораздо лучше изменить код в файле .info.yml .

• Нажмите Сохранить конфигурацию

Взгляните на свой сайт. Этот учебник не предназначен для обучения вас дизайну пользовательского интерфейса, а скорее объясняет возможности, доступные с темой Barrio.

Однако теперь вы можете начать с дизайна и попытаться адаптировать тему к нему.

Надеюсь, вам понравился этот урок. Спасибо за чтение!