Разработка темы для Drupal 8

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

Я не буду описывать отличия в темизации Drupal 8 от 7, так как статья рассчитана на новичков в Drupal, а тот кто работал с семеркой и так поймет в чем различия.

Для начала нам понадобится:

1. Установить Drupal 8.
2. Добавить несколько материалов на сайт или сгенерировать модулем Devel.
3. Добавить блоки(например "About") для боковой колонки на странице /admin/structure/block/block-content
4. Сделать меню из нескольких страниц, на странице /admin/structure/menu/manage/main или на редактировании любой ноды.
5. Отключаем кеш drupal и twig, по инструкции. Если не отключить, придется  вручную очищать, после каждого обновления файлов.

Мы не будем использовать Bootsrap, SASS, Grunt и другие инструменты разработки, чтобы сосредоточится именно на написании темы для друпал. Код я пишу в Atom. Для этого нужно установить расширение для поддержки синтаксиса Twig.

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

Теперь давайте определим все регионы на сайте в eight.info.yml. Я сделал схему расположения регионов.

В мобильной версии все блоки региона Header Right, будут в одном "гамбургер меню", мы его сделаем простым скриптом.

Перечисляем регионы в eight.info.yml

regions:
  header_left: 'Header Left'
  header_right: 'Header Right'
  content: 'Content'
  sidebar_first: 'Sidebar first'
  footer: 'Footer'

Теперь настроим блоки для отображения в сайдбаре и футере на странице Administration / Structure / Block layout. Например блок About поставим в Sidebar и меню в Right Header.

Пишем в page.html.twig

<header>
    <div class="header">
        {{ page.header }}
    </div>
</header>
<div class="main-wrapper">
    <div class="content-column">
        {{ page.content }}
    </div>
    <div class="aside">
        aside1
    </div>
</div>

и в style.css

header {
    height: 3em;
    background: #fff;
    border-bottom: 1px solid #eee;
}
.main-container {
    display: flex;
    flex-flow: row wrap;
    margin: 0 5%;
}
.content-column,
.aside {
    flex: 1 100%;
}

Обновляем страницу сайта. Как видим добавился хедер и сайдбар, пока он не сбоку , а под контентом, потому что сначала делаем мобильную версию. 

Добавляем адаптивность и ограничиваем ширину контейнера.

/*Layout*/

.container {
  display: flex;
  flex-flow: row wrap;
  margin: 0 5%;
}

.content-column, .sidebar {
  flex: 1 100%;
}


@media all and (min-width: 600px) {
  .content-column { flex: 1 65%}
	   .sidebar { flex: 1 33%;
	   margin-left: 1%; }
}

@media all and (min-width: 1200px) {
   .container {
     width: 1140px;
   }
}

Теперь на десктопе и планшете должно быть 2 колонки, на мобильном — 1. Для простого блога этого достаточно.

Добавим еще в style.css оформление для сайдбара, и сделаем строку с датой в статье серого цвета.

/*Sidebar*/

.sidebar {
  margin-top: 2em;
}

.sidebar #block-about {
  padding: 20px;
  background: #eee;
}

.sidebar h2 {
  margin: 0;
  font-size: 1.5em;
}


/*Article */

article footer {
  color: #666;
  font-size: 14px;
}

После включения меню, шапка отображается криво. Сделаем сначала меню для мобильной версии. Добавим в шапку возле меню блок с гамбургер иконкой. Пишем css.

/* Hamburger icon */

.hamburger {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 32px;
  height: 32px;
  font-size: 0;
  text-indent: -9999px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
  background: transparent;
}

.hamburger:focus {
  outline: none;
}

.hamburger span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: #000;
}

.hamburger span::before,
.hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: #000;
  content: "";
}

.hamburger span::before {
  top: 10px;
}

.hamburger span::after {
  bottom: -20px;
}


/*Responsive header*/

.header {
  padding: 20px 0;
}

.header--right {  /*Hide header on mobile*/
    display: none;
}

/*Menu*/

.header--right  ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.header--right  li {
  list-style: none;
}

@media only screen and (min-width: 959px) {  /*Hide menu icon on desktop */
  .hamburger {
    display: none;
  }

  .header--right {  /*Hide header on mobile*/
      display: flex;
  width: auto;
  }

  .header--right  li {
    display: inline;
    margin-left: 2em;
  }

}

И в scripts.js пишем:

(function ($, Drupal) {

  "use strict";

  Drupal.behaviors.eight = {
    attach: function (context) {
      $(document).ready(function() {


        $( ".hamburger" ).click(function() {
          $( ".header--right" ).slideToggle( "slow");
        });


  	  });
    }
  };

})(jQuery, Drupal);

А с футером вообще все просто, только css добавим:

/*Footer*/

.footer {
  padding: 40px 0;
  margin-top: 40px;
background: #F5F5F5;
color: #666;
font-size: 0.9em;
}


.footer a {
  color: #999;
}

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