เพิ่มไฟล์ JavaScript ลงในหน้าการดูแลระบบ

ฉันจะเพิ่มไฟล์ JavaScript / CSS ในทุกหน้าการจัดการโดยใช้โมดูลได้อย่างไร

เมื่อใช้โมดูลคุณสามารถทำตามวิธีการสองวิธี:

• การใช้งานhook_init ()
• การใช้งานhook_form_alter ()

วิธีแรกจะอนุญาตให้คุณเพิ่มไฟล์ JavaScript (หรือ CSS) พิเศษลงในหน้าการดูแลระบบใด ๆ ในขณะที่วิธีที่สองจะช่วยให้คุณสามารถเพิ่มไฟล์เหล่านั้นไปยังหน้าเว็บที่มีฟอร์มเท่านั้น

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

แทนที่ "mymodule" ด้วยชื่อย่อของโมดูลของคุณ แทนที่ "mymodule.js" และ "mymodule.css" ด้วยชื่อจริงของไฟล์ JavaScript และ CSS

system_init ()มีรหัสต่อไปนี้เพื่อเพิ่มไฟล์เฉพาะไปยังหน้าการดูแลระบบ

  $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 ()เป็นฟังก์ชันที่อธิบายไว้ในเอกสารประกอบของ:

ตรวจสอบว่าเส้นทางอยู่ในส่วนการดูแลของไซต์

พิจารณาว่าพา ธ ที่เกี่ยวข้องกับโหนดบางอย่างเช่นnode/<nid>/editสามารถรวมอยู่ในส่วนการดูแลระบบขึ้นอยู่กับการตั้งค่าที่พบในผู้ดูแลระบบ / ลักษณะที่ปรากฏ

รายการเส้นทางโหนดที่สามารถนำมารวมอยู่ในหน้าการบริหารที่ถูกส่งกลับจาก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;

ถ้าด้วยเหตุผลใด ๆ คุณต้องหลีกเลี่ยงหน้าใด ๆ กับเส้นทางเช่นโหนด / * path_is_admin()คุณจะต้องเพิ่มรหัสที่เฉพาะเจาะจงเพื่อหลีกเลี่ยงการเหล่านั้นถ้าคุณกำลังใช้ พิจารณาว่าโมดูลใด ๆ สามารถเปลี่ยนหน้าซึ่งถือว่าเป็นส่วนหนึ่งของหน้าการดูแลระบบ

ในทั้งสองกรณีทางเลือกจะใช้ไลบรารีถ้าโมดูลใช้hooks_library ()ด้วยรหัสที่คล้ายกับรายการต่อไปนี้

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

ในกรณีนี้การนำไปปฏิบัติก่อนหน้าของhook_form_alter()จะกลายเป็นดังต่อไปนี้

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

แทนการโทรศัพท์drupal_add_js()และรหัสควรจะเรียก drupal_add_css()drupal_add_library('mymodule', 'mymodule.library')

ข้อดีของการใช้hook_library()คือ:

• การอ้างอิงระหว่างไลบรารีได้รับการจัดการโดยอัตโนมัติ นั่นคือสิ่งที่เกิดขึ้นในกรณีของ system_library () ซึ่งกำหนดสองไลบรารีโดยใช้คำจำกัดความต่อไปนี้

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

  การโทรdrupal_add_library('system', 'drupal.collapse')misc / ยุบ.jsและ misc / form.js จะถูกรวมไว้ด้วย

• ไฟล์ CSS ที่เกี่ยวข้องกับไลบรารีจะถูกโหลดโดยอัตโนมัติพร้อมกับไฟล์ JavaScript

• เมื่อใดก็ตามที่ห้องสมุดจะใช้ JavaScript หรือไฟล์ CSS เพิ่มเติมรหัสที่จะรวมไลบรารีจะไม่เปลี่ยนแปลง มันจะยังคงมีการใช้หรือ$form['#attached']['library'][] = array('mymodule', 'mymodule.library');drupal_add_library('mymodule', 'mymodule.library')

ไม่มีความจำเป็นที่จะใช้เป็นcurrent_path ()เมื่อคุณสามารถใช้หาเรื่อง () หากเส้นทางสำหรับหน้าปัจจุบันเป็นผู้ดูแลระบบ / โครงสร้าง / บล็อกแล้ว

• arg(0) จะกลับมา "admin"
• arg(1) จะกลับมา "structure"
• arg(2) จะกลับมา "block"

ปรับปรุง

hook_init()ไม่ได้ใช้อีกต่อไปจาก Drupal 8 ทางเลือกสำหรับ Drupal 8 ใช้hook_form_alter(), หรือhook_page_attachments() และ ไม่ได้ใช้ใน Drupal อีกต่อไป สิ่งที่ฉันพูดเกี่ยวกับการใช้ไลบรารี JavaScript ยังคงเป็นจริงแม้ว่าจะแนะนำให้ใช้เพื่อแนบไลบรารี (หรือไฟล์ Javascript หรือไฟล์ CSS) ไปยังหน้า Drupal 8 ไม่อนุญาตให้แนบไฟล์ JavaScript หรือ CSS กับหน้าอีกต่อไป คุณต้องแนบไลบรารีซึ่งเป็นชุดของไฟล์ JavaScript และ CSS ในที่สุดก็ทำจากไฟล์ JavaScript หรือ CSS เท่านั้นhook_page_attachements_alter()hook_page_build()hook_page_alter()
#attached

นี่คือสองวิธีในการเพิ่ม JS / CSS ไปยังหน้า

คุณสามารถเพิ่ม JavaScript และ CSS โดยตรงไปยังไฟล์เทมเพลต page.tpl.php เนื่องจากไฟล์เทมเพลตเป็นไฟล์ PHP คุณสามารถตรวจสอบ URL โดยใช้arg ()และแสดงตามนั้น

หรืออีกทางหนึ่งและดีกว่าเพราะมันอิสระธีมสร้างโมดูลที่ดำเนินhook_init ()และโทรdrupal_add_js ()หรือdrupal_add_css ()ขึ้นอยู่กับcurrent_path ()

บางอย่างเช่นรหัสต่อไปนี้ใช้งานได้

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

ฉันสร้างโมดูลโดยใช้ขั้นตอนที่อธิบายไว้ที่นี่: http://purewebmedia.biz/article/2014/04/23/adding-your-own-css-admin-theme

คัดลอกข้อความโมดูลตามที่ desribed ในหน้านั้น:

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

อย่างไรก็ตามการตรวจสอบของผู้ดูแลระบบนั้นเป็นความผิดพลาดเมื่อฉัน (เป็นหนึ่งในสิ่งต่าง ๆ ) ต้องการจัดสไตล์ปุ่มส่งในทุกหน้ารวมถึงแบบฟอร์มแก้ไขโหนด เนื่องจากเส้นทางนั้นไปที่โหนด / แก้ไขและไม่ใช่ผู้ดูแลระบบการตรวจสอบทำให้ฉันเกาหัวของฉันเป็นเวลาหลายชั่วโมง

ดังนั้นฉันมากับรุ่นนี้เพื่อทำให้โมดูลง่าย ๆ ของฉันชื่อ 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));
    }
}

สิ่งที่แตกต่างจากคำตอบที่นี่คือการตรวจสอบว่าเส้นทางอยู่ในส่วนการดูแลของไซต์ด้วยpath_is_adminแทนที่จะใช้argหรือไม่ การใช้หาเรื่องทำให้ไฟล์ css ของฉันไม่โหลดบนหน้าแก้ไขโหนดและหน้าอื่น ๆ

ก็ถือว่าการปฏิบัติที่ดีที่จะเพิ่ม JS และ CSS hook_init()จาก คุณจะใช้แทน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');
  }
}

ฉันเพิ่งใช้วิธีอื่นที่อาจดึงดูด devs front-end แบ่งชุดรูปแบบผู้ดูแลระบบที่คุณต้องการแล้วเพิ่มวิ:

scripts[] = myscripts.js

ไปที่ไฟล์ theme.info ของคุณที่มีจาวาสคริปต์ที่คุณต้องการสำหรับหน้าผู้ดูแลระบบของคุณ หากคุณต้องการคุณสามารถเพิ่มการแทนที่ได้มากขึ้นเนื่องจากจะเป็นการสืบทอดทรัพยากรของชุดรูปแบบผู้ดูแลระบบที่คุณชื่นชอบ