it-swarm-id.com

Tambahkan file JavaScript ke halaman administrasi

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

17
Onita

Menggunakan modul, Anda dapat mengikuti dua metode:

Metode pertama akan memungkinkan Anda untuk menambahkan file JavaScript tambahan (atau CSS) ke halaman administrasi apa 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 administrasi.

  $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.

screenshot

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 spesifik 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 hook_form_alter() sebelumnya 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 memanggil 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'),
        ),
      );
    

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

  • 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 mengembalikan "admin"
  • arg(1) akan mengembalikan "structure"
  • arg(2) akan mengembalikan "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 penggunaan pustaka JavaScript masih benar, walaupun disarankan untuk menggunakan #attached untuk melampirkan pustaka (atau file Javascript, atau CSS file) ke halaman. Drupal 8 tidak memungkinkan lagi untuk hanya melampirkan file JavaScript atau CSS ke halaman; Anda harus selalu melampirkan perpustakaan, yang satu set file JavaScript dan CSS, akhirnya dibuat hanya JavaScript atau File CSS.

25
kiamlaluno

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

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

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');
  }
}
3
Jason Smith

Ini dianggap praktik buruk untuk menambahkan JS dan CSS dari hook_init(). Sebagai gantinya 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');
  }
}
1
leymannx

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.

1
Screenack

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 sebagaimana 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, cek membuat saya menggaruk kepala selama berjam-jam.

Jadi saya membuat versi ini untuk membuat modul sederhana bernama 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.

1
Valross.nu