Menambahkan JS ke tema Drupal 8 (pengganti drupal_add_js)

Di Drupal 7, saya bisa menggunakan file template.phpdrupal_add_js tema sebagai fungsi: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();

Dalam Drupal 8, saya sudah mencoba mengkonversi ini menggunakan attacheddalam tema saya .theme berkas seperti:

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

... tapi itu tidak berhasil dan tidak ada kesalahan dalam pengawas / konsol atau sebaliknya.

Menurut halaman D8 API untuk drupal_add_js:

Tidak digunakan lagi - mulai dari Drupal 8.0. Gunakan kunci #attached di render array sebagai gantinya.

Tidak ada info lebih lanjut tentang itu. Tampaknya drupal_add_cssjuga akan menggunakan metode ini. Saya tahu ini masih hari-hari awal untuk Drupal 8 tetapi saya berharap untuk melompat pada ini.

Tampaknya Anda dapat menggunakannya hook_preprocess_pagedengan melampirkan:

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);
}

Ini berfungsi baik ( theme.inc menggunakan metode ini), perhatikan array bersarang ekstra di sekitar berat.

Titik kunci dalam dokumentasi adalah bit ini

Gunakan kunci #attached di render array sebagai gantinya.

Tekankan milikku.

The $variablesarray dalam fungsi tema / preprocess tidak array membuat, itu hanya sebuah array memegang variabel. Untuk menggunakan #attachedAnda akan membutuhkan sesuatu seperti ini di fungsi 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,
    ),
  ),
);

Dan ini di file templat:

{ foo }

Dengan kata lain, kurang lebih sama dengan di Drupal 7 (setidaknya pada titik waktu ini).

hook_preprocess_html()omong-omong sepertinya bukan tempat yang tepat untuk kode ini; jangan lupa file js / css benar-benar dirender dalam template itu, jadi sudah terlambat untuk menambahkan lagi hook_preprocess_page(), hook_preprocess_node()atau yang setara mungkin akan memberi Anda hasil yang lebih andal.

Lihat halaman Twig best practices - fungsi preproses dan templat untuk informasi lebih lanjut tentang variabel preproses.

Pada Drupal 8.0.x-beta2 Anda dapat melampirkan CSS dan JS dari fungsi preprocess.

Lihat https://www.drupal.org/node/2352319

Dalam contoh ini Anda menggunakan array render nyata dan bukan yang dirender dalam fungsi itu sendiri.

Dengan cara ini modul lain, tema dll dapat mengubahnya.

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

Meskipun OP adalah tentang Drupal 8, ini bisa dilakukan dengan cara yang sama di Drupal 7 tanpa menggunakan drupal_add_js()untuk mulai terbiasa untuk tidak memiliki drupal_add_js()sekitar:

/**
 * 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();
}

Opsi dapat didefinisikan dalam array kosong, lihat https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_js/7 .