Fügen Sie den Verwaltungsseiten JavaScript-Dateien hinzu

Wie füge ich mithilfe eines Moduls JavaScript / CSS-Dateien zu jeder Verwaltungsseite hinzu?

Mit einem Modul können Sie zwei Methoden anwenden:

• Implementieren von hook_init ()
• Umsetzung hook_form_alter ()

Mit der ersten Methode können Sie die zusätzlichen JavaScript- (oder CSS-) Dateien zu Verwaltungsseiten hinzufügen, während Sie mit der zweiten Methode diese Dateien nur zu Seiten hinzufügen können, die Formulare enthalten.

function mymodule_init() {
  if (arg(0) == 'admin') {
    $path = drupal_get_path('module', 'mymodule');
    drupal_add_js($path . '/mymodule.js');
    drupal_add_css($path . '/mymodule.css');
  }
}

function mymodule_form_alter(&$form, &$form_state, $form_id) {
  if (arg(0) == 'admin') {
    $path = drupal_get_path('module', 'mymodule');  
    $form['#attached']['css'][] = $path . '/mymodule.css';
    $form['#attached']['js'][] = $path . '/mymodule.js';
  }
}

Ersetzen Sie "mymodule" durch den Kurznamen Ihres Moduls. Ersetzen Sie "mymodule.js" und "mymodule.css" durch die tatsächlichen Namen der JavaScript- und CSS-Dateien.

system_init () enthält den folgenden Code, um Verwaltungsseiten bestimmte Dateien hinzuzufügen.

  $path = drupal_get_path('module', 'system');
  // Add the CSS for this module. These aren't in system.info, because they
  // need to be in the CSS_SYSTEM group rather than the CSS_DEFAULT group.
  drupal_add_css($path . '/system.base.css', array('group' => CSS_SYSTEM, 'every_page' => TRUE));

  // Add the system.admin.css file to the administrative pages.
  if (path_is_admin(current_path())) {
    drupal_add_css($path . '/system.admin.css', array('group' => CSS_SYSTEM));
  }

  drupal_add_css($path . '/system.menus.css', array('group' => CSS_SYSTEM, 'every_page' => TRUE));
  drupal_add_css($path . '/system.messages.css', array('group' => CSS_SYSTEM, 'every_page' => TRUE));
  drupal_add_css($path . '/system.theme.css', array('group' => CSS_SYSTEM, 'every_page' => TRUE));

path_is_admin () ist die Funktion, die in der Dokumentation beschrieben wird als:

Ermitteln Sie, ob sich ein Pfad im administrativen Bereich der Site befindet.

Bedenken Sie, dass einige knotenbezogene Pfade, wie z. B. node/<nid>/edit, in den Verwaltungsabschnitt aufgenommen werden können, abhängig von der Einstellung in admin / appear.

Die Liste der Knotenpfade , die in den Verwaltungsseiten enthalten sein könnten, wird von node_admin_paths () zurückgegeben .

  if (variable_get('node_admin_theme')) {
    $paths = array(
      'node/*/edit' => TRUE, 
      'node/*/delete' => TRUE, 
      'node/*/revisions' => TRUE, 
      'node/*/revisions/*/revert' => TRUE, 
      'node/*/revisions/*/delete' => TRUE, 
      'node/add' => TRUE, 
      'node/add/*' => TRUE,
    );
    return $paths;

Wenn Sie aus irgendeinem Grund eine Seite mit einem Pfad wie node / * vermeiden müssen, müssen Sie spezifischen Code hinzufügen, um diese zu vermeiden, wenn Sie verwenden path_is_admin(). Bedenken Sie, dass jedes Modul die Seiten ändern kann, die als Teil der Verwaltungsseiten betrachtet werden.

In beiden Fällen würde die Alternative eine Bibliothek verwenden, wenn das Modul hooks_library () mit einem Code ähnlich dem folgenden implementiert .

function mymodule_library() {
  $path = drupal_get_path('module', 'mymodule');

  $libraries['mymodule.library'] = array(
    'title' => 'MyModule Library', 
    'version' => '1.0', 
    'js' => array(
      $path . '/mymodule.js' => array(),
    ), 
    'css' => array(
      $path . '/mymodule.css' => array(
        'type' => 'file', 
        'media' => 'screen',
      ),
    ),
  );

  return $libraries;
}

In diesem Fall würde die vorherige Implementierung von hook_form_alter()wie folgt aussehen.

function mymodule_form_alter(&$form, &$form_state, $form_id) {
  if (arg(0) == 'admin') {
    $form['#attached']['library'][] = array('mymodule', 'mymodule.library');
  }
}

Anstatt und aufzurufen drupal_add_js(), drupal_add_css()sollte der Code aufrufen drupal_add_library('mymodule', 'mymodule.library').

Der Pro der Verwendung hook_library()ist:

• Abhängigkeiten zwischen Bibliotheken werden automatisch behandelt. Dies geschieht im Fall von system_library (), das zwei Bibliotheken mithilfe der folgenden Definitionen definiert.

    // Drupal's form library.
    $libraries['drupal.form'] = array(
      'title' => 'Drupal form library', 
      'version' => VERSION, 
      'js' => array(
        'misc/form.js' => array(
          'group' => JS_LIBRARY,
          'weight' => 1,
        ),
      ),
    );
  
    // Drupal's collapsible fieldset.
    $libraries['drupal.collapse'] = array(
      'title' => 'Drupal collapsible fieldset', 
      'version' => VERSION, 
      'js' => array(
        'misc/collapse.js' => array('group' => JS_DEFAULT),
      ), 
      'dependencies' => array(
        // collapse.js relies on drupalGetSummary in form.js
        array('system', 'drupal.form'),
      ),
    );

  Das Aufrufen von drupal_add_library('system', 'drupal.collapse')misc / collapse.js und misc / form.js würde beide enthalten sein.

• Die der Bibliothek zugeordneten CSS-Dateien werden automatisch zusammen mit den JavaScript-Dateien geladen.

• Wann immer die Bibliothek mehr JavaScript- oder CSS-Dateien verwenden würde, würde sich der Code zum Einschließen der Bibliothek nicht ändern. es würde immer noch verwenden $form['#attached']['library'][] = array('mymodule', 'mymodule.library');, oder drupal_add_library('mymodule', 'mymodule.library').

Es ist nicht erforderlich, current_path () zu verwenden, wenn Sie arg () verwenden können . Wenn der Pfad für die aktuelle Seite admin / structure / block lautet, dann

• arg(0) wird zurückkehren "admin"
• arg(1) wird zurückkehren "structure"
• arg(2) wird zurückkehren "block"

Aktualisieren

hook_init()wird nicht mehr von Drupal 8. Die Alternative für Drupal 8 wird verwendet , um hook_form_alter(), hook_page_attachments()oder hook_page_attachements_alter(). hook_page_build()und hook_page_alter()werden in Drupal 8 nicht mehr verwendet.
Was ich über die Verwendung einer JavaScript-Bibliothek gesagt habe, ist immer noch wahr, auch wenn empfohlen wird, #attachedeine Bibliothek (oder eine Javascript-Datei oder eine CSS-Datei) an eine Seite anzuhängen. Drupal 8 erlaubt nicht mehr nur das Anhängen von JavaScript- oder CSS-Dateien an eine Seite. Sie müssen immer eine Bibliothek anhängen, die eine Reihe von JavaScript- und CSS-Dateien enthält, die schließlich nur aus JavaScript- oder CSS-Dateien bestehen.

Hier sind zwei Ansätze zum Hinzufügen von JS / CSS zu Seiten.

Sie können JavaScript und CSS direkt zur Vorlagendatei page.tpl.php hinzufügen. Da die Vorlagendateien PHP-Dateien sind, können Sie die URL mit arg () überprüfen und entsprechend anzeigen .

Alternativ und besser , da unabhängige es ist das Thema, erstellen Sie ein Modul , dass Geräte hook_init () und Anruf drupal_add_js () oder drupal_add_css () basierend auf current_path () .

So etwas wie der folgende Code würde funktionieren.

// Runs on every page load.
function mymodule_init() {
  // Check if current path is under "admin"
  if (substr(current_path(), 0, 5) == 'admin') {
    drupal_add_css('path/to/my/css');
    drupal_add_js('path/to/my/js');
  }
}

Ich habe ein Modul mit den hier beschriebenen Schritten erstellt: http://purewebmedia.biz/article/2014/04/23/adding-your-own-css-admin-theme

Kopierte den Modultext wie auf dieser Seite beschrieben:

    function mymodule_preprocess_html(&$variables) {
// Add conditional stylesheets for admin pages on admin theme.
  if (arg(0)=="admin") {
    // reference your current admin theme  
    $theme_path = drupal_get_path('theme', 'commerce_kickstart_admin');
    // reference your own stylesheet    
    drupal_add_css(drupal_get_path('module', 'mymodule') . '/css/mymodule.css', array('weight' => CSS_THEME));
  }
}

Die Administratorprüfung war jedoch fehlerhaft, als ich (als eine der Sachen) die Submit-Schaltflächen auf allen Seiten sowie das Node-Edit-Formular formatieren wollte. Da dieser Pfad zu Node / Edit und nicht zu Admin führt, habe ich mich stundenlang am Kopf gekratzt.

Also habe ich mir diese Version ausgedacht, um mein einfaches Modul namens admin_css zu erstellen.

admin_css.info

name = admin_css
description = Custom css alterations for editor interface
core = 7.x
version = 7.x-1.01

admin_css.module

function admin_css_preprocess_html(&$variables) {
    if (path_is_admin) {
        $theme_path = drupal_get_path('theme', 'seven');
        drupal_add_css(drupal_get_path('module', 'admin_css') . '/css/admin_css.css', array('weight' => 0));
    }
}

Was sich von der Antwort hier unterscheidet, ist zu überprüfen, ob der Pfad im administrativen Teil der Site mit path_is_admin enthalten ist, anstatt arg zu verwenden . Die Verwendung von arg führte dazu, dass meine CSS-Datei nicht auf den Node-Edit- und anderen Seiten geladen wurde.

Es wird als schlechte Praxis angesehen, JS und CSS von hinzuzufügen hook_init(). Stattdessen verwenden Sie hook_page_build():

/**
 * Implements hook_page_build().
 */
function MYMODULE_page_build(&$page) {

  if (path_is_admin(current_path())) {

    drupal_add_js(drupal_get_path('module', 'MYMODULE') . '/scripts/magic.js');
  }
}

Ich habe gerade eine andere Methode verwendet, die Front-End-Entwickler ansprechen könnte. Subtheme dein bevorzugtes Admin Theme und füge dann ein einfaches hinzu:

scripts[] = myscripts.js

zu Ihrer theme.info-Datei, die das Javascript enthält, das Sie für Ihre Admin-Seiten benötigen. Wenn Sie möchten, können Sie weitere Überschreibungen hinzufügen, da dies die Ressourcen Ihres bevorzugten Admin-Themas erbt.