Создание сайта-блога на базе Drupal 8 (часть 2)

Опубликовано: 17.01.2020
Автор: Виталий Бочкарев

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

Для начала необходимо установить более удобное оформление портала администрирования Drupal - тему Adminimal - Responsive Administration Theme, и специальный модуль верстки Bootstrap. Для установки этих компонентов необходимо подключиться к серверу через консоль SSH и выполнить следующие команды:

cd /var/www/drupal
sudo /usr/local/bin/composer require drupal/adminimal_theme
sudo /usr/local/bin/composer require drupal/bootstrap

Затем необходимо вернуться в веб-портал и на странице администрирования тем Administration \ Appearance активировать темы Adminimal 8.x-1.5 (administration theme) и Bootstrap 8.x-3.20. Тему Adminimal необходимо поставить темой оформления портала администрорования, а тему оформления сайта пока менять не надо.

Необходимо скачать архив с библиотеками и примерами bootstrap по ссылке https://ftp.drupal.org/files/projects/bootstrap-8.x-3.20.zip к себе на компьютер и распаковать его в папку с проектом.

Внутри распакованного архива переименовать папку (или сделать копию) \bootstrap\starterkits\THEMENAME в \bootstrap\starterkits\MySite.

Внутри переименованной папки также найти и переименовать файлы THEMENAME.* в MySite.*.

Заменить favicon.ico, logo.svg и screenshot.png на свои изображения.

Файл MySite.starterkit.yml переименовать в MySite.info.yml.

Внутри MySite.info.yml заменить THEMENAME на MySite в 2 местах - в этом файле перечислены: имя темы, описание темы, регионы и библиотеки, используемые в оформлении.

В папке MySite\config\install переименовать файлы THEMENAME.* в MySite.*.

В папке MySite\config\schema переименовать файлы THEMENAME.* в MySite.*.

Внутри файла MySite\config\schema\MySite.schema.yml заменить THEMENAME на MySite.

Вернуться в коревую папку темы \bootstrap\starterkits\MySite и создать папку includes.

В папку MySite\includes скопировать bootstrap-3.3.7-dist из архива, скачанного по ссылке https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip. Папку bootstrap-3.3.7-dist переименовать в bootstrap.

В файле bootstrap\starterkits\MySite\MySite.libraries.yml дописать:

bootstrap:
  version: 1.x
  css:
    theme:
      includes/bootstrap/css/bootstrap.min.css: {}
  js:
    includes/bootstrap/js/bootstrap.min.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once
    - core/jquery.ajax
    - core/drupal
    - core/drupalSettings

В файле bootstrap\starterkits\MySite\MySite.info.yml дописать библиотеку MySite/bootstrap так, чтобы получилось:

libraries-extend:
  bootstrap/framework:
    - MySite/framework
    - MySite/bootstrap

В файл bootstrap\starterkits\MySite\MySite.info.yml внести изменения:
- добавить  hidden_blocks: 'Hidden blocks'
- переименовать header: 'Top Bar' в header: 'Header'
- переместить header: 'Header' в начало списка блоков
Файл должен выглядеть так:

core: 8.x
type: theme
base theme: bootstrap

name: 'MySite'
description: 'A Drupal Bootstrap 3 based sub-theme.'
package: 'Bootstrap'

regions:
  header: 'Header'
  navigation: 'Navigation'
  navigation_collapsible: 'Navigation (Collapsible)'
  highlighted: 'Highlighted'
  help: 'Help'
  content: 'Content'
  sidebar_first: 'Primary'
  sidebar_second: 'Secondary'
  footer: 'Footer'
  page_top: 'Page top'
  page_bottom: 'Page bottom'
  hidden_blocks: 'Hidden blocks'

libraries-extend:
  bootstrap/framework:
    - SysEngineering/framework
    - SysEngineering/bootstrap

Скопировать bootstrap\templates\system\page.html.twig в bootstrap\starterkits\MySite\templates\system\.
В файле bootstrap\starterkits\MySite\templates\system\page.html.twig в блоке {# Main #} удалить подблок {# Header #}, а перед строкой {# Navbar #} вставить:

{# Header #}
{% if page.header %}
  {% block header %}
    <div class="container">
      {{ page.header }}
    </div>
  {% endblock %}
{% endif %}

Скопировать bootstrap\templates\block\block.html.twig в bootstrap\starterkits\MySite\templates\block\. Сделать две копии файла block.html.twig: block--sitefooter.html.twig и block--siteheader.html.twig, а оригинальный файл block.html.twig удалить - данные имена twig-шаблонов будут показывать компилятору, что они относятся к блокам с именами SiteFooter и SiteHeader, которые были созданы ранее.
Изменить block--sitefooter.html.twig, исправив

  {% block content %}
    {{ content }}
  {% endblock %}

на

  {% block content %}
    <div class="sitefooter-wrapper">
      {{ content }}
    </div>
  {% endblock %}

Изменить block--siteheader.html.twig, исправив

  {% block content %}
    {{ content }}
  {% endblock %}

на

  {% block content %}
    <div class="siteheader-wrapper">
      {{ content }}
    </div>
  {% endblock %}

В таблице стилей bootstrap\starterkits\MySite\css\style.css дописать:

.siteheader-wrapper {
  margin: 5px 0px;
  padding: 0px;
  height: 100px;
  min-width: 700px;
  text-align: center;
}

.sitefooter-wrapper {
  margin: 10px 0px;
  padding: 12px 0px 2px 0px;
  height: 45px;
  background: #fff url(/sites/default/files/images/footer.png) repeat-x;
}

в файле bootstrap\starterkits\MySite\MySite.theme дописать функцию:

function MySite_preprocess_html(&$variables) {
  $variables['attributes']['class'][] = 'site-body';
}

в файле bootstrap\starterkits\MySite\css\style.css дописать:

.site-body {
  margin: 0px;
  padding: 0px;
  font-family: 'Trebuchet MS';
  font-size: 10pt;
  color: #555;
  background: #C3C3C3 url(/sites/default/files/images/body.png) repeat-x left top;
}

Скопировать готовую тему (папку bootstrap\starterkits\MySite) на сервер в папку /var/www/drupal/web/themes.

На сервере создать папку /var/www/drupal/web/sites/default/files/images и скопировать в нее файлы, используемые в стилях:
- body.png
- footer.png
- header.png
- header_box.png
- logo_box.png
- logo_circle.png

Активировать тему MySite на странице администрирования тем и назначить её как тему по умолчанию для оформления сайта.
В настройках темы MySite перейти на вкладку Bootstrap Settings\CDN и переключить провайдер CDN на None.

На странице блоков темы MySite в Header добавить пользовательский блок SiteHeader, убрать параметр Display title для добавленного блока, поместить блок на самый верх. Аналогично в раздел блоков Footer добавить пользовательский блок SiteFooter, убрать параметр Display title для добавленного блока

На странице блоков переместить в раздел Navigation (Collapsible) следующие блоки:
- Main navigation
- User account menu

В раздел Highlighted поместить следующие блоки:
- Search

В раздел Hidden blocks поместить следующие блоки:
- Breadcrumbs
- Status messages
- Page title
- Tabs
- Primary admin actions
- Help
- Tools
- Powered by Drupal
- Footer menu
- Site branding

Создать файл views-view-fields--main-page--page-1.html.twig в папке /var/www/drupal/web/themes/MySite/templates/views - этот файл отвечает за отображение страницы Главная (машинное имя main-page) в режиме страницы (машинное имя page-1):

<div style="min-height: 370px; text-align: center;">
  <div style="width: 250px; margin: 0 auto;">{{ fields.field_promoimage.content }}</div>
  <div style="margin: 10px 2px 2px 2px; text-transform: uppercase; font-size: 1.3em; font-weight: bold;">{{ fields.title.content }}</div>
  <div style="text-align: justify;">{{ fields.field_content.content }}</div>
</div>

Очистить кеш и помотреть результат оформления сайта, а так же структуры блоков
- http://имя-сайта-или-ip-адрес/
- http://имя-сайта-или-ip-адрес/admin/structure/block
- http://имя-сайта-или-ip-адрес/admin/structure/block/demo/MySite

 

Чтобы для новых страниц сайта автоматически формировались удобочитаемые адреса, необходимо настроить шаблоны псеводонимов страниц в разделе  Administration \ Configuration \ Search and metadata \ URL aliases:
- Add auto pattern
    - Тип: Content
    - Путь: notes/[node:title]
    - Тип контента: Заметка
    - Метка: Заметки - notes
    - Включен

Для страниц, которые были созданы ранее настройки модуля URL aliases, необходимо сгенерировать новые пути вручную, установив в свойствах каждой из такой страницы параметр Generate automatic URL alias (опция активируется после создания правила Pattern к обрабатываемому типу страниц). Если страниц очень много, то можно принудительно создать пути на странице управления контентом Administration \ Content, пометив нужные страницы и выбрав действие Update URL alias.
 
Активировать модуль metatag_verification
В настройках мета тегов  главной страницы указать код верификации яндекса
http://18.200.99.70/admin/config/search/metatag/front?destination=/admin/config/search/metatag
881871374be8c411