Thêm tệp JavaScript vào các trang quản trị

Làm cách nào để thêm tệp JavaScript / CSS trong mỗi trang quản trị, sử dụng mô-đun?

Sử dụng một mô-đun, bạn có thể làm theo hai phương pháp:

• Thực hiện hook_init ()
• Triển khai hook_form_alter ()

Phương thức đầu tiên sẽ cho phép bạn thêm các tệp JavaScript (hoặc CSS) bổ sung vào bất kỳ trang quản trị nào, trong khi phương thức thứ hai sẽ cho phép bạn chỉ thêm các tệp đó vào các trang có chứa biểu mẫu.

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

Thay thế "mymodule" bằng tên viết tắt của mô-đun của bạn; thay thế "mymodule.js" và "mymodule.css" bằng tên thật của các tệp JavaScript và CSS.

system_init () chứa mã sau đây, để thêm các tệp cụ thể vào các trang quản trị.

  $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 () là hàm trong tài liệu của nó được mô tả là:

Xác định xem một đường dẫn nằm trong phần hành chính của trang web.

Hãy xem xét rằng một số đường dẫn liên quan đến nút, chẳng hạn như node/<nid>/edit, có thể được bao gồm trong phần quản trị, tùy thuộc vào cài đặt được tìm thấy trên quản trị viên / ngoại hình.

Danh sách các đường dẫn nút có thể được bao gồm trong các trang quản trị được trả về từ 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;

Nếu, vì bất kỳ lý do nào, bạn cần tránh bất kỳ trang nào có đường dẫn như nút / *, bạn cần thêm mã cụ thể để tránh những trang đó, nếu bạn đang sử dụng path_is_admin(). Hãy xem xét rằng bất kỳ mô-đun nào cũng có thể thay đổi các trang được coi là một phần của trang quản trị.

Trong cả hai trường hợp, giải pháp thay thế sẽ là sử dụng thư viện, nếu mô-đun triển khai hook_l Library () với mã tương tự như sau.

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

Trong trường hợp này, việc thực hiện trước đây hook_form_alter()sẽ trở thành như sau.

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

Thay vì gọi drupal_add_js(), và drupal_add_css(), mã nên gọi drupal_add_library('mymodule', 'mymodule.library').

Các pro sử dụng hook_library()là:

• Sự phụ thuộc giữa các thư viện được tự động xử lý. Đó là những gì xảy ra trong trường hợp system_l Library (), định nghĩa hai thư viện sử dụng các định nghĩa sau.

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

  Gọi drupal_add_library('system', 'drupal.collapse'), misc / crash.js và misc / form.js đều được bao gồm.

• Các tệp CSS được liên kết với thư viện sẽ được tự động tải cùng các tệp JavaScript.

• Bất cứ khi nào thư viện sẽ sử dụng nhiều tệp JavaScript hoặc CSS hơn, mã để bao gồm thư viện sẽ không thay đổi; nó vẫn sẽ được sử dụng $form['#attached']['library'][] = array('mymodule', 'mymodule.library');, hoặc drupal_add_library('mymodule', 'mymodule.library').

Không cần sử dụng current_path () khi bạn có thể sử dụng arg () . Nếu đường dẫn cho trang hiện tại là admin / architecture / block, thì

• arg(0) sẽ trở lại "admin"
• arg(1) sẽ trở lại "structure"
• arg(2) sẽ trở lại "block"

Cập nhật

hook_init()không được sử dụng nữa từ Drupal 8. thay thế cho Drupal 8 đang sử dụng hook_form_alter(), hook_page_attachments()hoặc hook_page_attachements_alter(). hook_page_build()và hook_page_alter()không còn được sử dụng trong Drupal 8.
Những gì tôi đã nói về việc sử dụng thư viện JavaScript vẫn đúng, ngay cả khi được đề xuất sử dụng #attachedđể đính kèm thư viện (hoặc tệp Javascript hoặc tệp CSS) vào trang. Drupal 8 không cho phép chỉ đính kèm các tệp JavaScript hoặc CSS vào một trang; bạn cần luôn luôn đính kèm một thư viện, tập hợp các tệp JavaScript và CSS, cuối cùng chỉ được tạo từ các tệp JavaScript hoặc CSS.

Đây là hai cách tiếp cận để thêm JS / CSS vào các trang.

Bạn có thể thêm JavaScript và CSS trực tiếp vào tệp mẫu page.tpl.php, vì các tệp mẫu là các tệp PHP, bạn có thể kiểm tra URL bằng cách sử dụng arg () và trình bày tương ứng.

Ngoài ra, và tốt hơn vì chủ đề độc lập, hãy tạo một mô-đun triển khai hook_init () và gọi drupal_add_js () hoặc drupal_add_css () dựa trên current_path () .

Một cái gì đó giống như đoạn mã sau sẽ hoạt động.

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

Tôi đã tạo một mô-đun bằng các bước được mô tả ở đây: http://purewebmedia.biz/article/2014/04/23/adding-your-own-css-admin-theme

Sao chép văn bản mô-đun như được mô tả trên trang đó:

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

Tuy nhiên, kiểm tra quản trị viên đã bị lỗi khi tôi (là một trong những điều) muốn định kiểu các nút gửi trong tất cả các trang cũng như biểu mẫu chỉnh sửa nút. Vì đường dẫn đó đi đến nút / chỉnh sửa và không phải quản trị viên, việc kiểm tra khiến tôi phải vò đầu bứt tai hàng giờ.

Vì vậy, tôi đã đưa ra phiên bản này để tạo ra mô-đun đơn giản của mình được gọi là 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));
    }
}

Điều khác với câu trả lời ở đây là kiểm tra xem đường dẫn có nằm trong phần quản trị của trang web với path_is_admin thay vì sử dụng arg không . Việc sử dụng arg khiến tệp css của tôi không tải được trên nút chỉnh sửa và các trang khác.

Nó được coi là thực hành xấu để thêm JS và CSS từ hook_init(). Thay vào đó bạn sử dụng 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');
  }
}

Tôi chỉ sử dụng một phương pháp khác có thể thu hút các nhà phát triển front-end. Thay đổi chủ đề quản trị ưa thích của bạn và sau đó thêm một đơn giản:

scripts[] = myscripts.js

vào tệp theme.info có chứa javascript bạn cần cho các trang quản trị của bạn. Nếu bạn muốn, bạn có thể thêm nhiều phần ghi đè hơn, vì điều này sẽ kế thừa tài nguyên của chủ đề quản trị yêu thích của bạn.