Верстка шаблонов

Занятие №4
Подробней о перезаписи шаблонов region, block, view, menu и content.

Цель занятия: научится перезаписывать шаблоны блоков, view, меню и др.
Продолжительность: 60-90 минут



Перезаписи шаблонов

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

Но я считаю это не правильным.

Drupal - это CMF, а не рядовая CMS. С его помощью можно творить великие дела :)

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

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

Настало время детального знакомства с перезаписью templates twig нашей темы. Принцип перезаписи мы рассмотрели ранее, здесь же научимся перезаписывать блоки, представления, ноды и меню.


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

И если при всем при этом работать ограничивая себя особенностями bootstrap, на основе которого мы делаем тему, то выходит очень "сухой" дизайн. На прошлом занятии мы рассмотрели подключение CSS стилей, на этом же подробно разберем, как осуществлять перезапись шаблонов содержимого.

Шаблоны по умолчанию обычно располагается в папке templates модуля:

перезапись шаблонов в drupal 8
Пример расположения *.html.twig шаблонов для модуля Display Suit.

или core ядра drupal:

перезапись template в drupal 8
Пример расположения *.html.twig шаблоны в ядре drupal.

Для перезаписи шаблонов используются файлы макетов из папки templates. Чуть ранее мы перенесли ее содержимое на хостинг из архива bootstrap.

Если вам не будет хватать каких-то шаблонов, можете смело доставать оригиналы из ядра или модуля и помещать в папку templates темы. Таким образом ваша тема все необходимое будет содержать в самой себе.

Впрочем, это не всегда работает, т.к. тот же Display Suit, например, собственные шаблоны регистрирует в своем *.yml файле. Так что будьте внимательны!

 

В целом же, templates содержит в себе папки, которые группируют шаблоны по характеру и типу.

node - шаблоны нод;

block - шаблоны блоков;

field - шаблоны полей;

view - представлений

...и т.д.

По сути же не важно, в какой папке находится шаблон - drupal все равно будет его видеть. Организация по папкам - это часть не функциональности, но элемент структуры, порядка и удобства. Поэтому, если хотите, вы можете создавать собственные папки и помещать туда шаблоны в такой структуре, какой вам заблагорассудится.

 

Как перезаписать шаблон содержимого?

В одном из предыдущих видео я показывал, как перезаписывать twig-шаблоны темы.

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

 

Дополнительные материалы:

Как вывести поле в twig?

Bootstrap 3 и Drupal 8

 


Задание №1
Научитесь перезаписывать шаблоны view

 Посмотрите видео о переопределении шаблона представления.

 


Задание №2
Научитесь перезаписывать twig шаблон блока

Посмотрите видео о перезаписи шаблона блока footer.

 


Задание №3
Научитесь перезаписывать шаблоны node

Посмотрите видео о перезаписи шаблона страницы (node).

 


Задание №4
Освойте перезапись twig шаблонов меню

TWIG шаблон меню на мой взгляд немного сложнее для темизации нежели другие шаблоны папки templates.

В нем есть логические цепочки, которые по-началу сбивают с толку.

как перезаписать меню drupal 8

Если вы такой же новичок в шаблонизаторе TWIG, как и я, не пытайтесь здесь что-то по-свойски править :)

Не теряйте время. Гораздо проще будет "запилить" свое меню на view нежели пытаться корректно перезаписать что-то в TWIG; тем более новичку. Рекомендую запомнить места для перезаписи классов в ul и a тегах. Вставлять свои классы при необходимости, а с разметкой не связываться. Списки li, пожалуй, лучше тоже нетрогать, т.к. drupal тут назначает свои классы через тег set.

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

Посмотрите видео о перезаписи шаблона меню.


На этом занятии курс "Создание темы с нуля" на базе bootstrap 3 заканчивается.
Я очень рад, что вы проходили этот курс и очень надеюсь на то, что он был для Вас полезен!

Лучшей благодарностью для меня за проделанную работу будет ваша обратная связь.
Пожалуйста, перейдите на страницу курса и оставьте развернутый комментарий о том, что вы думаете о прошедшем обучении! Чего по-вашему мнению не хватает в этом курсе, в чем его польза, а в чем недостаток?