Thêm JS vào chủ đề Drupal 8 (thay thế cho drupal_add_js)

Trong Drupal 7, tôi có thể sử dụng drupal_add_jstrong tệp template.php của một chủ đề như một theme_preprocess_html(&$vars)hàm:

   drupal_add_js(drupal_get_path('theme', 'mytheme') . '/js/scripts.js',
        array(
          'group' => JS_THEME,
          'preprocess' => TRUE,
          'weight' => '999',
        ));

  $vars['scripts'] = drupal_get_js();

Trong Drupal 8, tôi đã thử chuyển đổi điều này bằng cách sử dụng tệp .themeattached của chủ đề của mình như sau:

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

... nhưng điều đó không hoạt động và không có lỗi trong watchdog / console hay nói cách khác.

Theo trang API D8 cho drupal_add_js:

Không dùng nữa - kể từ Drupal 8.0. Thay vào đó, hãy sử dụng khóa #attached trong mảng kết xuất.

Tuy nhiên, không có nhiều thông tin hơn thế. Có vẻ như drupal_add_csscũng sẽ sử dụng phương pháp này. Tôi biết vẫn còn sớm cho Drupal 8 nhưng tôi đã hy vọng có được một bước nhảy vọt về điều này.

Có vẻ như bạn có thể sử dụng hook_preprocess_pagekèm theo như vậy:

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

Điều này hoạt động rất tốt ( theme.inc sử dụng phương pháp này), lưu ý mảng lồng thêm xung quanh trọng lượng.

Điểm mấu chốt trong tài liệu là bit này

Thay vào đó, hãy sử dụng khóa #attached trong mảng kết xuất .

Nhấn mạnh mỏ.

Các $variablesmảng trong một chức năng theme / preprocess không phải là một mảng render, nó chỉ là một mảng cầm biến. Để sử dụng, #attachedbạn sẽ cần một cái gì đó như thế này trong chức năng tiền xử lý:

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

Và cái này trong tệp mẫu:

{ foo }

Nói cách khác, ít nhiều giống như trong Drupal 7 (ít nhất là tại thời điểm này).

hook_preprocess_html()có khả năng không phải là nơi thích hợp cho mã này; đừng quên các tệp js / css thực sự được hiển thị trong mẫu đó, vì vậy quá muộn để thêm nữa hook_preprocess_page(), hook_preprocess_node()hoặc tương đương có thể sẽ giúp bạn có kết quả đáng tin cậy hơn.

Xem Twig thực tiễn tốt nhất - trang chức năng và mẫu tiền xử lý để biết thêm thông tin về các biến tiền xử lý.

Kể từ Drupal 8.0.x-beta2, bạn có thể đính kèm CSS và JS từ các chức năng tiền xử lý.

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

Trong ví dụ này, bạn đang sử dụng một mảng render thực sự chứ không phải một mảng được kết xuất trong chính hàm đó.

Bằng cách này, các mô-đun khác, chủ đề, vv có thể thay đổi nó.

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

Mặc dù OP nói về Drupal 8, nhưng điều này có thể được thực hiện theo cách tương tự trong Drupal 7 mà không sử dụng drupal_add_js()để bắt đầu làm quen với việc không có drupal_add_js()xung quanh:

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

Các tùy chọn có thể được xác định trong mảng trống, xem https://api.drupal.org/api/drupal/includes%21common.inc/feft/drupal_add_js/7 .