Drupal шаблоны как верное средство от монотонности


Содержание материала:

Обзор шаблонов для Drupal 8

Drupal 8 уже имеет ряд модулей, с помощью которых можно создавать блоги, простые сайты компаний.
Бесплатные шаблоны для Drupal 8 удобно использовать, так как это результат профессионализма. Для Drupal 8 создаются адаптивные шаблоны с использованием Twig, Php, html5 и часто Bootstrap.

Тут представлены 15 готовых бесплатных адаптивных шаблонов именно для Drupal 8. И 6 базовых шаблонов.

Почему не Бартик? Бартик — адаптивная тема ядра, имеет 53 файла стилей, что затрудняет процесс редактирования дизайна. Лучше выбрать другую тему из предложенных.
Желательно переименовать контрибную тему, чтобы обновления случайно не «стёрли» ваш дизайн.
Если вам нужно переименовать тему и использовать как свою, тут — процесс создания собственной темы из контрибной

Оптимизированная тема Themy

Для оптимальной работы сайта и уменьшения объёма страниц (ускорения загрузки) пользуйтесь оптимизированным клоном Paxton — адаптивной темой Themy — без лишних JS, шаблонов, с каскадным (выпадающим) меню на CSS.

Отключите кэш в Drupal 8, чтобы отлаживать шаблон

После установки и активации шаблона доработка макета и отладка будет невозможна, если не отключить кэш Twig. Как отключить кэш Твиг описано тут.

Готовые бесплатные шаблоны для Drupal 8

Drupal8 Zymphonies Theme. Готовая стабильная тема для Drupal 8. Подходит для сайта компании, наглядно размещает информацию на главной, удобные шрифты, адаптивность, адаптивное меню. Демо

BusinessGroup Zymphonies Theme. Довольно приличная тема для бизнес-сайта, адаптивная, как и все темы Zymphonies.

Paxton. Готова версия для Drupal 8. Качественный красивый дизайн, удобная адаптивность, красивый слайдер с параллаксом текста и фона. Подойдёт для небольшого блога с красивыми картинками.

Awesome Zymphonies Theme. Готова версия для Drupal 8. Одна из эффектных тем для сайта компании, портала. Адаптированная, позволяет создать блок слайдера (как настроить слайдер), 1-2-3 колонки, кнопки соц. сетей настраиваются в админке.

NewsPlus Lite. Качественная адаптивная тема с большими элементами, флэт-дизайн. Автор: More Then just Themes

Professional Responsive Theme. Готова версия для Drupal 8. Отлично адаптируется под малые экраны, сжимая Главное меню в одну кнопку на малых экранах. Хотя внешний вид неудобен для чтения, тема очень качественная. Достаточно отредактировать стили. Демо

Business Responsive Theme. Zymphonies предлагает ещё одну тривиальную тему с адаптацией (при изменении окна браузера до малого и обратно — меню исчезает, что представляет собой небольшой незаметный другим баг).

Zircon. Готовая тема. Многозадачная тема с промо-регионом, слайдером. Кросс-браузерная вёрстка, HTML5, CSS3, SASS, Twitter Bootstrap 3.1.1. Демо.

Integrity. Готовая тема. Симпатичная тема сайта компании с слайдером, адаптивным меню и читабельными шрифтами. Демо.

Bootstrap Rainbow. Готова. Удобная тема для сайта-портфолио. Адаптивная, настраиваемые колонки 1,2 или 3, приятные шрифты.

Professional Theme. Стабильная версия для Drupal 8. Серый трёхколоночный адаптивный макет для любителей программирования. Работает во всех браузерах. Главное меню сжимается в кнопку Navigation и раскрывается JavaScript.

Nero. Разноцветное меню, основана на Бутстрап, адаптивная. Вёрстка Главного меню не отлажена.

Jethro. Адаптивная тема для портфолио и сайта-визитки. красочная сине-жёлтая тема с серым фоном и неудобными шрифтами. Основана на Бутстрап. 1, 2 или 3 колонки.

OpenChurch Theme. Готова. Тема для блога, журнала.

Базовые темы для Drupal 8

AdaptiveTheme. Готовая базовая тема для Drupal 8. Одна из очень производительных тем, адаптивная. Изначально белая, без элементов. Удобно создавать подтемы. Имеет самую мощную админку.

Basic. Готовая базовая тема для Drupal 8. Адаптивная тема, популярная среди Drupal-специалистов. SASS, seo-оптимизированная, колоночная система, богатая админка, удобная разработка дизайна.

Beginning. Готова. Респонсивная белая тема для вёрстки с нуля. Кросс-браузерная (IE>9, Firefox, Chrome, Opera, Safari), HTML5.

FortyTwo. Готова. Базовая белая тема для создания своих подтем. Адаптивность, несколько настроек в админке: расположение колонок, включение/отключение JS, разделитель хлебных крошек.

Bootstrap. Готовая базовая тема для создания подтем на основе фреймворка. Мощная тема для опытных разработчиков, интегрирующая фреймворк Бутстрап http://getbootstrap.com/ О создании темы на основе Бутстрап читайте в документации http://drupal-bootstrap.org

Omega. Alpha7. Мощная базовая тема, популярная среди друпалеров. Изначально белая, используется для создания подтем.

На этапе разработки

Prius. Уже RC1. Sass. Белая, без дизайна, респонсивная. Демо. Демо-сайт выглядит как лендинг: плавающее меню, управление показом регионов на весь экран.

Personal Blog Theme. Только Alpha1Многозадачная респонсивная тема, чёрный фон, промо-регион, правый сайдбар. Совместимость с IE, Firefox, Chrome, Safari. HTML5, Css3, SASS Botstrat, галерея изображений.

Bootstrap Business. Только Beta1. Респонсивный шаблон. HTML5, CSS3, 1-2-3 колонки. Интеграция superfish, адаптивное меню в одну кнопку +, цветовые схемы, 20 регионов. Демо

FontFolio. Только dev. Адаптивный шаблон, две колонки, грид-система. Демо.

ZURB Foundation. Только beta2. Грид-система (с выбором ширины и числа колонок).

Ombak. Тлько дев. Респонсивный шаблон. Промо-регион. Много регионов. Многозадачная.

Insha. Только дев. Белый шаблон блога.

Другие темы

Как установить тему в Drupal 8

Включите модуль Update Manager и перейдите в «Оформление», то есть: /admin/appearance. Нажмите установить тему и укажите в форме адрес архива нужной версии, который можно найти на странице темы. Если на вашем хостинге файлы не скачиваются, закачайте архив темы вручную и распакуйте в папку themes. И тогда на странице «Оформление» появится новая тема. Активируйте тему.

В 8 версии контрибные темы должны размещаться в корневой папке themes, а не в sites/all/themes как это было в 7 версии.

Отладка Twig шаблонов

Другие статьи серии Twig

При отладке переменных в Twig шаблоне нужно учитывать некоторые особенности шаблонизатора. Во-первых, Twig не позволит вам вызывать php функции, которые вы могли использовать при отладке php шаблонов: var_dump(), print_r(), dpm() (функция модуля devel) и другие. Привычная отладка с помощью xdebug в файлах twig шаблонов тоже недоступна. Во-вторых, шаблоны Twig компилируются в php файлы, которые кешируются в файловой системе (в Drupal 8 файлы хранятся в каталоге sites/default/files/php/twig). И после установки Drupal 8 отладочные функции twig будут недоступны, также вы не увидите изменений сделанных в шаблоне до очистки кеша (кеш в Drupal 8 с помощью drush чистится командой drush cr или с помощью аналогичной команды Drupal Console drupal cr).

Как включить отладку шаблонов

Для включения возможности отладки выполните следующие действия:

    при использовании Drupal Console нужно просто выполнить команду:

Отладочные опции Twig:

Какие возможности дает включенная опция debug в значение true в sites/default/services.yml?

Во-первых, в исходном html коде страницы все части кода будут обернуты в комментарии с информацией о используемых для вывода шаблонах и всех возможных вариантах именования файлов шаблонов (template suggestions).

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

Twig auto-reload

Опция auto_reload установленная в true делает возможным перекомпиляцию twig шаблонов при каждом внесении в них изменений.
По умолчанию опция установлена в null.

Twig cache


По умолчанию все twig шаблоны после компиляции кешируются и хранятся в файловой системе для улучшения производительности. Файлы перекомпилируются только после очистки кеша. Опция cache установленная в false позволит перекомпилировать шаблоны при каждом их использовании темой. В большинстве случаев лучше использовать auto_reload, так как шаблоны будут перекомпилироваться только после внесения в них изменений.
По умолчанию опция установлена в true.

Drupal render cache

По умолчанию в Drupal для улучшения производительности кешируется рендеринг для блоков и сущностей. Поэтому любые изменения, внесенные в шаблоне, не будут видны до очистки кеша. Для отключения render кеша и dynamic_page_cache нужно:
в файле settings.php раскомментировать следующие строки:

Далее нужно скопировать файл sites/example.settings.local.php в sites/default/settings.local.php и в нем раскомментировать две строки (и не забыть очистить кеш):

Функция kint()

Кроме использования twig функции dump(), которую добавляет сам Twig, можно пользоваться функцией kint(), которую добавляет devel kint — подмодуль devel. Многие наверняка для отладки переменных в Drupal 7 использовали devel функцию dpm(), которая при выводе использует krumo. Так вот, kint является этаким krumo-заменителем. Kint, в отличие от krumo, при выводе объектов добавляет информацию о всех его методах.
Примеры использования kint() в шаблонах twig:

Можно вывести информацию сразу о нескольких переменных :

Если не передавать в функцию аргументы, выведется информация о всех переменных шаблона:

При переносе сайта из dev окружения в production рекомендуется:

  • все опции в файле sites/default/services.yml вернуть в значения по умолчанию
  • в файле settings.php закомментировать строки:

При написании статьи использована официальная документация Debugging compiled Twig templates

Оформление и Блоки в CMS Drupal — шаблоны для Drupal, структура, смена и загрузка шаблона

День добрый, уважаемые читатели wmbn.ru! Продолжаем работать с CMS Drupal, а именно с меню системы, и сегодня рассмотрим такой пункт меню Drupal, как оформление. Drupal, как и любая другая система управления сайтом ее масштаба имеет потрясающую возможность быстрой смены оформления при помощи шаблонов. Вспомните те же шаблоны WordPress — их просто огромное количество и администратор блога может спокойно сменить тему, останется лишь доработать некоторые недочеты на его взгляд. В CMS Drupal все точно так же — можно без особого труда сменить и настроить тему как вздумается, изменить ее код или добавить что-то новое.

Но если более подробно сравнивать шаблоны для Drupal и WordPress, то можно заметить ряд существенных отличий — сама структура файлов уже другая, по другому организован принцип работы. Да и функционал в шаблонах куда интереснее и имеет больше возможностей (так как сам Drupal тоже имеет больше возможностей). Настроек у шаблона Drupal тоже на порядок больше чем у WordPress шаблонов, хотя и для WordPress есть такие темы, которые могут сделать из шаблона просто творение специалиста в своем деле — имеется ввиду, что у шаблона внутри много настроек.

Топ-пост этого месяца:  Как быстро заработать — 10 способов быстрого заработка в сети

Шаблоны Drupal — загрузка и установка шаблонов

Приступим конкретно к рассмотрению шаблонов для Drupal. По сути для шаблона даже можно дать определение — набор файлов, которые в совокупности составляют дизайн любого сайта, обращаясь при этом к движку, в нашем случае к Drupal. Шаблоны для Drupal написаны на языке phptemplate, с помощью которого осуществляются взаимодействие файлов и запросы к системе.

Скачать готовый шаблон можно с официального сайта Drupal, где из большого количества тем (более 1300 готовых работ) можете подобрать свой, выбрав из фильтра те условия, которые нужны для поиска шаблона. Загруженный шаблон лучше всего не копировать сразу в папку themes в главной директории Drupal, а поместить в папку sites/all/themes, где можно найти файл README, в которой говорится, что сторонние шаблоны следует устанавливать в данную папку, чтобы в будущем при обновлении не возникало проблем.

Можно установить другую тему и включить ее, а можно пока воспользоваться стандартным шаблоном Drupal — Bartik, и посмотреть на его примере как устроены шаблоны и настройка к ним. Чтобы приступить к просмотру, перейдите в пункт Оформление, который находится в меню. После этого откроется список шаблонов для сайта и панели администратора. По умолчанию для сайта установлен шаблон Bartik, а для панели администрирования Seven. К шаблонам так же предлагается описание, а именно что в них можно изменить и настроить.

Ниже, в блоке Disabled Themes показаны отключенные шаблоны — Garland (установлен по умолчанию в шестой версии Drupal) и Stark — так называемый стартовый шаблон, с помощью которого можно писать свои шаблоны для Drupal или редактировать готовые. Ну а еще ниже в выпадающем списке можно выбрать ту тему оформления, которая будет применена для админской части сайта.

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

  • Верхний и нижний заголовок сайта — задается как градиент;
  • Фон сайта и сайдбара, а так же его рамки;
  • Цвет футера;
  • Цвет текста заголовка сайта и основного текста контента и ссылок;

Все изменения сразу же показаны в блоке просмотр.

Ниже показаны те компоненты сайта, которые можно отключить от их вывода на страницы сайта:

  • Логотип — тот же значок капли около названия сайта;
  • Само название сайта;
  • Слоган — отображается ниже;
  • Аватары в документах и комментариях — отображается фото как для автора записи (документа) так и для отзыва;
  • Статус регистрации пользователя;
  • Значок — фавиконка;
  • Основные и дополнительные ссылки — при их отключении как минимум отключается меню, а так же ссылки на записи;

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

Просмотр регионов и блоков в шаблонах для Drupal

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

Перейдя на страницу настройки блоков, в первую очередь бросается в глаза большая таблица с заголовками Блок, Регион и Операции. В ней то как раз изменяется структура шаблона Drupal и вывод записей. Для примера разберем регионы в стандартном шаблоне Drupal — Bartik.

Всего регионов в системе 15 штук — посмотреть их можно, нажав на ссылку Просмотр регионов:Bartik:

  • Заголовок — размещаются блоки в шапке сайта. Чаще всего данный регион отдается рекламе — баннерам или контекстной рекламе графического формата;
  • Популярное — второй регион, расположен сразу под шапкой;
  • Основной контент — документы, справка и закреплено. Выбор не ограничивается лишь показом одних документов, можно дополнить страницу сайта более функциональными блоками, нежели простым текстом;
  • Правая и левая колонка заняты соответственно колонкой первой и второй. Выполняют они роль сайдбара, но это только по стандарту блогов, а так можно что угодно добавить в шаблон — Drupal такую возможность поддерживает;
  • В подвале сайта (футере) расположены еще семь регионов, которые разделяют всю нижнюю часть сайта. Туда можно установить различные счетчики от сервисов статистики (Яндекс.Метрика, Рейтинг@Mail.ru и прочие);
  • Последняя часть шаблона отдается нижней колонке. Можно отдать данный блок под описание сайта, дублированное меню и прочие хитрости;

Когда ни один блок не будет установлен в хотя бы один регион, он будет расположен в конце таблицы после пункта Выключено, их список тоже небольшой (основные блоки):

  • Пользовательское меню — блок тех ссылок, что вы добавили в качестве навигации по сайту;
  • Вход в аккаунт — стандартная форма входа в панель администратора Drupal;
  • Выбор языка — блок говорит сам за себя, выбираем тот язык, который доступен в системе и переводе;
  • Документ — основной блок, в котором выводятся созданные записи. Его обычно выставляют в центре сайта, в регионе Документы, но так же можно установить его в другой регион, сделав блок в качестве новости сайта;
  • Лента сайта — добавляет значок RSS для подписки на новостную ленту сайта. Очень даже симпатично смотрится в подвале сайта в самой нижней колонке — порталу вряд ли так требуются подписчики, как блогу;
  • Новые комментарии, пользователи и сообщения — ясно по названию, удобно расположить в футере сайта в одной из колонок;
  • Основные ссылки — добавляет ссылки для быстрого перехода к записям и страницам сайта;
  • Сделано на Drupal — блок сообщает посетителям, что сайт работает на системе управления сайтом Drupal;
  • Сейчас на сайте — показывает количество пользователей, посетивших сайт в настоящий момент;
  • Форма поиска — с помощью данного блока добавляется на сайт поисковая форма Drupal, причем она вполне функциональная, однако для ее стабильной работы не забудьте запустить cron.php после добавления новостей;

Настройка и создание блоков для шаблонов Drupal

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

  • Страницы — показывать блок на перечисленных страницах, или наоборот исключать их;
  • Тип документов — выбираем какие типы документов показывать в блоке;
  • Роли — можно выбрать каким пользователям (типам или ролям) показывать данный блок — посетителю, пользователю или администратору;
  • Пользователи — настройка видимости блока для типов пользователей системы;

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

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

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

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

Шаблоны и темы для Drupal

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

Hasta — профессиональная бизнес тема для Drupal с адаптивным дизайном.

Hub — многофункциональная новостная тема для Drupal с адаптивным дизайном.

Mely — современная и профессиональная бизнес-тема для Drupal с адаптивным дизайном.

H-code — универсальный шаблон для Drupal с встроенными модулями интернет-магазина, портфолио и блога.

MedicalGuide — адаптивный шаблон для Drupal на тему медицина и здоровье.


Queens — адаптивный одностраничный шаблон для Drupal, отлично подойдет для креативных рекламных агентств и организации портфолио.

Sanbro — это современная и профессиональная бизнес-тема для Drupal с адаптивным дизайном.

Aquarius — это современный, творческий и полностью адаптивный шаблон для Drupal.

Consilium — универсальная тема для Drupal от профессиональной команды разработчиков. Чистый и современный дизайн, который подойдет как для краетивного проекта, так и для корпоративного бизнес сайта.

Подборка премиум тем для Drupal за июль 2015.

Шаблоны страниц и нод в Drupal 7

Страница обслуживания

maintenance-page—[offline].tpl.php

maintenance-page.tpl.php — шаблон страницы обслуживания. Отображается когда включен режим обслуживания сайта. И часто эта страница выглядит некрасиво, если её не менять. Для этого и существует шаблон maintenance-page.tpl.php.

maintenance-page—offline.tpl.php — шаблон страницы, отображающийся при ошибках, связанных с базой данных.

У этих двух шаблонов есть особенность — они включают в себя полную разметку HTML страницы, т.е. содержит всю страницу целиком, включая head и body.

Шаблоны нод

node—[type|nodeid].tpl.php

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

Базовый шаблон, используемый для отображения любых нод называется node.tpl.php .

  • node—nodeid.tpl.php где nodeid — ID ноды. Шаблон используется если необходимо изменить разметку конкретной ноды. Например шаблон node—1.tpl.php задает разметку для первой ноды.
  • node—type.tpl.php где type — тип ноды. Если необходимо указать разметку для всех нод одного типа используется этот шаблон. Например node—article.tpl.php задаёт разметку для всех нод типа article.

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

page—[front|internal/path].tpl.php

Базовый шаблон для страниц: page.tpl.php.

  • page—node—edit.tpl.php — задаёт шаблон страницы редактирования и создания ноды.
  • page—node—1.tpl.php — задаёт шаблон страницы для ноды с >UPD: Этим способом можно переопределить шаблон страницы Drupal, выводимой через модуль Views. Для этого нужно создать новый шаблон page—[viewurl] , где viewurl — путь страницы. Например, для страницы http://site.ru/views-page/ нужно создать шаблон с именем page—views-page.tpl.php.

Подробнее про шаблоны views я написал в отдельной статье: Шаблоны блоков, страниц, полей для модуля views Drupal 7.

UPD: В Drupal 7 нет стандартных шаблонов для страниц ошибок 404, 403. Так же, по умолчанию нет возможности объявить свой шаблон страницы для отпределённых типов нод. Но это легко реализуется. Как это сделать можно прочитать здесь: Создание кастомных шаблонов в теме Drupal 7.

Про шаблоны блоков, комментариев и полей вы можете почитать в соотвествующей статье: Шаблоны блоков, комментариев и полей Drupal 7.

Красивые функциональные шаблоны для Drupal

Если честно, с системой управления сайтами Drupal я «дружу» не так хорошо как с WordPress. Мне всего пару раз приходилось с ней сталкиваться, хотя это не помешало в свое время найти парочку симпатичных блоггерскиих шаблонов для Drupal. Было это достаточно давно, да и трех макетов явно недостаточно для выбора, поэтому сегодня решил подобрать еще немного красивых и функциональных шаблонов.

Точно также как и для вордпресс на официальном сайте разработчиков есть специальный раздел для тем и шаблонов. С помощью формы поиска вы можете подобрать макеты для своей версии Drupal.

Вот что удалось найти мне.

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

В макете найдете много разных блоков для новостей, информации, списков, курсов и т.п.

Шаблон блога для Drupal со всеми вытекающими элементами: сайдбаром, шапкой, лентой постов и т.п.

Красивый стильный Drupal шаблон для корпоративного сайта компании.

Легкий и просторный дизайн для небольшого сайта компании. Здесь есть много разных настроек и областей для блоков, поддержка слайдера, выпадающих меню и других HTML5 эффектов.

Шаблон может использоваться как для бизнеса, так и для личного блога или портфолио. Есть табы, опросник, меню и много чего еще.

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

Данный Drupal шаблон идеально подходит для сайта про стиль и моду. Выглядит стильно.

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

Макет для корпоративного сайта на Drupal с фиксированной шириной — 960px. Тема выглядит современно и легко.

Еще один шаблон для блога — светлый и простой, ничто не будет посетителей от чтения постов.

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

Макет имеет адаптивный дизайн под разные типы мобильных устройств.

Легкая тема для Drupal, которая включает в себя все необходимые базовые функции.

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

На этом пока что все. Надеюсь, представленные выше, функциональные и красивые Drupal шаблоны вам пригодятся.

Блог Vaden Pro

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

Где используются тизеры (анонсы)?

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

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

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

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

Итак, начнем с подключения необходимого нам шаблона.

Как подключить шаблон node—[тип материала]—teaser.tpl.php?

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

Чтобы у нас все работало сначала необходимо зайти в файл template.php нашей темы и в нем добавить следующий код для подключения типа материала:


В моем случае получилось:

Все теперь, чтобы темизировать анонс типа материала нам осталось добавить в папку темы файлик с названием node—[тип материала]—teaser.tpl.php.

В моем случае, для типа материала book я буду использовать название node—book—teaser.tpl.php.

Осталось очистить кеш сайта и можем приступать к работе.

Работа с шаблоном node—book—teaser.tpl.php

Как уже могли догадаться те, кто проходит главу курса посвященную темизации с начала, работу с шаблоном мы начнем с dpm($content).

Для тех, кто не понял, что я сейчас сказал поясню – скачиваем и устанавливаем себе модуль Devel, проверяем, что у Вас на страницу выводятся системные сообщения Drupal, после приступаем к работе.

Итак, сам шаблон в начале работы у меня выглядит следующим образом:

На странице термина таксономии, на которой выводятся книги жанра фентези я вижу следующую картину:

На странице настройки анонса все настроено следующим образом:

Принцип работы с шаблоном аналогичен тому, как мы работали с node.tpl.php, о чем я писал в соответствующей статье, потому если по ходу дальнейшей работы будут возникать вопросы, советую перечитать ее.

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

Для этого сначала на странице управления отображением анонса добавим в вывод нужные поля:

Далее идем на страницу термина, обновляем ее и открываем любой из dpm, отображающихся у нас на странице:

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

Начну я с создания необходимых мне оберток в самом шаблоне:

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

Для этого открываем dpm, берем необходимую для работы инофрмацию, кликнув два раза на интересном для нас элементе:

И скрываем его из вывода строкой:

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

Те поля, которые были выведены на страницу таким образом до строки

Не выведутся второй раз, когда мы будем выводит все остальные поля общим скопом используя переменную $content.

Сейчас шаблон выглядит так:

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

Получить его мы можем обратившись к [‘#object’] любого поля, я буду использовать для этого body.

Вставляем в наш dpm, чтобы получилось:

И получаем на странице dpm со всем необходимым для работы:

Для формирования ссылки я воспользуюсь стандартной функцией Druapal l().

В итоге вывод заглавия книги с шаблоне будет выглядеть как:

Все, теперь можем убрать свой dpm. Код node—book—teaser.tpl.php, который у меня получился в итоге выглядит следующим образом:

Добавив пару строк CSS для большей наглядности получим следующий результат на странице:

На случай, если кто-то не знает как работать с этим дальше:

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

20 высококачественных бесплатных Drupal-шаблонов

Вы думали, что качественных бесплатных шаблонов для Drupal не существует? Тогда вы серьезно ошиблись, и сегодня мы хотим поделиться 20 такими шаблонами.

WordPress, безусловно, считается самой популярной CMS (Системой управления контентом), но вы будете удивлены, узнав, сколько всего нового появилось и продолжает появляться для Drupal.

Всего пару лет назад было очень сложно найти действительно привлекательный бесплатный Drupal-шаблон, но сегодня это не проблема. Сегодня мы хотим поделиться с вами вручную отображенными 20 высококачественными Drupal-шаблонами, которые можно скачать прямо сейчас и абсолютно бесплатно!

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Классические шаблоны для Drupal, которые никогда не стареют (Платное)

Компания InternetDevels запустила сервис по изучению Drupal 7

CommerceBox — сборка интернет-магазина на основе Drupal 7

Drupal 7: Обзор новых функций и шаблонов

Подборка из 55 лучших веб-сайтов, работающих на CMS Drupal

Более 45 отличных тем оформления для разработчиков Drupal-проектов

Шаблон дня: TemplateMonster 26312

Шаблон дня: TemplateMonster 26234

Шаблон дня: TemplateMonster 25816

Шаблон дня: TemplateMonster 25801

  • 26.10 | 18:00 —

Топ UX тренды для банкинга в 2020 году

2009—2014 © CoolWebmasters.Com — онлайн-журнал для профессиональных веб-дизайнеров и разработчиков. Все права защищены.
Наш онлайн-журнал предоставляет самую свежую и актуальную информацию для профессиональных веб-дизайнеров и разработчиков в виде переводов статей и новостей, полученных с зарубежных информационных ресурсов. Дизайн и разработка сайта — лаборатория D.L.E. Templates.Com


Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на наш сайт!

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

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

Отладка Twig шаблонов

Другие статьи серии Twig

При отладке переменных в Twig шаблоне нужно учитывать некоторые особенности шаблонизатора. Во-первых, Twig не позволит вам вызывать php функции, которые вы могли использовать при отладке php шаблонов: var_dump(), print_r(), dpm() (функция модуля devel) и другие. Привычная отладка с помощью xdebug в файлах twig шаблонов тоже недоступна. Во-вторых, шаблоны Twig компилируются в php файлы, которые кешируются в файловой системе (в Drupal 8 файлы хранятся в каталоге sites/default/files/php/twig). И после установки Drupal 8 отладочные функции twig будут недоступны, также вы не увидите изменений сделанных в шаблоне до очистки кеша (кеш в Drupal 8 с помощью drush чистится командой drush cr или с помощью аналогичной команды Drupal Console drupal cr).

Как включить отладку шаблонов

Для включения возможности отладки выполните следующие действия:

    при использовании Drupal Console нужно просто выполнить команду:

Отладочные опции Twig:

Какие возможности дает включенная опция debug в значение true в sites/default/services.yml?

Во-первых, в исходном html коде страницы все части кода будут обернуты в комментарии с информацией о используемых для вывода шаблонах и всех возможных вариантах именования файлов шаблонов (template suggestions).

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

Twig auto-reload

Опция auto_reload установленная в true делает возможным перекомпиляцию twig шаблонов при каждом внесении в них изменений.
По умолчанию опция установлена в null.

Twig cache

По умолчанию все twig шаблоны после компиляции кешируются и хранятся в файловой системе для улучшения производительности. Файлы перекомпилируются только после очистки кеша. Опция cache установленная в false позволит перекомпилировать шаблоны при каждом их использовании темой. В большинстве случаев лучше использовать auto_reload, так как шаблоны будут перекомпилироваться только после внесения в них изменений.
По умолчанию опция установлена в true.

Drupal render cache

По умолчанию в Drupal для улучшения производительности кешируется рендеринг для блоков и сущностей. Поэтому любые изменения, внесенные в шаблоне, не будут видны до очистки кеша. Для отключения render кеша и dynamic_page_cache нужно:
в файле settings.php раскомментировать следующие строки:

Далее нужно скопировать файл sites/example.settings.local.php в sites/default/settings.local.php и в нем раскомментировать две строки (и не забыть очистить кеш):

Функция kint()

Кроме использования twig функции dump(), которую добавляет сам Twig, можно пользоваться функцией kint(), которую добавляет devel kint — подмодуль devel. Многие наверняка для отладки переменных в Drupal 7 использовали devel функцию dpm(), которая при выводе использует krumo. Так вот, kint является этаким krumo-заменителем. Kint, в отличие от krumo, при выводе объектов добавляет информацию о всех его методах.
Примеры использования kint() в шаблонах twig:

Можно вывести информацию сразу о нескольких переменных :

Если не передавать в функцию аргументы, выведется информация о всех переменных шаблона:

При переносе сайта из dev окружения в production рекомендуется:

  • все опции в файле sites/default/services.yml вернуть в значения по умолчанию
  • в файле settings.php закомментировать строки:

При написании статьи использована официальная документация Debugging compiled Twig templates

Оформление и Блоки в CMS Drupal — шаблоны для Drupal, структура, смена и загрузка шаблона

День добрый, уважаемые читатели wmbn.ru! Продолжаем работать с CMS Drupal, а именно с меню системы, и сегодня рассмотрим такой пункт меню Drupal, как оформление. Drupal, как и любая другая система управления сайтом ее масштаба имеет потрясающую возможность быстрой смены оформления при помощи шаблонов. Вспомните те же шаблоны WordPress — их просто огромное количество и администратор блога может спокойно сменить тему, останется лишь доработать некоторые недочеты на его взгляд. В CMS Drupal все точно так же — можно без особого труда сменить и настроить тему как вздумается, изменить ее код или добавить что-то новое.

Но если более подробно сравнивать шаблоны для Drupal и WordPress, то можно заметить ряд существенных отличий — сама структура файлов уже другая, по другому организован принцип работы. Да и функционал в шаблонах куда интереснее и имеет больше возможностей (так как сам Drupal тоже имеет больше возможностей). Настроек у шаблона Drupal тоже на порядок больше чем у WordPress шаблонов, хотя и для WordPress есть такие темы, которые могут сделать из шаблона просто творение специалиста в своем деле — имеется ввиду, что у шаблона внутри много настроек.

Шаблоны Drupal — загрузка и установка шаблонов

Приступим конкретно к рассмотрению шаблонов для Drupal. По сути для шаблона даже можно дать определение — набор файлов, которые в совокупности составляют дизайн любого сайта, обращаясь при этом к движку, в нашем случае к Drupal. Шаблоны для Drupal написаны на языке phptemplate, с помощью которого осуществляются взаимодействие файлов и запросы к системе.

Скачать готовый шаблон можно с официального сайта Drupal, где из большого количества тем (более 1300 готовых работ) можете подобрать свой, выбрав из фильтра те условия, которые нужны для поиска шаблона. Загруженный шаблон лучше всего не копировать сразу в папку themes в главной директории Drupal, а поместить в папку sites/all/themes, где можно найти файл README, в которой говорится, что сторонние шаблоны следует устанавливать в данную папку, чтобы в будущем при обновлении не возникало проблем.

Можно установить другую тему и включить ее, а можно пока воспользоваться стандартным шаблоном Drupal — Bartik, и посмотреть на его примере как устроены шаблоны и настройка к ним. Чтобы приступить к просмотру, перейдите в пункт Оформление, который находится в меню. После этого откроется список шаблонов для сайта и панели администратора. По умолчанию для сайта установлен шаблон Bartik, а для панели администрирования Seven. К шаблонам так же предлагается описание, а именно что в них можно изменить и настроить.

Ниже, в блоке Disabled Themes показаны отключенные шаблоны — Garland (установлен по умолчанию в шестой версии Drupal) и Stark — так называемый стартовый шаблон, с помощью которого можно писать свои шаблоны для Drupal или редактировать готовые. Ну а еще ниже в выпадающем списке можно выбрать ту тему оформления, которая будет применена для админской части сайта.

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

  • Верхний и нижний заголовок сайта — задается как градиент;
  • Фон сайта и сайдбара, а так же его рамки;
  • Цвет футера;
  • Цвет текста заголовка сайта и основного текста контента и ссылок;

Все изменения сразу же показаны в блоке просмотр.

Ниже показаны те компоненты сайта, которые можно отключить от их вывода на страницы сайта:

  • Логотип — тот же значок капли около названия сайта;
  • Само название сайта;
  • Слоган — отображается ниже;
  • Аватары в документах и комментариях — отображается фото как для автора записи (документа) так и для отзыва;
  • Статус регистрации пользователя;
  • Значок — фавиконка;
  • Основные и дополнительные ссылки — при их отключении как минимум отключается меню, а так же ссылки на записи;

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

Просмотр регионов и блоков в шаблонах для Drupal

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

Перейдя на страницу настройки блоков, в первую очередь бросается в глаза большая таблица с заголовками Блок, Регион и Операции. В ней то как раз изменяется структура шаблона Drupal и вывод записей. Для примера разберем регионы в стандартном шаблоне Drupal — Bartik.

Всего регионов в системе 15 штук — посмотреть их можно, нажав на ссылку Просмотр регионов:Bartik:

  • Заголовок — размещаются блоки в шапке сайта. Чаще всего данный регион отдается рекламе — баннерам или контекстной рекламе графического формата;
  • Популярное — второй регион, расположен сразу под шапкой;
  • Основной контент — документы, справка и закреплено. Выбор не ограничивается лишь показом одних документов, можно дополнить страницу сайта более функциональными блоками, нежели простым текстом;
  • Правая и левая колонка заняты соответственно колонкой первой и второй. Выполняют они роль сайдбара, но это только по стандарту блогов, а так можно что угодно добавить в шаблон — Drupal такую возможность поддерживает;
  • В подвале сайта (футере) расположены еще семь регионов, которые разделяют всю нижнюю часть сайта. Туда можно установить различные счетчики от сервисов статистики (Яндекс.Метрика, Рейтинг@Mail.ru и прочие);
  • Последняя часть шаблона отдается нижней колонке. Можно отдать данный блок под описание сайта, дублированное меню и прочие хитрости;

Когда ни один блок не будет установлен в хотя бы один регион, он будет расположен в конце таблицы после пункта Выключено, их список тоже небольшой (основные блоки):

  • Пользовательское меню — блок тех ссылок, что вы добавили в качестве навигации по сайту;
  • Вход в аккаунт — стандартная форма входа в панель администратора Drupal;
  • Выбор языка — блок говорит сам за себя, выбираем тот язык, который доступен в системе и переводе;
  • Документ — основной блок, в котором выводятся созданные записи. Его обычно выставляют в центре сайта, в регионе Документы, но так же можно установить его в другой регион, сделав блок в качестве новости сайта;
  • Лента сайта — добавляет значок RSS для подписки на новостную ленту сайта. Очень даже симпатично смотрится в подвале сайта в самой нижней колонке — порталу вряд ли так требуются подписчики, как блогу;
  • Новые комментарии, пользователи и сообщения — ясно по названию, удобно расположить в футере сайта в одной из колонок;
  • Основные ссылки — добавляет ссылки для быстрого перехода к записям и страницам сайта;
  • Сделано на Drupal — блок сообщает посетителям, что сайт работает на системе управления сайтом Drupal;
  • Сейчас на сайте — показывает количество пользователей, посетивших сайт в настоящий момент;
  • Форма поиска — с помощью данного блока добавляется на сайт поисковая форма Drupal, причем она вполне функциональная, однако для ее стабильной работы не забудьте запустить cron.php после добавления новостей;

Настройка и создание блоков для шаблонов Drupal

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

  • Страницы — показывать блок на перечисленных страницах, или наоборот исключать их;
  • Тип документов — выбираем какие типы документов показывать в блоке;
  • Роли — можно выбрать каким пользователям (типам или ролям) показывать данный блок — посетителю, пользователю или администратору;
  • Пользователи — настройка видимости блока для типов пользователей системы;

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

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

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

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

Топ-пост этого месяца:  Красивые эффекты для иконок при наведении с помощью CSS3 переходов
Добавить комментарий