web-dev-qa-db-ja.com

Drupal 8テーマへのJSの追加（drupal_add_jsの置き換え）

Drupal 7では、テーマのtemplate.phpファイル内で_drupal_add_js_を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では、テーマの。themeファイルで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,
      ),
    ),
  );
_

...しかし、それは機能せず、ウォッチドッグ/コンソールなどにエラーはありませんでした。

D8 APIページ for _drupal_add_js_によれば：

非推奨-Drupal 8.0以降。レンダー配列で#attachedキーを使用してください。

しかしそれ以上の情報はありませんでした。 _drupal_add_css_もこのメソッドを使用するようです。 Drupal 8はまだ初期の段階ですが、これに飛びつきたいと思っていました。

theming8javascript
8
Danny Englander

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がこのメソッドを使用します）。重みの周りにネストされた追加の配列に注意してください。

7
Danny Englander

Drupal 8.0.x-beta2以降、プリプロセス関数からCSSとJSをアタッチできます。

https://www.drupal.org/node/2352319 を参照してください

4
Kim Pepper

ドキュメントの重要なポイントはこのビットです

代わりに#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のベストプラクティス-関数とテンプレートの前処理 ページを参照してください。

4
Clive

この例では、実際のレンダリング配列を使用しており、関数自体でレンダリングされる配列は使用していません。

このように、他のモジュール、テーマなどがそれを変更できます。

/**
 * 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
user24831

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 を参照してください。

0
lmeurs