Aggiunta di JS a un tema Drupal 8 (sostituzione di drupal_add_js)

In Drupal 7, posso usare drupal_add_jsall'interno del file template.php di un tema come una theme_preprocess_html(&$vars)funzione:

   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, ho provato a convertirlo usando attachedil file .theme del mio tema in quanto tale:

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

... ma quello non ha funzionato e non ci sono stati errori nel watchdog / console o altro.

Secondo la pagina API D8 per drupal_add_js:

Obsoleto - a partire da Drupal 8.0. Utilizzare invece la chiave #attaccata negli array di rendering.

Non c'erano molte più informazioni che comunque. Sembra che drupal_add_cssutilizzerà anche questo metodo. So che sono ancora i primi giorni per Drupal 8, ma speravo di fare un salto.

Sembra che tu possa usare hook_preprocess_pagecon allegato come tale:

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

Funziona alla grande ( theme.inc usa questo metodo), nota l'array nidificato extra attorno al peso.

Il punto chiave nella documentazione è questo bit

Utilizzare invece la chiave #attaccata negli array di rendering .

Enfasi mia.

L' $variablesarray in una funzione theme / preprocess non è un array di rendering, è solo un array che contiene variabili. Per usare #attachedavrai bisogno di qualcosa del genere nella funzione di preelaborazione:

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

E questo nel file modello:

{ foo }

In altre parole, più o meno lo stesso di Drupal 7 (almeno in questo momento).

hook_preprocess_html()tra l'altro non è probabilmente il posto giusto per questo codice; non dimenticare che i file js / css sono effettivamente resi in quel modello, quindi è troppo tardi per aggiungerne altri hook_preprocess_page(), hook_preprocess_node()o equivalenti probabilmente ti daranno risultati più affidabili.

Consulta la pagina sulle best practice di Twig: funzioni di preelaborazione e modelli per ulteriori informazioni sulle variabili di preelaborazione.

A partire da Drupal 8.0.x-beta2 è possibile collegare CSS e JS da funzioni di preelaborazione.

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

In questo esempio si sta utilizzando un array di rendering reale e non uno reso nella funzione stessa.

In questo modo altri moduli, temi ecc. Possono modificarlo.

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

Sebbene l'OP riguardi Drupal 8, questo potrebbe essere fatto in modo simile in Drupal 7 senza usare drupal_add_js()per iniziare ad abituarsi a non avere drupal_add_js()intorno:

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

Le opzioni possono essere definite nell'array vuoto, consultare https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_js/7 .