1. Блог
  2. Адаптация темы Drupal для AMP

Модуль AMP позволяет создавать ускоренные мобильные страницы (AMP), сохраняя визуальную идентичность основного сайта. Вместо использования стандартной AMPTheme вы можете адаптировать свою текущую тему, создав её AMP-оптимизированную подтему.

AMP позволяет «конвертировать» вашу основную тему.

Создайте подтему

Создайте новую тему, унаследованную от вашей основной (например, Bartik или другой кастомной темы).

Вам потребуется удалить весь не поддерживаемый AMP javascript. К сожалению, это означает, что вы не сможете использовать темы, основанные на javascript. Темы, которые преимущественно основаны на CSS и используют его, отлично подойдут.

Для примера мы будем использовать тему Bartik, которую адаптируем для работы с AMP страницами. Данный пример можно посмотреть в модуле AMPTheme.

Объявляем зависимости

Создадим новую тему и назовем её bartik_amp. Сделаем её подтемой вашей основной. Для загрузки AMP библиотеки на каждой странице добавим её в секцию libraries. Это обязательный шаг.

libraries:
   - amp/runtime

Удаление несовместимого JavaScript

AMP запрещает внешние JS-библиотеки (кроме AMP-компонентов). Для отключения javascript нужно использовать секцию libraries-override:

libraries-override:
  core/backbone: false
  core/classList: false
  core/ckeditor: false
  core/domready: false
  core/drupal: false
  tracker/history: false
  user/drupal.user: false
  user/drupal.user.permissions: false
  views/views.ajax: false
  views_ui/views_ui.admin: false
  views_ui/views_ui.listing: false

Оптимизация CSS

AMP ограничивает CSS 75 КБ. Поэтому отключим CSS файлы, которые не важны для отображения страниц. Список файлов также нужно добавить в секцию libraries-override.

bartik/global-styling:
  css:
    component:
      css/components/form.css: false
      css/components/ui.widget.css: false
      css/components/ui.dialog.css: false
      css/components/ui-dialog.css: false
      css/components/forum.css: false
system/base:
  css:
    component:
      /core/themes/stable/css/system/components/autocomplete-loading.module.css: false
      /core/themes/stable/css/system/components/tabledrag.module.css: false
      /core/themes/stable/css/system/components/tablesort.module.css: false
      /core/themes/stable/css/toolbar/toolbar.module.css: false

Отключение CSS файлов может оказаться сложной задачей. В определении файлов может помочь дебагер. Добавьте в url &debug#development=1 на AMP странице. Не забывайте, что лимит CSS на AMP странице — 75 килобайт. Дебагер поможет следить за лимитом.

Конвертировать и привести вашу тему в соответствие с требованиями для AMP, может оказаться не так просто. Если у вас большая и сложная тема, это будет трудоёмкий процесс и результат может выглядеть не так, как на обычных страницах и потребуется изменение и переопределение CSS. Иногда создание темы с нуля может оказаться правильным решением.

Разметка HTML

Скопируем html.html.twig из основной темы Bartik в нашу. Нам нужно изменить разметку в соответствии со стандартами AMP.

Для начала изменим тег <html{{ html_attributes }}> на <html amp{{ html_attributes }}>. Удалим добавление javascript файлов из футера страницы <js-bottom-placeholder token="{{ placeholder_token }}">.

В заключении добавим в тег <head> стили для AMP:

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s
steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s
steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s
steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s
1 normal both}@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style
amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Хуки и препроцессы

Для правильной работы на потребуется переопределить хуки. В bartik_amp.theme добавим bartik_amp_library_info_alte. В нем нужно удалить библиотеку «html5shiv», которая добавляется на позднем этапе генерации страницы и мы не можем её убрать через info файла.

function bartik_amp_library_info_alter(&$libraries, $extension) {
  // This library persists even if listed in libraries-override.
  // This code will pull it out for good.
  if ($extension == 'core' && esset($libraries['html5shiv'])) {
    unset($libraries['html5shiv']);
  }
}

Некоторые javascript файлы могут быть добавлены в $variables['page']['#attached']['html_head'] и нам нужно исключить эту возможность. Мы уберем возможность добавлять тег <script>, но нам нужно сохранить все теги, которые добавляют json ld.

function bartik_amp_preprocess_html(&$variables) {
  foreach ($variables['page']['#attached']['html_head'] as $key => $value) {
    // Remove any other scripts that are being attached to the page.
    if ($value[0]['#tag'] == 'script' && (!isset($value[0]['#attributes']['type']) || $value[0]['#attributes']['type'] != 'application/ld+json')) {
      unset($variables['page']['#attached']['html_head'][$key]);
    }
  }
}

Возможно, вам потребуется внести изменения в хуки из вашей основной темы. Это может произойти, если в хуке используется невалидный HTML или добавляется javascript. Не бойтесь их перенести в .theme файл и скорректировать в соответствии с требованиями.

Шаблоны и корректировки

Некоторые элементы и теги для AMP требуют замены, например, тег <img>. Нужно скопировать image.html.twig и заменить тег на <amp-image></amp-image>. Рекомендуем скопировать шаблоны из AMPTheme. Если ваша темы использует специфичные шаблоны или дополнительные, которых нет в AMPTheme, скопируйте их и внесите в них изменения в соответствии со стандартами AMP. Ваш HTML должен быть валидным. Если в ваших шаблонах присутствует javascript, его нужно удалить.

Для <video> используйте <amp-video>, если в шаблонах вы используйте YouTube-ролики применяйте <amp-youtube>. Также вам потребуется заменить все <iframe> на <amp-iframe>. Это минимальный список часто используемых тегов, которые обязательны для замены. Дебаггер и валидатор вам поможет понять какие теги требуют замены.

В дополнение вам нужно использовать специальный AMP брэндинг блок (блок для логотипа вашего сайта) вместо стандартного. Так как логотип в AMP имеет специальную разметку и ограничения по размеру, вы также можете модифицировать стандартный блок. Логотип должен быть не шире 600px и не выше 60px.

Советы и рекомендации

Чтобы использовать вашу основную тему как материнскую для AMP темы, вам нужно не забывать о стандартах и требованиях AMP. И исправлять несоответствия везде, где они встречаются.

Пользуйтесь валидатором и дебагером, чтобы обнаружить несоответствия требованиями AMP. Также хорошим помощником для вас станет расширение для браузера Chrome или Opera. Дополнительные способы или возможности по валидации можно посмотреть на официальной странице.

Drupal 8
Drupal
Продвижение сайтов

Добавить комментарий

О текстовых форматах