Добавление 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в файле моей темы .theme, например:

  $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. Вместо этого используйте ключ #attached в массивах рендеринга.

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

Кажется, вы можете использовать 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);
}

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

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

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

Акцент мой.

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

$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 - страницу функций и шаблонов предварительной обработки для получения дополнительной информации о переменных предварительной обработки.

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

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

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

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

/**
 * Implements hook_page_alter().
 */
function db_jacket_page_alter(&$page) {
  $page['#attached']['js'][] = drupal_get_path('theme', 'db_jacket') . '/js/jquery.image-depth.js';
}

Хотя ОП касается 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 .