Добавить файлы 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, могут быть включены в административный раздел, в зависимости от параметра, найденного в admin / Внешний вид.

Список путей узлов, которые могут быть включены в административные страницы, возвращается из 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 / collapse.js и misc / form.js будут включены.

• Файлы CSS, связанные с библиотекой, будут автоматически загружаться вместе с файлами JavaScript.

• Всякий раз, когда библиотека будет использовать больше файлов JavaScript или CSS, код для включения библиотеки не изменится; это все еще будет использовать $form['#attached']['library'][] = array('mymodule', 'mymodule.library');, или drupal_add_library('mymodule', 'mymodule.library').

Нет необходимости использовать current_path (), когда вы можете использовать arg () . Если путь для текущей страницы - admin / structure / block, то

• arg(0) вернется "admin"
• arg(1) вернется "structure"
• arg(2) вернется "block"

Обновить

hook_init()не используется больше от Drupal 8. Альтернатива для Drupal 8 использует hook_form_alter(), hook_page_attachments()или hook_page_attachements_alter(). hook_page_build()и hook_page_alter()больше не используются в Drupal 8.
То, что я сказал об использовании библиотеки JavaScript, все еще верно, даже если ее предлагается использовать #attachedдля присоединения библиотеки (или файла Javascript, или файла CSS) к странице. Drupal 8 больше не позволяет прикреплять к странице только файлы JavaScript или CSS; вам нужно всегда прикреплять библиотеку, которая представляет собой набор файлов JavaScript и CSS, в конечном итоге сделанных из файлов JavaScript или CSS.

Вот два подхода к добавлению 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

Скопировал текст модуля, как описано на этой странице:

    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 . Использование arg привело к тому, что мой css-файл не загружался на узле edit и других страницах.

Добавление 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');
  }
}

Я просто использовал другой метод, который может понравиться разработчикам внешнего интерфейса. Подтемите предпочитаемую тему администратора, а затем добавьте простую:

scripts[] = myscripts.js

в ваш файл theme.info, содержащий необходимый вам javascript для ваших страниц администратора. Если вы хотите, вы можете добавить больше переопределений, так как это унаследует ресурсы вашей любимой темы администратора.