Hinzufügen von JS zu einem Drupal 8-Thema (Ersatz für drupal_add_js)

In Drupal 7 kann ich drupal_add_jsdie Datei template.php eines Themas als theme_preprocess_html(&$vars)Funktion verwenden:

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

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

In Drupal 8 habe ich versucht, dies mithilfe attachedder .theme- Datei meines Themas als solche zu konvertieren :

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

... aber das hat nicht funktioniert und es gab keine Fehler im Watchdog / in der Konsole oder auf andere Weise.

Laut der D8-API-Seite für drupal_add_js:

Veraltet - ab Drupal 8.0. Verwenden Sie stattdessen den Schlüssel #attached in Render-Arrays.

Es gab jedoch nicht viel mehr Informationen darüber. Es scheint, dass drupal_add_cssauch diese Methode verwendet wird. Ich weiß, dass es für Drupal 8 noch sehr früh ist, aber ich hatte gehofft, einen Sprung darauf zu machen.

Es scheint, dass Sie hook_preprocess_pagemit angehängten als solche verwenden können:

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

Dies funktioniert hervorragend ( theme.inc verwendet diese Methode). Beachten Sie das zusätzliche verschachtelte Array um das Gewicht.

Der entscheidende Punkt in der Dokumentation ist dieses Bit

Verwenden Sie stattdessen den Schlüssel #attached in Render-Arrays .

Hervorhebung von mir.

Das $variablesArray in einer Theme / Preprocess-Funktion ist kein Render-Array, sondern nur ein Array mit Variablen. Zur Verwendung #attachedbenötigen Sie Folgendes in der Vorverarbeitungsfunktion:

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

Und das in der Vorlagendatei:

{ foo }

Mit anderen Worten, mehr oder weniger das gleiche wie in Drupal 7 (zumindest zu diesem Zeitpunkt).

hook_preprocess_html()ist übrigens wahrscheinlich nicht der richtige Ort für diesen Code; vergessen Sie nicht , die js / CSS - Dateien sind tatsächlich in dieser Vorlage gemacht, so dass es zu spät ist mehr hinzuzufügen hook_preprocess_page(), hook_preprocess_node()oder gleichwertig wahrscheinlich Sie zuverlässigere Ergebnisse erzielen.

Sehen Sie sich die Zweig Best Practices - Vorprozess Funktionen und Vorlagen Seite für weitere Informationen über die Vorverarbeitung Variablen.

Ab Drupal 8.0.x-beta2 können Sie CSS und JS über Vorverarbeitungsfunktionen anhängen.

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

In diesem Beispiel verwenden Sie ein echtes Render-Array und nicht eines, das in der Funktion selbst gerendert wird.

Auf diese Weise können andere Module, Themen usw. dies ändern.

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

Obwohl es im OP um Drupal 8 geht, könnte dies in Drupal 7 auf ähnliche Weise geschehen, ohne sich daran drupal_add_js()zu gewöhnen, nicht in der Nähe zu drupal_add_js()sein:

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

Optionen können im leeren Array definiert werden, siehe https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_js/7 .