Добавление JS в тему Drupal 8 (замена для drupal add js)


В Drupal 7 я могу использовать drupal_add_js в рамках темы template.php файл как функция theme_preprocess_html(&$vars):

   drupal_add_js(drupal_get_path('theme', 'mytheme') . '/js/scripts.js',
        array(
          'group' => JS_THEME,
          'preprocess' => TRUE,
          'weight' => '999',
        ));

  $vars['scripts'] = drupal_get_js();

В Drupal 8 я попытался преобразовать это с помощью attached в файле моей темы .тема как таковая:

  $vars['#attached']['js'] = array(
    array(
      'data' => drupal_get_path('theme', 'mytheme') . '/js/scripts.js',
      'options' => array(
        'group' => JS_THEME,
        'preprocess' => TRUE,
        'every_page' => TRUE,
      ),
    ),
  );

... но это не сработало, и не было никаких ошибок в сторожевом псе/консоли или в чем-либо другом.

В соответствии с страницей API D8 для drupal_add_js:

Устарело - с версии Drupal 8.0. Используйте ключ #прикрепленный в рендеринге вместо этого массивы.

Однако информации об этом было не намного больше. Похоже, что drupal_add_css также будет использовать этот метод. Я знаю, что для Drupal 8 еще рано, но я надеялся, что это поможет мне продвинуться вперед.

Author: Danny Englander, 2013-11-28

5 answers

Кажется, вы можете использовать hook_preprocess_page с прикрепленным как таковым:

function MYTHEME_preprocess_page(&$vars, $hook) {
  $path = drupal_get_path('theme', 'MYTHEME');
     // Render the main scripts file.
  $local_js = array(
    '#attached' => array(
      'js' => array(
        $path . '/js/scripts.js' => array(
          'group' => JS_THEME,
          'weight' => 9999),
      ),
    ),
  );
  \Drupal::service('renderer')->renderRoot($local_js);
}

Это отлично работает (тема.inc использует этот метод), обратите внимание на дополнительный вложенный массив вокруг веса.

 7
Author: Danny Englander, 2017-08-04 21:33:04

Ключевым моментом в документации является этот бит

Вместо этого используйте #прикрепленный ключ в массивах визуализации.

Акцент мой.

Массив $variables в функции темы/предварительной обработки не является массивом визуализации, это просто массив, содержащий переменные. Чтобы использовать #attached, вам понадобится что-то вроде этого в функции предварительной обработки:

$vars['foo'] = array(
  '#markup' => '<p>Bar</p>',
  '#attached' => array(
    'data' => drupal_get_path('theme', 'mytheme') . '/js/scripts.js',
    'options' => array(
      'group' => JS_THEME,
      'preprocess' => TRUE,
      'every_page' => TRUE,
    ),
  ),
);

И это в файле шаблона:

{ foo }

Другими словами, более или менее то же самое, что и в Drupal 7 (на данный момент по крайней мере, со временем).

hook_preprocess_html() кстати, скорее всего, это неподходящее место для этого кода; не забывайте, что файлы js/css фактически отображаются в этом шаблоне, так что уже слишком поздно добавлять что-либо еще hook_preprocess_page(), hook_preprocess_node() или эквивалент, вероятно, даст вам более надежные результаты.

Смотрите страницу Рекомендации Twig - функции и шаблоны предварительной обработки для получения дополнительной информации о переменных предварительной обработки.

 4
Author: Clive, 2013-11-28 14:09:38

Начиная с Drupal 8.0.x-beta2, вы можете прикреплять CSS и JS из функций предварительной обработки.

См. https://www.drupal.org/node/2352319

 4
Author: Kim Pepper, 2014-11-07 04:35:25

В этом примере вы используете реальный массив визуализации, а не тот, который отображается в самой функции.

Таким образом, другие модули, темы и т.д. могут изменить его.

/**
 * Implements hook_page_alter().
 */
function db_jacket_page_alter(&$page) {
  $page['#attached']['js'][] = drupal_get_path('theme', 'db_jacket') . '/js/jquery.image-depth.js';
}
 2
Author: user24831, 2013-12-30 19:01:06

Хотя ОП касается Drupal 8, это можно было бы сделать аналогичным образом в Drupal 7 без использования drupal_add_js(), чтобы начать привыкать к отсутствию drupal_add_js() рядом:

/**
 * Implements hook_preprocess_page().
 */
function YOURMODULE_preprocess_page(&$variables) {
  $module_path = drupal_get_path('module', 'YOURMODULE');
  $variables['page']['content']['#attached']['js'][$module_path . '/js/YOURMODULE.js'] = array();
}

Параметры могут быть определены в пустом массиве, см. https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_js/7.

 0
Author: lmeurs, 2014-07-09 16:45:44