Настройка мобильного меню в Drupal 8 / Responsive and off-canvas menu
Рассмотрим один из самых простых способов создать мобильное меню в Drupal 8. Для этого используем модуль Responsive and off-canvas menu.
Устанавливаем через Composer:
composer require drupal/responsive_menu ; drush en responsive_menu -y
Скачиваем библиотеку mmenu.
cd ~/site_root/libraries/ ; git clone https://github.com/FrDH/jQuery.mmenu.git && mv jQuery.mmenu mmenu
Правильней было бы ставить библиотеку через композер, но мы сэкономим время и просто клонируем библиотеку в папку libraries.
Переходим на страницу настроек модуля «Responsive Menu»:
/admin/config/user-interface/responsive-menu
В разделе OFF CANVAS указываем машинное имя меню.
Если нужна «Основная навигация» — оставляйте main.
Остальные настройки можно оставить по умолчанию.
Переходим на страницу «Схема блоков»:
/admin/structure/block
Располагаем в нужном регионе гамбургер:
Название блока с гамбургером — Responsive menu mobile icon
Переходим на главную страницу и нажимаем на гамбургер.
На ширине 320px мобильное меню будет выглядеть так
Создание водяного знака / Drupal 8
Устанавливаем модуль Image Effects:
composer require drupal/image_effects ; drush en image_effects -y
Закачиваем водяной знак. Я положу его в папку:
sites/default/files/custom/watermark/test-watermark.pngТак выглядит мой водяной знак
Создаем или редактируем стиль изображения. Добавляем новый эффект «Водяной знак».
Выстраиваем следующие настройки:
Рисунок водяного знака: Путь к файлу водяного знака;
Watermark resize: Я ставлю только ширину, высота высчитывается автоматически;
Положение: По центру по умолчанию.
Сохраняем.
Не забываем присвоить этот стиль изображения нужному изображению. В моем случае — это картинка анонса новости.
Результат:
До:
После:
Переопределение шаблона twig в Drupal 8
Предположим, вам нужно создать параграф, который должен выглядеть вот так:
В большинстве случаев набор полей будет таким:
Нам нужно, чтобы картинка располагалась справа. Есть множество способов этого добиться, но сейчас мы рассмотрим twig.
Для того чтобы переопределить шаблон этого параграфа — в теме, в папке templates нужно создать файл:
paragraph--машинное_имя_параграфа--режим_отображения.html.twig
В моем случае, файл будет называться:
paragraph--title_and_text_and_image--block.html.twig
Теперь можно править разметку.
<div class="titleAndTextAndImage">
<div class="titleAndTextAndImage__content">
<div class="titleAndTextAndImage__title">
{{ content.field_title[0] }}
</div>
<div class="titleAndTextAndImage__body">
{{ content.field_body[0] }}
</div>
</div>
<div class="titleAndTextAndImage__image">
{{ content.field_image[0] }}
</div>
</div>
Поле выводим так:
{{ content.машинное_имя_поля }}
А если нам нужно получить только сырое значение:
{{ content.машинное_имя_поля[0] }}
Важно помнить, что если в параграф будет добавлено новое поле, оно не будет отображаться до тех пор, пока вы не запишите его в twig.
Это был простейший пример. Аналогичным образом можно переопределять:
Типы материала:
node--машинное_имя_типа_материала--режим_отображения.html.twig
Таксономию:
taxonomy-term--машинное_имя_словаря_таксономии--режим_отображения.html.twig
Блоки:
block--машинное_имя_блока--режим_отображения.html.twig
Типы медиа:
media--машинное_имя_медиа--режим_отображения.html.twig
Примеры названий файлов twig можно увидеть при включенном twig debug.
Настройка стилей изображений в Drupal 8
Все выводимые на сайт изображения в обязательном порядке должны иметь стиль изображения. Иначе они будут выводиться в оригинальном размере.
Переходим в «Конфигурация» → «Стили изображения»:
/admin/config/media/image-styles
Жмем кнопку «Добавить стиль изображения» → Пишем название и меняем машинное имя.
Теперь нужно добавить эффект. Для начала достаточно знать о двух:
- Масштабирование;
- Масштабирование и обрезка.
Масштабирование пропорционально уменьшит размеры вашего изображения:
Если у вас изображение 2000x1000, а масштабирование 500x500, то результатом будет картинка в 500x250.
Масштабирование и обрезка задаст изображению те размеры, которые вы укажите:
Если у вас изображение 2000x1000, а масштабирование и обрезка 500x500, то результатом будет картинка в 500x500.
Переходим в управление отображением сущности, которая выводит изображение:
Для того чтобы эта настройка появилась — нажмите на иконку шестеренки.
В настройках выбираем созданный нами стиль изображения → Сохраняем.
Если изображения не обновились — воспользуйтесь командой:
drush image-flush --all ; drush cr
Про домены в зарубежной юрисдикции
Обратился клиент, у него есть домен в зоне .com, регистрировался и оплачивался у украинского регистратора.
В свете известных событий, было бы разумно домен перенести к российскому регистратору, чем клиент собственно и озаботился.
Дык вот, зашёл я в ЛК, сделал заявку на трансфер и получил в общем-то ожидаемый отказ, хз чего с этим делать :(
Название регистратора не замазал, потому как не реклама ни разу...
Настройка sitemap.xml / Drupal 8
Устанавливаем и включаем модуль Simple Sitemap:
composer require drupal/simple_sitemap ; drush en simple_sitemap -y
Заходим на страницы редактирования типов материалов / словарей таксономий, страницы которых должны попадать в sitemap.xml
Я захожу на страницу редактирования типа материала «Статья»:
/admin/structure/types/manage/article
В вкладке «Simple XML Sitemap» меняю радиобаттон на «Index entities of this type»
Заходим в настройки модуля «Simple Sitemap» в раздел «Пользовательские ссылки» и добавляем туда URL страниц, которые не были созданы через тип материала или таксономию. Это могут быть страницы представлений или Snippet Manager.
Страница «Статьи» у меня сделана через представление.
Сохраняем → Запускаем крон → Смотрим результат по адресу:
site.com/sitemap.xml
Если не заполнять поле «Базовый URL по умолчанию» — домен будет подставляться автоматически
Создание бэкапа / Drupal 8
Drush 8
В командной строке используем команду:
drush ard
Вручную
Если вы используете Drupal Project, то, скорее всего, у вас будет установлен Drush 9, где команда drush ard будет недоступна.
Выгружаем БД:
drush sql-dump > dump.sql
Архивируем папку с сайтом:
zip -r backup.zip site
Файл с базой данных должен находиться в папке, которую вы архивируете.
Это два способа, которыми я пользуюсь на данный момент. Если вы знаете более правильные/простые/быстрые — пишите. Освою, допишу статью.