WEB-GOAL-Logo-01.png

Интернет заработок

Торговля на бирже. WEB программирование
Майнинг криптовалюты

VK.com-logo.svg.png 800px-Solid_color_You_Tube_logo.png

Собственная тема Drupal 8 - Bootstrap без дополнительных модулей.

В отличие от Drupal 7, Drupal 8 использует шаблонизатор TWIG. По началу это казалось немного непривычным. Но в последствии, ты начинаешь понимать насколько это удобно. И так по порядку.

Структура

В начале рассмотрим структуру шаблона Drupal 8.
Как и в 7, 8 Drupal имеет такую же структуру папок:

/css  - Папка со стилями
/fonts - Папка со шрифтами
/images - Папка где размещаются картинки исключительно касающиеся непосредственно оформление темы
/js - Папка где находятся скрипты .js
/templates - папка где находятся файлы *.html.twig, например page.html.twig (хотя его можно оставить и в корне шаблона) html.html.twig, block.html.twig и т.п.

 

0001.jpg

Также рассмотрим файлы касающиеся непосредственно шаблона вашего сайта

Во первых создаем папку с названием нашего шаблона. Например в моем сайте используется шаблон webgoal. Хочу заметить что нельзя писать в названии тире, разве что нижнее подчёркивание.
Далее идёт:
/[Название шаблона].info.yml - Например webgoal.info.yml, в которой находиться информация - название шаблона, его описание, версия, информация о регионах в шаблоне 

 

0002.jpg

/[Название шаблона].libraries.yml - Набример webgoal.libraries.yml. Здесь подключается стили и скрипты.
/screenshot.png - Если файл screenshot.png находится в папке темы, он будет использоваться на странице «Внешний вид»
/logo.svg - Если в папке темы находится векторный файл SVG логотипа вашей темы, он может использоваться в заголовке веб-сайта. 
/templates/page.html.twig - Этот файл отвечает за вёрстку самого шаблона. За основу можно скачать из ядра Drupal 8 - drupal-8.3.7\core\modules\system\templates\* Здесь находятся необходимые стартовые файлы для шаблона.
/templates/html.html.twig - Здесь HTML разметка шаблона до и после <boody> здесь также можете подключать дополнительные стили, скрипты и метатеги.

 

0003.jpg

От теории к практике

Давайте создадим тему на основе Bootstrap 4, так как вышла бета версия. Идём по ссылке http://getbootstrap.com/docs/4.0/getting-started/download/ и скачиваем последнюю версию 

0004.jpg

И распаковываем его в наш сайт /themes/ И назовём шаблон shop 

 

0005.jpg

Далее добавляем нужные нам папки (fonts, images, templates), Затем из \core\modules\system\templates\ копируем page.html.twig и html.html.twig в папку /templates/
И скопируем из \core\themes\bartik\ файлы bartik.info.yml, bartik.libraries.yml и переименуем их в shop.info.yml, shop.libraries.yml соответственно. И создадим screenshot.png.

Работаем с кодом
Теперь начинаем редактировать каждый файл
shop.info.yml
Убираем от туда строки 

 

libraries:  
  - bartik/global-styling
ckeditor_stylesheets:
  - css/base/elements.css
  - css/components/captions.css
   - css/components/table.css
   - css/components/text-formatted.css

И ставим вместо них 

libraries:
  - shop/global-css
  - shop/global-js
stylesheets-remove:
  - core/assets/vendor/normalize-css/normalize.css
  - core/modules/system/css/system.module.css
  - core/modules/system/css/system.theme.css
  - core/modules/views/css/views.module.css

Таким образом мы удаляем лишние стили из нашего шаблона
Далее в name: пишем shop

А в regions: ставим те регионы какие нам необходимы в шаблоне

 

0006.jpg

Далее редактируем каждый файл
shop.libraries.yml 

Прописываем туда 

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
  js:
    js/common.js: {}
  dependencies:
    - core/jquery

0007.jpg

Затем подключаем CSS и js файлы как нам нужно в 
html.html.twig 

 

0008.jpg

Ну и наконец 
page.html.twig

Расставляем все регионы так как нам надо
Для этого мы используем
Такие команды

{% if page.нужный нам регион %} - Проверяет пустой или нет этот регион
{% elseif page.нужный нам регион %} - Тоже самое но если нужно второе условие а так его не используют

{{ page.нужный нам регион }} - Вывод нужного нам региона

{% endif %} - Конец условия

 

0009.jpg

Получился

<div class="pagewrap">
    {% if page.primary_menu %}
    <div class="block-wrap primary_menu">
        <div class="container">
            <div class="row">
            {{ page.primary_menu }}
            </div>
        </div>
    </div>
    {% endif %} 
    {% if page.header %}
    <div class="block-wrap header">
        {{ page.header }}
    </div>
    {% endif %}
    {% if page.secondary_menu %}
    <div class="block-wrap secondary_menu">
        <div class="container">
            <div class="row">
            {{ page.secondary_menu }}
            </div>
        </div>
    </div>
    {% endif %} 
    {% if page.breadcrumb %}
    <div class="block-wrap breadcrumb">
        <div class="container">
            <div class="row">
            {{ page.breadcrumb }}
            </div>
        </div>
    </div>
    {% endif %}
    {% if page.page_top %}
    <div class="block-wrap page_top">
        <div class="container">
            <div class="row">
            {{ page.page_top }}
            </div>
        </div>
    </div>
    {% endif %}
    <div class="block-wrap content-text">
      <div class="container">
        <div class="row">
    {% if page.sidebar_first %}
        {% if page.sidebar_second %}
          <div class="col-3">{{ page.sidebar_first }}</div>
          <div class="col-6">{{ page.content }}</div>
          <div class="col-3">{{ page.sidebar_second }}</div>
        {% else %}
          <div class="col-3">{{ page.sidebar_first }}</div>
          <div class="col-6">{{ page.content }}</div>
        {% endif %}
    {% else %}
        {% if page.sidebar_second %}
          <div class="col-9">{{ page.content }}</div>
          <div class="col-3">{{ page.sidebar_second }}</div>
        {% else %}
          <div class="col-12">{{ page.content }}</div>
        {% endif %}
    {% endif %}
         </div>
       </div>
    </div>
    {% if page.block_one %}
    <div class="block-wrap block_one">
        <div class="container">
            <div class="row">
            {{ page.block_one }}
            </div>
        </div>
    </div>
    {% endif %}
    {% if page.block_two %}
    <div class="block-wrap block_two">
            {{ page.block_two }}
    </div>
    {% endif %}
    {% if page.footer %}
    <div class="block-wrap footer">
        <div class="container">
            <div class="row">
            {{ page.footer }}
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% if page.modal %}
  <div class="block-wrap modal">
          {{ page.modal }}
  </div>
{% endif %}

Ну вот базовый шаблон готов. В следующий раз мы буде уму подключать Bootstrap обертку полям, кнопкам и всему остальному