Эта публикация - продолжение статьи Создание сайта-блога на базе 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