Drupal 8テーマへのJSの追加（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を参照してください。