Tambahkan file JavaScript ke halaman administrasi

Bagaimana cara menambahkan file JavaScript / CSS di setiap halaman administrasi, menggunakan modul?

Menggunakan modul, Anda dapat mengikuti dua metode:

• Menerapkan hook_init ()
• Menerapkan hook_form_alter ()

Metode pertama akan memungkinkan Anda untuk menambahkan file JavaScript tambahan (atau CSS) ke halaman administrasi mana pun, sedangkan metode kedua akan memungkinkan Anda untuk menambahkan file-file itu hanya ke halaman yang berisi formulir.

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

Ganti "mymodule" dengan nama pendek modul Anda; ganti "mymodule.js" dan "mymodule.css" dengan nama sebenarnya dari file JavaScript dan CSS.

system_init () berisi kode berikut, untuk menambahkan file tertentu ke halaman administratif.

  $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 () adalah fungsi yang dalam dokumentasinya digambarkan sebagai:

Tentukan apakah jalur ada di bagian administratif situs.

Pertimbangkan bahwa beberapa jalur yang berhubungan dengan simpul, seperti node/<nid>/edit, dapat dimasukkan dalam bagian administrasi, tergantung pada pengaturan yang ditemukan pada admin / penampilan.

Daftar jalur simpul yang dapat dimasukkan dalam halaman administrasi dikembalikan dari node_admin_paths () .

  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;

Jika, karena alasan apa pun, Anda perlu menghindari halaman apa pun dengan path seperti node / *, Anda perlu menambahkan kode tertentu untuk menghindarinya, jika Anda menggunakan path_is_admin() . Pertimbangkan bahwa modul apa pun dapat mengubah halaman yang dianggap sebagai bagian dari halaman administrasi.

Dalam kedua kasus tersebut, alternatifnya akan menggunakan perpustakaan, jika modul mengimplementasikan hooks_library () dengan kode yang mirip dengan yang berikut.

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

Dalam hal ini, implementasi sebelumnya hook_form_alter()akan menjadi sebagai berikut.

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

Alih-alih menelepon drupal_add_js(), dan drupal_add_css(), kode harus memanggil drupal_add_library('mymodule', 'mymodule.library').

Pro menggunakan hook_library()adalah:

• Ketergantungan antar perpustakaan ditangani secara otomatis. Itulah yang terjadi dalam kasus system_library (), yang mendefinisikan dua perpustakaan menggunakan definisi berikut.

    // 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'),
      ),
    );

  Panggilan drupal_add_library('system', 'drupal.collapse') , misc / collapse.js dan misc / form.js keduanya akan dimasukkan.

• File CSS yang terkait dengan pustaka akan secara otomatis dimuat bersama file JavaScript.

• Kapan pun pustaka akan menggunakan lebih banyak file JavaScript, atau CSS, kode untuk memasukkan pustaka tidak akan berubah; masih akan menggunakan $form['#attached']['library'][] = array('mymodule', 'mymodule.library');, atau drupal_add_library('mymodule', 'mymodule.library').

Tidak perlu menggunakan current_path () saat Anda dapat menggunakan arg () . Jika jalur untuk halaman saat ini adalah admin / struktur / blok, maka

• arg(0) akan kembali "admin"
• arg(1) akan kembali "structure"
• arg(2) akan kembali "block"

Memperbarui

hook_init()tidak digunakan lagi dari Drupal 8. alternatif untuk Drupal 8 menggunakan hook_form_alter(), hook_page_attachments()atau hook_page_attachements_alter(). hook_page_build()dan hook_page_alter()tidak lagi digunakan dalam Drupal 8.
Apa yang saya katakan tentang menggunakan pustaka JavaScript masih benar, bahkan jika disarankan untuk digunakan #attacheduntuk melampirkan pustaka (atau file Javascript, atau file CSS) ke halaman. Drupal 8 tidak lagi memungkinkan untuk melampirkan file JavaScript atau CSS ke halaman; Anda harus selalu melampirkan pustaka, yang satu set file JavaScript dan CSS, akhirnya dibuat hanya file JavaScript atau CSS.

Berikut adalah dua pendekatan untuk menambahkan JS / CSS ke halaman.

Anda dapat menambahkan JavaScript dan CSS langsung ke file templat page.tpl.php, karena file templat adalah file PHP, Anda dapat memeriksa URL menggunakan arg () dan menampilkannya.

Atau, dan lebih baik karena temanya independen, buat modul yang mengimplementasikan hook_init () , dan panggil drupal_add_js () atau drupal_add_css () berdasarkan current_path () .

Sesuatu seperti kode berikut akan berfungsi.

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

Saya membuat modul menggunakan langkah-langkah yang dijelaskan di sini: http://purewebmedia.biz/article/2014/04/23/adding-your-own-css-admin-theme

Menyalin teks modul seperti yang dijelaskan pada halaman itu:

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

Namun cek admin rusak ketika saya (sebagai salah satu hal) ingin gaya tombol kirim di semua halaman serta bentuk edit simpul. Karena jalur itu menuju node / edit dan bukan admin, pemeriksaan membuat saya menggaruk kepala selama berjam-jam.

Jadi saya datang dengan versi ini untuk membuat modul sederhana saya yang disebut admin_css.

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

Apa yang berbeda dari jawaban di sini adalah untuk memeriksa apakah path berada di bagian administratif situs dengan path_is_admin daripada menggunakan arg . Menggunakan arg menyebabkan file css saya tidak dimuat pada node-edit dan halaman lainnya.

Ini dianggap praktik buruk untuk menambahkan JS dan CSS dari hook_init(). Alih-alih Anda akan menggunakan 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');
  }
}

Saya hanya menggunakan metode lain yang mungkin menarik bagi para dev front-end. Subtema tema admin pilihan Anda dan kemudian tambahkan yang sederhana:

scripts[] = myscripts.js

ke file theme.info Anda yang berisi javascript yang Anda butuhkan untuk halaman admin Anda. Jika mau, Anda dapat menambahkan lebih banyak penggantian, karena ini akan mewarisi sumber daya tema admin favorit Anda.