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

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

Drupal Drupal 8

Опубликовано: 03.09.2018

•

Время на чтение: 0 мин.

Важно

Информация из этой серии видео сильно устарела, не рекомендуется тратить время на её изучение.

В этой серии видеороликов мы попробуем создать блог на 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 — Как развернуть точную копию проекта

Часть 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 плагин и первый модуль для проекта.

Часть 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 — Кнопки предыдущий и следующий материал.

Часть 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 — Создаем плагин для записи в блог и проверяем работу.

Часть 5

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

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

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

Drupal 8: Мой процесс разработки и деплоя на июнь 2018

Тайминги:

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 — Устанавливаем базовую тему и рассказываю про устройство.

Часть 6

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

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

Тайминги:

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

Часть 7

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

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

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

Drupal 8: Создание Paragraphs Behavior Plugin

Тайминги:

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 — Выгружаем на прод и проверяем.

Часть 8

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

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

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

Drupal: Оптимизация сжатия и загрузки изображений

Тайминги:

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.

Часть 9

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

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

Тайминги:

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

Часть 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 — Случайные материалы.

Часть 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 — Начинаем верстать комменты.

Часть 12

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

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

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

Тайминги:

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

Часть 13

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

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

Тайминги:

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

Часть 14

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

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

Тайминги:

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

Часть 15

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

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

Тайминги:

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

Часть 16

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

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

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

Тайминги:

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

Часть 17

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

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

Часть 18

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

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

Тайминги:

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

Часть 19

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

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

Тайминги:

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

Следующий материал

Drupal 8: Tokens

Предыдущий материал

Drupal Commerce 2: Собственные этапы (статусы) выполнения заказа

Возможно я дол***ёю, возможно ты делаешь видос под эгидой "Как поднять синий стул". После 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(), так как у параграфов нет своих событий, что удивительно даже.

Max

• пн, 11/02/2019 - 16:38

Хорошо, спасибо, попробую.

Harry Potter

• пт, 03/01/2020 - 15:27

Огромное спасибо за эти видио.

Godwin

• ср, 17/06/2020 - 12:25

Как сделать из этого блог для сообщества?

Niklan

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

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

• ср, 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.

Niklan

• чт, 28/01/2021 - 13:02

Alt + Enter and add this property to custom ones.

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

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

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

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

Часть 1

Часть 2

Часть 3

Часть 4

Часть 5

Часть 6

Часть 7

Часть 8

Часть 9

Часть 10

Часть 11

Часть 12

Часть 13

Часть 14

Часть 15

Часть 16

Часть 17

Часть 18

Часть 19

Комментарии

Добавить комментарий

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

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

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

Часть 1¶

Часть 2¶

Часть 3¶

Часть 4¶

Часть 5¶

Часть 6¶

Часть 7¶

Часть 8¶

Часть 9¶

Часть 10¶

Часть 11¶

Часть 12¶

Часть 13¶

Часть 14¶

Часть 15¶

Часть 16¶

Часть 17¶

Часть 18¶

Часть 19¶

Комментарии

Добавить комментарий

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

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

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

Часть 1

Часть 2

Часть 3

Часть 4

Часть 5

Часть 6

Часть 7

Часть 8

Часть 9

Часть 10

Часть 11

Часть 12

Часть 13

Часть 14

Часть 15

Часть 16

Часть 17

Часть 18

Часть 19