Как сделать шаблон для drupal

Добавил пользователь Алексей Ф.
Обновлено: 04.10.2024

Создание сайта. Продвижение сайта. Заработок на сайте.

Тему можно создавать с нуля, а можно взять за основу готовую тему и создать свою как под тему (sub-theme). Под тема отличается от основной темы только тем, что следует ресурсы родительской темы. Можно создавать произвольные цепи под тем, каждая из которых будет следовать ресурсы с родительской. Это дает возможность не прописывать все кастомные, а пользоваться уже готовым (например файлами css или javascript), заменяя все, что нужно, своим.

За основу можно взять тему classy. Она используется как базовая для таких тем ядра, как bartik и seven, и обеспечивает свои под темы многими классами, которые помогают выводить элементы разметки на страницу.

Функции темизации и шаблоны

Drupal 8 пользуется Twig. Это двигатель шаблонов (template engine) для PHP и является частью фреймворка Symfony. Все функции типа theme_ * и файлы *.tpl.php заменены twig файлами *.htmll.twiig.

Drupall 8 позволяет перезаписывать (overriding) любые шаблоны, используемые для генерации html-разметки. Если нужно перезаписать шаблон ядра или иной темы, нужно в директорию templates, что лежит в директории темы добавить.html.twig файл с соответствующим именем.

Можно скопировать тот файл с кодом, который нужно заменить своим. После этого чистим кэш и можем редактировать свой файл. Теперь Drupal будет запускать наш файл, вместо своей (вместо файла ядра или темы). Важно: нельзя менять Twig файлы ядра, нужно делать копии этих файлов в своей теме или модули и там менять.

Если нужно внести свои изменения не во все страницы, а только в какие-то более конкретные, нужно добавить еще один файл (или скопировать базовый) и изменить имя. Например, если надо сделать шаблон для всех нод типа article, копируем файл node.htmll.twiig, даем ему имя node — articlle.html.twiig. Именно этот новый файл Drupal искать в первую очередь, а если не найдет, будет использовать базовый (то есть node.htmll.twiig). Подробнее об именовании шаблонов здесь. Процесс когда Drupal определяет, возможные имена файл шаблона может использовать, называется theme hook suggestion. Чтобы добавлять или изменять suggestions, существуют три хука:

В восьмом Друпалом больше не используется php код для написания шаблонов темы, только Twig. Twig имеет отдельный синтаксис. Файлы.html.twig начинаются с описания переменных, используемых в данном файле. Далее идет html-разметка со вставками кода.

Выводы

Основным отличием в темизации Drupal 8 от предыдущих версий является Twig, который изменил основанную на php-шаблоны систему Темизация Drupal 7 и старше его. Twig дает возможность дизайнерам со знанием html / css модифицировать разметку страниц, не будучи экспертом в php. Например, вместо того чтобы понимать синтаксическую отличие между многомерными массивами и объектами, и знать что где используется, они могут юзать конструкцию >, которая выполнит эту работу. В общем, изменений достаточно много, к ним придется привыкать. Но изменения — это двигатель прогресса.

Несмотря на то, что CMS Drupal довольно популярная система для создания веб-приложений, для неё практически нет качественных свободных тем оформления. В лучшем случае это довольно красивые темы, которые трудно настроить так, чтобы она выглядела уникально. Точнее, это вполне возможно, но это почти равносильно тому, что создать новую тему. Именно поэтому разработчики Drupal используют свободные и качественные базовые темы, на основе которых можно довольно быстро создать совершенно уникальное и потрясающе выглядящее оформление сайта. Именно такой способ и будет рассмотрен в данной статье.

С чего начать?

Любой веб-дизайнер или веб-разработчик со временем обзаводится какими-то шаблонами и заготовками. Использование которых экономит кучу времени при реализации новых, оригинальных проектов. В случае с вёрсткой тем оформления это может быть готовый набор шаблонов, не имеющих оформления, но хорошо адаптированных для отображения элементов дизайна на разных разрешениях экрана. С автоматически показывающимися и скрывающимися регионами, блоками и т. д.

Что для этого нужно?

Тема Zen доступна для Drupal версий 7 и 8, хотя для последней пока в виде альфа-выпуска. В данной статье будет рассмотрен вариант для Drupal 7 при обязательном наличии утилиты Drush. Она понадобится для автоматической генерации собственного стартового набора новой темы на основе темы Zen. Это можно выполнить вручную, но это неоправданно долго и нудно. Разумнее воспользоваться Drush. Общий порядок действий следующий:

загрузка и установка (включение) стартового набора Zen;
генерация стартового набора собственной темы на базе Zen;
включение сгенерированного набора как темы по-умолчанию;
установка дополнительных инструментов разработчика для задания CSS-стилей;
добавление CSS-стилей шаблонам темы, т. е. её оформление.

Последний пункт в данной статье рассматриваться не будет, поскольку это отдельная и специфическая тема.

Создание стартового набора новой темы

Теперь нужно скачать стартовый набор Zen:

Как можно видеть, по-умолчанию темы оформления устанавливаются в /sites/all/themes/ . Однако, в каталоге themes можно создавать подкаталоги для тем — Drupal их просканирует и определит имеющиеся темы. Стартовый набор для новой темы целесообразнее сгенерировать в новом подкаталоге custom, отдельно от остальных тем. Это удобно, т. к. все собственные темы можно хранить раздельно. Создание подкаталога custom:

Путь указан относительно каталога ~/htdocs/drupal-site , поскольку ранее командой cd этот каталог был сделан текущим (активным).
Автоматическая генерация стартового набора для новой темы возможна благодаря предоставляемой набором Zen команде zen. Которую может использовать утилита Drush. Сама команда zen имеет несколько ключей. Благодаря которым можно задавать машинное имя, название, описание. А также расположение установки новой темы. Команда zen будет доступной только после включения набора Zen:

Подключение темы

Без дополнительных блоков и элементов интерфейса данная тема выглядит так:

С дополнительными блоками, добавленными во вторую боковую (справа) панель HTML-каркаса:

Установка и использование дополнительных инструментов

Набор Zen (как и сгенерированные на его основе новые темы) поддерживает работу с фронтенд-окружением Gulp.js. Это позволяет выполнять многие, свойственные для фронтент-разработчика рутинные задачи автоматически. Те, кто тесно знаком с веб-дизайном понимают, о чём идёт речь. Поэтому нет необходимости останавливаться на этом подробно.
Для начала нужно установить фреймворк Node.js и его пакетный менеджер npm. В Ubuntu 18.04 соответствующие пакеты доступны в стандартном репозитории:

Будут загружены все необходимые для работы Gulp модули в подкаталог node_modules. Теперь, для выполнения команд и заданий Gulp необходимо глобально установить интерпретатор gulp-cli, используя пакетный менеджер npm:

Глобальная установка удобна, чтобы не делать этого для каждой разрабатываемой темы. Далее, в каталоге с темой my_theme в конфигурационном файле gulpfile.js нужно задать URL, используемый виртуальным хостом, при помощи опции options.drupalURL:

Далее нужно выполнить команду gulp и просмотреть результат в веб-браузере, обновив страницу:

В результате все блоки для сайдбаров будут иметь бордюры. Данный код присутствует в файле sass/components/box/_box.scss в качестве примера, для демонстрации механизма работы Gulp для ведения фронтенд-разработки. Далее, внося собственные правки для разных компонент темы оформления в соответствии с разработанным макетом создаётся полноценная, оригинальная тема в полном соответствии со спецификацией Drupal.

Заключение

В заключение очень важно отметить, что в данном случае для разработки тем для Drupal используется метаязык Sass. Разработанный на основе CSS. Основное предназначение Sass – сократить использование повторяющегося кода разработчиком и возложить его генерацию на специализированные утилиты, такие как Gulp. Таким образом, создание тем оформления предложенным в данной статье способом тесно связано со знанием и умением применения метаязыка Sass.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Мы уже рассмотрели, что в 8ом друпале у нас встроен Twig и как им пользоваться. В этой статье мы разберем как работать с шаблонами друпала, какие есть шаблоны в теме Stable, как переопределять шаблоны Stable и как переопределять шаблоны различных сущностей друпала.

Итак, давайте начнем с шаблонов темы Stable, перейдем в папку templates темы Stable:

Шаблоны разбиты по функциональному признаку:

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

Переопределение шаблонов для контента (template suggestions)

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

HTML шаблон ( шаблон)

HTML шаблон включает в себя основную структуру HTML-страницы теги , , .

Основной шаблон: html.html.twig (базовое расположение: core/modules/system/templates/html.html.twig)

Следующие примеры показывают как можно переопределить этот шаблон:

internalviewpath - это внутренний путь внутри друпала node/15, taxonomy/term/46, user/2 и так далее.

Смотрите больше информации в документации html.html.twig

Шаблон страницы

Варианты переопределения: page--[front|internal/path].html.twig

Основной шаблон: page.html.twig (базовое расположение: core/modules/system/templates/page.html.twig)

Возможные шаблоны для страницы очень разнообразные. Шаблон главной страницы идет первым по старшинству. Все остальные шаблоны зависят от внутреннего пути. Главную страницу можно выставить на странице Конфигурация - Информация о сайте - Главная страница:
/admin/config/system/site-information

page--node--edit.html.twig
page--node--1.html.twig
page--node.html.twig
page.html.twig

Смотрите больше информации в документации page.html.twig

Регионы

Варианты переопределения: region--[region].html.twig

: region.html.twig (базовое расположение: core/modules/system/templates/region.html.twig)

Шаблон региона используется когда в регионе есть контент, создаваемый системой блоков или через функцию hook_page_build(). Возможно задавать название регионов в файле темы .info.yml.

Блоки

Варианты переопределения: block--[module|--delta]].html.twig

Основной шаблон: block.html.twig (базовое расположение: core/modules/block/templates/block.html.twig)

1. block--module--delta.html.twig
2. block--module.html.twig
3. block.html.twig

'module' это имя модуля который выводить данный блок, delta внутренний id блока в модуле.

Например block--block--1.html.twig это первый блок добавленный пользователем через админку модуля block. Если у вас кастомный модуль custom, вы создаете блок с delta "my-block", тогда шаблон для этого блока будет block--custom--my-block.html.twig.

Для модуля Views шаблон блока переопределяется следующим образом: берем имя view "front_news" и id дисплея view "block_1", тогда имя шаблона для переопределения блока будет: block--views-block--front-news-block-1.html.twig

Заметьте, что нижние подчеркивания изменяются на один дефис.

В Drupal 8 нельзя задать отдельный шаблон для блока в отдельно взятом регионе, по крайней мере из коробки.

Также обратите внимания на то, что имена шаблонов чувствительны к регистру. Если ваш модуль называется MyModule, то имя шаблона для блока будет block--MyModule.html.twig.

Смотрите больше информации в документации block.html.twig.

Материалы (Ноды)

Варианты переопределения: node--[type|nodeid]--[viewmode].html.twig

Основной шаблон: node.html.twig (базовое расположение: core/modules/node/templates/node.html.twig)

Вы можете переопределить шаблон ноды следующим образом:

1. node--nodeid--viewmode.html.twig
2. node--nodeid.html.twig
3. node--type--viewmode.html.twig
4. node--type.html.twig
5. node--viewmode.html.twig
6. node.html.twig

Смотрите больше информации в документации node.html.twig

Термины таксономии

Варианты переопределения: taxonomy-term--[vocabulary-machine-name|tid].html.twig

Основной шаблон: taxonomy-term.html.twig (базовое расположение: core/modules/taxonomy/templates/node.html.twig)

Вы можете переопределить шаблон термина таксономии следующим образом:

1. taxonomy-term--tid.html.twig
2. taxonomy-term--vocabulary-machine-name.html.twig
3. taxonomy-term.html.twig

Все нижние подчеркивая в названиях словарей должны быть заменены на дефисы.

Смотрите больше информации в документации taxonomy-term.html.twig

Варианты переопределения: field--[type|name[--content-type]|content-type].html.twig

Основной шаблон: field.html.twig (базовое расположение: core/modules/system/templates/field.html.twig)

Вы можете переопределить шаблоны следующим образом:

1. field--field-name--content-type.html.twig
2. field--content-type.html.twig
3. field--field-name.html.twig
4. field--field-type.html.twig
5. field.html.twig

Все нижние подчеркивания в названиях типом материла и имён полей заменяются на дефисы.

Смотрите больше информации в документации field.html.twig.

Views

Все шаблоны Views'а могут быть переопределены с помощью машинного имени вью, id дисплея, типа дисплея (page, block или другого) или комбинации машинного имени вью, id дисплея и типа дисплея.

Для каждого View используется по крайней мере два шаблона. Первый шаблон это views-view.html.twig:

Второй шаблон определяется стилем отображения вью (например неформатированный список, таблица, grid, HTML список). По умолчанию используется шаблон неформатированного фильтра (через теги

Если мы выводим через Views не готовые сущности (например полную ноду или ее тизер), а выводим поля, тогда Views использует еще шаблон поля, который мы тоже можем переопределить шаблон для полей views-view-fields.html.twig.

Ниже возможные имена шаблонов для переопределения.

Имя вьюса - foobar (машинное имя)
Формат отображения - unformatted (неформатированный список, добавить возможные варианты)
Стиль отображения записи - fields
Имя дисплея - page

По умолчанию в друпале все страницы выводятся через шаблон page.tpl.php. Можно создавать шаблоны созданные по такому принципу: если путь выглядит как имясайта/node/10, то шаблон будет выглядеть как page-node-10.tpl.php. Если создать шаблон page-node.tpl.php, то все страницы, лежащие "ниже" урла имясайта/node/ будут автоматически перекрыты этим шаблоном.

То есть, если в корне вашей темы лежит файл page-node-tpl.php и выводит только переменную $content, то на странице абсолютно любой ноды будет выведен тольько контент, без колонок, табов и прочих аттрибутов.

Этот принцип работает для любого адресса, и любого уровня вложенности в него. Однако давайте рассмотрим неординарный вариант: допустим, перекрыть надо только страницы нод определённого типа материала. Для этого потребуется поместить в template.php следующий код:

Теперь друпал научится понимать шаблоны, построенные по любому типу ноды (если вы их перекрыли).

Пример: для типа материала story шаблон будет выглядеть так:

Значит, этой строкой я убеждаюсь, что нахожусь на странице с нодой (т.к. страница с нодой строится по урлу имяСайта/node/нид):

Далее всё вообще прозрачно:

Да, и ещё - arg() возвращает ДЕЙСТВИТЕЛЬНОЕ значение урла, т.е. даже если у вас на сайте стоит модуль pathauto и страница ноды выглядит не по шаблону имяСайта/node/нид, то arg() всё равно будет возвращать именно значения node и нид.

Применяется это к любым шаблонам и страницам. Просто я делал всё на примере node.

Вот и вся хитрость. Таким же образом можно создать себе шаблоны на абсолютно любой случай жизни :)

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

Каждый разработчик тем для Drupal подходит к задачам по их созданию по-разному. В данном случае Эмма (Emma Jane Hogbin) рассказывает о своих принципах создания темы. Здесь описывается минимум того, что нужно использовать для создания жизнеспособной темы.

Создание темы

Создайте новую папку (название должно начинаться с буквы) на вашем сервере с Drupal; подкаталог sites/all/themes
Давайте будем использовать thewire в качестве примера имени вашей темы (естественно, вы можете назвать тему как угодно). Добавьте в эту папку текстовый файл с названием thewire.info
Название должно в точности совпадать с именем папки. Файл будет как бы менеджером вашей темы — подгружать пользовательские файлы CSS и создавать области для вашего файла шаблона страницы.
Скопируйте пример настройки в .info файл. Он должен содержать вот такую информацию:

name = Season One description = Featuring characters from The Wire. core = 7.x engine = phptemplate base theme = ninesixty screenshot = thewire-screenshot.jpg ; Add custom regions, CSS and Javascript files regions[mcnulty] = McNulty. Left sidebar, three columns regions[kima] = Kima. Right sidebar, three columns regions[rawls] = Rawls. Header, 12 columns regions[stringer] = Stringer. Footer, 12 columns regions[omar] = Omar. Banner area, front page only, 12 columns stylesheets[all][] = bunk.css scripts[] = bubbles.js

Примечание: области McNulty, Kima и Rawls не используются на главной странице.

Переводим PSD в Drupal

Настало время, перенести ваш дизайн в тему Drupal.
На этом этапе вы можете экспортировать HTML из вашей дизайнерской программы (photoshop прим.авт.), или по умолчанию стартовать с файла page.tpl.php предоставляемым Drupal.

При создании шаблонов таким способом можно быстро перейти от файла дизайна на рабочую тему Drupal, благодаря чему можно найти недостатки в каком то из решений. Это дает хорошую возможность сосредоточиться на рестайлинге HTML который предоставляет Drupal, вместо того, чтобы переписывать разметку генерируемую Drupal.

Для использования 960gs вы должны знать о следующих понятиях:
Чтобы создать квадратный контейнер любого размера необходимо использовать

будет использовать ширину в 100%. Однако, по высоте будет таким же, как содержащийся в нем контент. Для регулировки ширины

Контейнеры могут иметь несколько стилей, примененных к ним, разделенных пробелом. Например:

Контейнеры так же могут иметь уникальные идентификаторы, применяемые к ним. Это особенно полезно, если необходимо применить уникальные стили только в определенном месте страницы. Для примера:

С помощью этих простых правил и магических заклинаний :), вы можете создать шаблон веб-сайта используя 960gs.

Вопросы:

Стрингер — 12 колонок по ширирне.
Стрингер состоит из трех блоков.
Один из этих блоков составляет шесть колонок. Остальные — три колоноки.

Чтобы сделать новый регион stringer

Вот и все! Вы добавили регион!

Повторите эти шаги, что бы проверить перенести все необходимые блоки из дизайна в ваш макет, а потом используйте HTML, CSS и PHP переменные, которые необходимы для воссоздания файла дизайна в теме. Возьмите какой то один элемент страницы. Сосредоточьтесь на маленьком кусочке, который вы пытаетесь воссоздать. Не отвлекайтесь на всю тему. Посмотрите только на отдельные части.

Запускаем основу вашей темы

Если вы думаете, что сделали достаточно: запускайте тему в работу! Сколько это достаточно? Ну понимаете… дастаточно и достаточно)
Минимальная жизнеспособная тема — это то количество работы, которую вы можете сделать, чтобы установить тему на сайт Drupal. Она должна иметь свою собственную папку и инфо-файл. Она, вероятно, имеет собственный файл CSS и даже свой собственный файл page.tpl.php. И такое может быть.

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

Как выглядит? Довольно мрачно, не так ли?

Займемся доработкой остальной части интерфейса

Вот несколько ссылок, которые конкретно помогут с тематизацией страниц:

Посмотрите на источник tpl.php файла модуля, чтобы найти переменные, которые можно перемещать и изменять.

Читайте также: