Создание своей темы на основе Barrio

Опубликовано Elena Ivleva - вт, 07/21/2020 - 17:36

Установить тему Barrio (я использую composer).

В папке папка_сайта/themes/ создать папку custom.

В паку custom скопировать папку  subtheme из папка_сайта/themes/contrib/bootstrap_barrio.

Переименовать  subtheme в соответствии .с именем подтемы.

В моем случае папка и все имена файлов, относящиеся к моей подтеме будут иметь машинное имя stud2020.

А полное "человеческое" имя темы будет Study on-line.

Я использую "ручной" метод, без скриптов, которые автоматизируют поиск/замену текста в именах и внутри файлов. На мой взгляд, полезно первый раз сделать все вручную.

В папке подтемы меняем имена файлов:
bootstrap_barrio_subtheme.theme на stud2020.theme
bootstrap_barrio_subtheme.info.yml на stud2020.info.yml
bootstrap_barrio_subtheme.libraries.yml на stud2020.libraries.yml
/config/install/bootstrap_barrio_subtheme.settings.yml на /config/install/stud2020.settings.yml
/config/schema/bootstrap_barrio_subtheme.schema.yml на /config/schema/stud2020.schema.yml.

Изменяем файл stud2020.info.yml в верхней части:

name: Study on-line
type: theme
description: 'Barrio SubTheme for site studiareweb.'
core: 8.x
core_version_requirement: ^8 || ^9
base theme: bootstrap_barrio

libraries:
  - stud2020/bootstrap_cdn
  - stud2020/global-styling


В конце файла удаляем код:

# Information added by Drupal.org packaging script on 2020-07-12
version: '5.0.1'
project: 'bootstrap_barrio'
datestamp: 1594567874

Открываем файл /config/schema/stud2020.schema.yml и заменяем опять все, что нужно на название своей темы:

# Schema for the configuration files of the Bootstrap Barrio Subtheme.

stud2020.settings:
  type: theme_settings
  label: 'Study on-line settings'
  mapping:

Открываем файл  /js/global.js и подставляем имя темы в 10 строчке:

(function ($, Drupal) {

  'use strict';

  Drupal.behaviors.stud2020 = {
    attach: function (context, settings) {

    }
  };

})(jQuery, Drupal);

Открываем файл /color/color.inc и находим строку 117:

 // Preview files.
  'preview_library' => 'stud2020/color.preview',
  'preview_html' => 'color/preview.html',

  // Attachments.
  '#attached' => [
    'drupalSettings' => [
      'color' => [
        // Put the logo path into JavaScript for the live preview.
        'logo' => theme_get_setting('logo.url', 'stud2020'),

Дальше открываем в корне папки с подтемой файл stud2020.theme и исправляем название функции:

function stud2020_form_system_theme_settings_alter(&$form, FormStateInterface $form_state)

Все, теперь можно  включить тему и сделать ее темой по умолчанию.

Для этого урока есть упражнения