Drupal 8: Создание собственного блога с нуля

Серия видеороликов о разработке собственного блога на Drupal 8 с нуля.

03.09.2018
15 комментариев
10 мин.

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

Актуальный демо-сайт.

Для кого данное видео?

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

Это не типичный гайд, где все будет разжевано. Я буду лишь стараться объяснить что я делаю, зачем я это, почему так, а не иначе. Расчет на то, что смотря видео, вы будете тормозить на тех частях, где не ясно что я делаю и гуглить. Для тех кто уже более-менее знаком с Drupal, это позволит взглянуть на некоторые вещи с другого ракурса и, возможно, открыть для себя что-то новое.

Я подразумеваю, что вы хотябы знакомы с тем, что такое Drupal и каким-то минимумом, например, что такое типы материалов и уже кликали что-то в админке. Если же такой базы нет, приготовьтесь гуглить :).

Как мы построим работу над блогом?

Работа будет вестись через GitLab в специально созданном репозитории.

Мы будем создавать там задачки, решать их, закрывать и пушить в репозиторий. Все свои предложения об улучшении, создании чего-то нового, вопросы и все такое прочее, лучше, конечно, чтобы вы создавали в ишьюсах. Так как вы читаете это в блоге, кто-то будет смотреть видео через YouTube, а кто-то ещё может быть где-то. Так, у нас у всех будет одно централизованное место для вопросов, задач и предложений. Постараемся работать коллективно и открыто, все же OpenSource, как ни как. ?

Всё что я делаю и показываю в видео, далеко не обязательные части, и вы должны это понимать и где-то сами отличать, где что-то можно пропустить. Например, использование Git, GitLab, Docker4Drupal и вообще Docker для локального сервера, а также Linux абсолютно не обязательно, хотя, я бы это все рекомендовал. Но от того, будите ли вы это использовать или нет, суть от этого и результат не должны поменяться. Мы, в первую очередь, работаем с Drupal и его API, а не с другими технологиями, хоть они так или иначи вклиниваются в нашу разработку.

Предупреждение

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

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

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

Часть 1

В первой части:

  • Развернем локальный сервер для сайта при помощи Docker4Drupal.
  • Установим Drupal 8.5.6 при помощи Composer Drupal Project.
  • Установим и настроим зависимости (модули и не только), а также патчи для них и репозиторий Asset Manager при помощи Composer.
  • Добавим 7 типов параграфов и 2 типа материала.
  • Поработаем с GitLab.
  • Посмотрим как развернуть полноценную копию проекта у себя.

Рекомендации к прочтению:

Тайминги:

  • 00:16 — Для кого данное видео?
  • 01:42 — Как мы построим работу над блогом?
  • 04:31 — Предупреждение перед началом
  • 09:08 — Разворачиваем веб-сервер
  • 20:40 — Устанавливаем Composer Drupal Project
  • 23:47 — Установка Drupal
  • 28:08 — Отключаем кэширование и включаем дебаг Twig
  • 31:02 — Устанавливаем модули и прочие зависимости
  • 59:26 — Делаем параграфы
  • 1:34:31 — Создаем типы содержимого
  • 2:05:06 — Как развернуть точную копию проекта
Thumbnail

Часть 2

Во второй части:

  • #18 Обновим ядро Drupal с 8.5.6 до 8.6.0.

  • #17 Переведем проект на использование Media.

    • Расскажу что такое Media и как может пригодится.
    • Включим новый модуль Media Library из Drupal 8.6.0.
    • Переделаем старые файловые поля на медиа поля.
    • Переделаем два параграфа для YouTube на Удаленные видео с использованием Media.
  • #16 Настроим ЧПУ для материалов.

  • #10 Добавим комментарии к записи в блог.

  • #4 Отложенный постинг материалов.

  • #5 Создадим первый Paragraph Behavior.

Рекомендации по изучению:

Тайминги:

  • 00:52 — Что нужно знать перед обновлением минорной версии ядра.
  • 16:51 — Обновление ядра до 8.6.0.
  • 28:35 — Что такое Media и почему мы переведем файлы на него.
  • 42:12 — Настраиваем медиа типы, а также перевод наших параграфов и типов материалов на Media.
  • 1:04:00 — Добавляем тестовый материал с параграфами. Заодно тестим Media.
  • 1:16:54 — Настраиваем ЧПУ.
  • 1:23:21 — Добавляем поддержку комментариев к записи в блог.
  • 1:26:17 — Отложенная публикация записи в блог.
  • 1:33:00 — Объясняю про Paragraphs Behavior, чем лучше полей и зачем вообще нужны.
  • 1:39:14 — Создаем GalleryBehavior плагин и первый модуль для проекта.
Thumbnail

Часть 3

В третьей части:

  • #21 Пропатчим Media для будущей верстки + от блокировки РКН.
  • #5 Создадим все оставшиеся Paragraph Behavior плагины.
  • #20 Добавим защиту от спама.
  • #11 Страница тэгов.
  • #19 Создадим кнопки на предыдущий и следующей материал.

Рекомендации по изучению:

Тайминги:

  • 00:32 — Патчим Media от РКН.

  • 10:40 — Продолжаем делать Paragraph Behavior плагины.

    • 11:12 — ImageAndTextBehavior
    • 47:54 — ParagraphClassBehavior
    • 54:20 — ParagraphStyleBehavior
    • 1:14:49 — ParagraphTitleBehavior
    • 1:25:06 — RemoteVideoBehavior
    • 1:34:30 — RemoteVideoGalleryBehavior
  • 1:39:39 — Защищаем формы от спама.

  • 1:43:46 — Настройка страницы тэгов

  • 1:49:41 — Кнопки предыдущий и следующий материал.

Thumbnail

Часть 4

В четвертой части:

Всё видео посвящено закрытию задачи #15. Мы создадим новый модуль dlog_hero, который будет добавлять два новых типа плагинов DlogHeroPath и DlogHeroEntity, которые позволят делать красивые заголовки, также известные как Hero Image.

Рекомендации по изучению:

Тайминги:

  • 05:08 — Начинаем делать модуль и ввод что сделаем.

  • 10:19 — Делаем аннотации.

    • 10:24 — Создание аннотации DlogHeroEntity.
    • 20:15 — Создание аннотации DlogHeroPath.
  • 24:20 — Объявляем интерфейсы для плагинов.

    • 26:35 — Создание интерфейса DlogHeroPluginInterface.
    • 37:30 — Создание интерфейса DlogHeroPathPluginInterface.
    • 40:30 — Создание интерфейса DlogHeroEntityPluginInterface.
  • 46:08 — Создаем базовые объекты для плагинов.

    • 46:39 — Создание DlogHeroPluginBase.
    • 1:11:46 — Создание DlogHeroPathPluginBase.
    • 1:14:30 — Создание DlogHeroEntityPluginBase.
  • 1:17:33 — Создаем DlogHeroPluginManager.

  • 2:02:42 — Создаем первый плагин, который будет использоваться по умолчанию DlogHeroPathDefaultPlugin.

  • 2:06:48 — Объявляем темплейт для вывода.

    • 2:06:59 — Реализуем hook_theme().
    • 2:08:30 — Реализуем hook_theme_suggestions_HOOK() для вариативности шаблона.
    • 2:10:18 — Реализуем template_preprocess_HOOK() для обработки переменных.
    • 2:11:52 — Описываем темплейт.
  • 2:18:00 — Создаем блок, который будет выводить результат плагинов.

  • 2:29:39 — Добавляем блок на страницу.

  • 2:33:15 — Создаем плагин для записи в блог и проверяем работу.

Thumbnail

Часть 5

В пятой части:

В этом видео мы выгрузим наш блог в текущем состоянии на сервер и настроим деплой при помощи GitLab CI. А также подготовим тему для верстки и сделаем drush генератор для наших плагинов из четвертого видео.

Рекомендации по изучению:

Тайминги:

  • 1:42 — #24 Фиксим ошибку в коде поля "предыдущий и следующий материал".

  • 4:13 — #26 GitLab CI

    • 6:23 — Выгружаем сайт на сервер.
    • 21:30 — Объяснение про CI.
    • 24:00 — Установка GitLab Runner.
    • 34:10 — Описываем деплой в .gitlab-ci.yml
  • 54:50 — #29 Обновляем патч для Photoswipe

  • 1:02:50 — #25 Добавляем страницу /blog для вывода материалов блога.

  • 1:07:08 — #27 Добавляем Drush Generator для наших плагинов DlogHero.

  • 1:44:17 — Устанавливаем базовую тему и рассказываю про устройство.

Thumbnail

Часть 6

В шестой части:

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

Тайминги:

  • 01:00 — Вырубаем дебаг на проде. Включаем кэш.
  • 09:11 — Начинаем верстку.
  • 13:50 — Верстаем шапку.
  • 1:22:58 — Верстаем подвал.
  • 1:59:36 — Делаем плагин с видео для страницы блога.
  • 2:27:15 — Коммитим и докидываем зависимости на продакшен.
Thumbnail

Часть 7

В седьмой части:

Перенесем шапку и подвал из Snippet Manager в Twig, а также заверстаем параграфы с учетом ранее созданных бихейверов.

Рекомендации по изучению:

Тайминги:

  • 00:10 — #33 Добавляем зависимость для модуля dlog_hero.

  • 02:18 — #34 Переносим шапку и футер из Snippet Manager в Twig.

  • 26:50 — Меняем градиент для Dlog Hero блока.

  • 28:00 — Фиксим появившийся отступ в шапке.

  • 35:15 — Верстка параграфов.

    • 37:15 — Корректируем отображение страницы и немного стилей.
    • 39:45 — Параграф - текст.
    • 40:25 — Оформляем заголовки для всех параграфов.
    • 50:30 — Параграф - изображение с текстом.
    • 1:07:00 — Параграф - одиночное изображение.
    • 1:10:45 — Параграф - галерея.
    • 1:26:17 — Параграф - код.
    • 1:54:15 — Параграф - удаленное видео.
    • 2:08:10 — Стили параграфов.
    • 2:14:00 — Выгружаем на прод и проверяем.
Thumbnail

Часть 8

В восьмой части:

В этом видео мы обновим ядро и все зависимости. Сделаем сжатие картинок через ImageMagick. Оформим тизеры записей в блог и много чего по мелочи.

Рекомендации по изучению:

Тайминги:

  • 00:45 — #37 Обновляем ядро и зависимости.

  • 01:56 — #38 Настраиваем ImageMagick.

  • 07:50 — #39 Вносим правки для параграфа изображение и текст.

  • 17:45 — Переоформляем враппер контента.

  • 29:10 — Приблизительное время прочтения для материала.

  • 46:37 — Оформляем тизер блог поста, начинаем.

  • 47:07 — Оформляем и настраиваем сайдбар.

  • 1:01:00 — Оформляем тизер блог поста, продолжаем.

  • 1:17:15 — Полный материал записи в блог.

    • 1:19:00 — Оформляем кнопки предыдущий и следующий материал.
    • 2:04:30 — Добавляем теги в Dlog hero.
Thumbnail

Часть 9

В девятой части:

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

Тайминги:

  • 00:05 — #40 Изменения сделанные после 8 части.
  • 09:20 — Кнопки для шаринга материала в соц. сетях.
  • 38:45 — Оформляем прикрепленные файлы.
Thumbnail

Часть 10

В десятой части:

В этом видео мы сделаем вывод похожих и случайных материалов кодом, избегая Views. Поработаем с theme_hook(), #lazy_builder, EntityQuery и попишем собственные сервисы.

Рекомендации к прочтению:

Тайминги:

  • 00:00 — #44 Правки между 8.x-1.8 — 8.x-1.9

  • 05:30 — #12 Случайные и похожие материалы.

    • 07:45 — Делаем похожие материалы.
    • 1:48:15 — Случайные материалы.
Thumbnail

Часть 11

В одиннадцатой части:

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

Рекомендации к прочтению:

Тайминги:

  • 00:00 — #46 Правки между 8.x-1.9 — 8.x-1.10

  • 09:04 — #47 Оформление комментариев.

    • 9:45 — Отключаем выбор формата.
    • 27:35 — Добавляем плейсхолдеры для полей комментария.
    • 33:25 — Оформляем форму комментариев.
    • 48:32 — Добавляем тестовые комментарии.
    • 52:50 — Делаем сервис Letter Avatar.
    • 1:27:50 — Начинаем верстать комменты.
Thumbnail

Часть 12

В двенадцатой части:

В этом видео мы закончим оформление комментариев, и начнем работу над терминами таксономии.

Рекомендации к прочтению:

Тайминги:

  • 00:00 — #49 Правки между 8.x-1.10 — 8.x-1.11
  • 10:40 — #47 Дорабатываем комментарии.
  • 01:08:00 — #43 Начинаем оформлять термины.
Thumbnail

Часть 13

В тринадцатой части:

В этом видео мы закончим оформлять термины таксономии, и сделаем подсветку строк кода для соответствующего параграфа.

Тайминги:

  • 00:00 — #52 Правки между 8.x-1.11 — 8.x-1.12
  • 1:50 — #43 Дорабатываем теги.
  • 32:45 — #41 Подсветка линий кода для параграфа.
Thumbnail

Часть 14

В четырнадцатой части:

В этом видео мы оформим главную страницу и начнем оформлять страницу контактов.

Тайминги:

  • 00:00 — #53 Правки между 8.x-1.12 — 8.x-1.13
  • 06:56 — #54 Делаем главную страницу.
  • 01:21:50 — #9 Делаем страницу контактов.
Thumbnail

Часть 15

В пятнадцатой части:

В этом видео мы доделаем страницу контактов, оформим страницу "Об авторе", сделаем новую твиг функцию, и небольшую страницу с настройками.

Тайминги:

  • 00:00 - #9 Доделываем страницу контактов.
  • 37:30 — #55 Делаем страницу "Об авторе".
  • 01:34:05 — Добавляем форму с настройкой и пункт в тулбар.
  • 01:52:48 — Делаем Twig функцию для своих настроек.
Thumbnail

Часть 16

В шестнадцатой части:

В этом видео мы установим и настроим Search API, создадим и настроим REST Resrouce, который программно ищет в Search API, и подготовим модуль для поиска на Vue.js.

Рекомендации к прочтению:

Тайминги:

  • 04:18 — Устанавливаем и настраиваем Search API.
  • 39:02 — Создаем REST Resource.
  • 01:43:50 — Готовим модуль под Vue.js
Thumbnail

Часть 17

В семнадцатой части:

В этом видео мы доделаем поиск на главной при помощи Vue.js

Thumbnail

Часть 18

В восемнадцатой части:

В этом видео мы оформим результаты поиска, и начнем делать адаптивный дизайн.

Тайминги:

  • 00:00 — Оформление результатов поиска.
  • 30:00 — Делаем адаптив
Thumbnail

Часть 19

В девятнадцатой части:

В этом видео мы закончим адаптив, сделаем метатеги для записей в блог (для соц. сетей).

Тайминги:

  • 01:56 — Продолжаем делать адаптив
  • 01:19:00 — Метатеги для записи в блог.
  • 01:31:27 — Проверяем на PageSpeed.
Thumbnail
Drupal 8
Drupal

Комментарии

Harry Poter   сб, 29/09/2018 - 14:55

Возможно я дол***ёю, возможно ты делаешь видос под эгидой "Как поднять синий стул". После etc/hosts и mcedit ничего не работает. Добавил ту же самую информацию через другой редактор. Но все тот же синий стул. Спасибо тебе огромное за то что все так сильно обьясняешь, но все же.

sander   вт, 16/10/2018 - 20:36

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

Niklan   ср, 17/10/2018 - 06:36

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

{# Где 7 - tid термина, на основе которого нужно фильтровать. #}
{{ drupal_view('view_id', 'display_id', 7) }}
$render_element = [
  '#type' => 'view',
  '#name' => 'view_id',
  '#display_id' => 'display_id',
  '#arguments' => [7],
];
$view = Views::getView('view_id');
$view->preview('display_id', [7]);

Аргументы (7) - передаются в контекстуальные фильтры вьюса, в том порякде, в каком они выставлены в самом вьюсе.

CyberX   чт, 01/11/2018 - 14:52

Я не выдержал этот кусок говна обросший зависимостями и тупо написал свою CMS по подобию D6. Восьмерка убила Друпал.

Вячеслав   вс, 25/11/2018 - 01:45

И что же это за CMS такая получилась? Почему по подобию именно D6, а ни той же D7? Чем же она лучше?

Вячеслав   вс, 25/11/2018 - 01:57

Посмотрел - хрень какая-то, на коленке сделанная для личного пользования :) Нет уж, - я на Drupal 8 останусь, после Семерки - это комбайн

Cepera   ср, 09/01/2019 - 16:45

Что нужно изучить что бы понимать что такое друпал-восьмерка ?

Max   ср, 06/02/2019 - 00:23

Привет Niklan. Не подскажешь какой хук в Drupal 8 лучше использовать для перехвата данных удаляющегося элемента Параграфа? Спасибо!

Niklan   ср, 06/02/2019 - 11:11

Скорее hook_ENTITY_TYPE_delete(), так как у параграфов нет своих событий, что удивительно даже.

Niklan   пт, 19/06/2020 - 08:50

Из этого блога ничего не надо делать. И что значит "блог для сообщества"? Дать права на публикацию авторизованным, вот и будет блог для сообщества.

Ng   ср, 27/01/2021 - 21:24

hi, Часть 6 , at 34:30 how to show the code autocomplition, such as: lost-flex-container or other lost-...sth i have installed lost and postcss, it doesn't show. can you tell me how to show it? thx.