Можно ли модифицировать HTML-шаблоны bootstrap 3 для работы с Drupal 8?

Большое волнение и слишком много кликов оставили меня во владении двумя вещами, которые не кажутся естественным образом совместимыми: обширный (я полагаю, скомпилированный - без папок/файлов LESS или SASS) шаблон сайта Bootstrap 3 (Unify) и установку Drupal 8 с базовой темой Bootstrap. Около 10+ часов исследований/тестирования поставили меня в тупик:

Возможно ли / разумно / эффективно ли попытаться изменить общий HTML-шаблон сайта Bootstrap 3 (например, тот, который я купил) для работы с Drupal 8? Или это либо или (сама по себе Bootstrap 3 против Drupal 8 + базовая тема Bootstrap)?

Мне интересно понять, может ли знающий человек сделать это за час или два или за 10+ часов. Если это поможет, расхождения начали складываться следующим образом:

  • совершенно другая файловая структура, чем тематика drupal
  • пытаясь вручную включить тонны плагинов .css и .js в library.yml
  • контент жестко запрограммирован в HTML?? поэтому я считаю, что это означает воссоздание их полностью с использованием тем Drupal (?)

person Eirene    schedule 26.09.2016    source источник


Ответы (1)


Я сделал что-то подобное совсем недавно, хотя это был небольшой проект.

В Drupal 8 (ядро) больше нет жестко закодированного HTML (или очень-очень мало). У вас может быть другой опыт работы с модулями contrib.

Я не считаю структуру темы препятствием. Нужно просто включить нужные файлы в файл libraries.yml.

Основная битва заключается в том, что вам придется переопределить twig файлов, чтобы назначить правильные (загрузочные) классы элементам.

input--submit.html.twig

Например, это добавит классы Bootstrap btn, btn-block и btn-lg ко всем кнопкам отправки.

Я также настроил кнопку отправки, чтобы она принимала атрибут значка (data-icon). Для существующих форм вам нужно будет работать с hook_form_alter, чтобы добавить атрибут. Для ваших собственных форм вы можете просто добавить его в массив #attributes.

{% set classes = [
    'btn', 'btn-block', 'btn-lg',
] %}

<button{{ attributes.addClass(classes) }}>
    <span class="glyphicon {{ attributes['data-icon'] }}"></span>
    <span>{{ attributes.value }}</span>
</button>{{ children }}

input--password.html.twig

Это для элемента формы пароля. Я добавил класс form-control.

<input{{ attributes.addClass("form-control") }} />{{ children }}

block--clean-main-menu.html.twig

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

{% set heading_id = attributes.id ~ '-menu'|clean_id %}
<nav {{ attributes.addClass('navbar navbar-default navbar-static-top') }}>
  <div class="container">
    <div class="col-lg-12">
      {% block content %}
        {{ content }}
      {% endblock %}
    </div>
  </div>
</nav>

Как я уже писал в начале, это был небольшой проект. У вас будет намного больше работы для более крупных проектов или, возможно, вы захотите иметь разные стили для разных кнопок отправки (подсказка: используйте hook_theme_suggestions_field_alter, чтобы добавить новые переопределения темы).

Мы работаем с большим количеством 100% настраиваемых тем в моей компании, и полное переопределение каждой мелочи является обычным явлением, поэтому мы уже к этому привыкли ;)

Также не забудьте установить расширение devel. Это очень поможет вам, когда вы захотите узнать, какой файл twig для чего используется.

person Ricardo Velhote    schedule 26.09.2016
comment
Большое Вам спасибо!! :) Сейчас это немного непривычно для меня, но я очень благодарен за ваш ответ, так что я углублюсь! И/или похоже, что я смогу по крайней мере проконсультироваться с фирмой (хотя мне придется ее найти) о стоимости настройки, поскольку она может быть не слишком астрономической. Искренне оцените это! - person Eirene; 26.09.2016