将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,
      ),
    ),
  );

...但是那不起作用，并且看门狗/控制台或其他方面没有错误。

按照D8 API页面为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在主题/预处理功能阵列是不是渲染阵列，它只是一个列保持变量。要使用#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最佳实践-预处理功能和模板页面。

从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';
}

尽管OP是关于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。