Dodaj pliki JavaScript do stron administracyjnych

Jak dodać pliki JavaScript / CSS na wszystkich stronach administracyjnych za pomocą modułu?

Korzystając z modułu, możesz zastosować dwie metody:

• Implementowanie hook_init ()
• Implementowanie hook_form_alter ()

Pierwsza metoda umożliwiłaby dodanie dodatkowych plików JavaScript (lub CSS) do dowolnych stron administracyjnych, natomiast druga metoda pozwoliłaby na dodanie tych plików tylko do stron zawierających formularze.

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

Zamień „mymodule” na krótką nazwę swojego modułu; zastąp „mymodule.js” i „mymodule.css” rzeczywistymi nazwami plików JavaScript i CSS.

system_init () zawiera następujący kod, aby dodać określone pliki do stron administracyjnych.

  $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 () to funkcja opisana w dokumentacji jako:

Określ, czy ścieżka znajduje się w sekcji administracyjnej witryny.

Weź pod uwagę, że niektóre ścieżki związane z węzłami, takie jak node/<nid>/edit, mogą być zawarte w sekcji administracyjnej, w zależności od ustawienia znalezionego na admin / wygląd.

Lista ścieżek do węzłów, które mogą być zawarte na stronach administracyjnych, jest zwracana z 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;

Jeśli z jakiegoś powodu musisz unikać stron ze ścieżką typu node / *, musisz dodać określony kod, aby ich uniknąć, jeśli używasz path_is_admin(). Weź pod uwagę, że dowolny moduł może zmienić strony uważane za część stron administracyjnych.

W obu przypadkach alternatywą byłoby użycie biblioteki, jeśli moduł implementuje hooks_library () z kodem podobnym do poniższego.

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

W takim przypadku poprzednie wdrożenie hook_form_alter()byłoby następujące.

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

Zamiast dzwonić drupal_add_js(), a drupal_add_css()kod powinien wywoływać drupal_add_library('mymodule', 'mymodule.library').

Zaletą użycia hook_library()jest:

• Zależności między bibliotekami są obsługiwane automatycznie. Tak dzieje się w przypadku system_library (), który definiuje dwie biblioteki przy użyciu następujących definicji.

    // 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')Zostanie uwzględnione wywołanie misc / collapse.js i misc / form.js.

• Pliki CSS powiązane z biblioteką byłyby automatycznie ładowane razem z plikami JavaScript.

• Ilekroć biblioteka używałaby więcej plików JavaScript lub CSS, kod dołączający bibliotekę nie zmieniłby się; nadal będzie używać $form['#attached']['library'][] = array('mymodule', 'mymodule.library');, lub drupal_add_library('mymodule', 'mymodule.library').

Nie ma potrzeby używania current_path (), gdy można użyć arg () . Jeśli ścieżka do bieżącej strony to admin / structure / block, to

• arg(0) wróci "admin"
• arg(1) wróci "structure"
• arg(2) wróci "block"

Aktualizacja

hook_init()nie są już używane z Drupal 8. alternatywne dla Drupal 8 stosuje hook_form_alter(), hook_page_attachments()lub hook_page_attachements_alter(). hook_page_build()i hook_page_alter()nie są już używane w Drupal 8.
To, co powiedziałem o korzystaniu z biblioteki JavaScript, jest nadal prawdą, nawet jeśli sugeruje #attachedsię dołączenie biblioteki (lub pliku Javascript lub pliku CSS) do strony. Drupal 8 nie pozwala już na dołączanie do strony tylko plików JavaScript lub CSS; musisz zawsze dołączyć bibliotekę, do której należy zestaw plików JavaScript i CSS, ostatecznie utworzonych z samych plików JavaScript lub CSS.

Oto dwa podejścia do dodawania JS / CSS do stron.

Możesz dodać JavaScript i CSS bezpośrednio do pliku szablonu page.tpl.php, ponieważ pliki szablonów to pliki PHP, możesz sprawdzić adres URL za pomocą arg () i odpowiednio go przedstawić.

Alternatywnie i lepiej, ponieważ jest niezależny od motywu, utwórz moduł, który implementuje hook_init () , i wywołaj drupal_add_js () lub drupal_add_css () w oparciu o current_path () .

Działa coś takiego jak poniższy kod.

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

Utworzyłem moduł, wykonując kroki opisane tutaj: http://purewebmedia.biz/article/2014/04/23/adding-your-own-css-admin-theme

Skopiowałem tekst modułu zgodnie z opisem na tej stronie:

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

Jednak sprawdzenie administratora było błędne, gdy (jako jedna z rzeczy) chciałem nadać styl przyciskom przesyłania na wszystkich stronach, a także formularzu edycji węzła. Ponieważ ta ścieżka prowadzi do węzła / edycji, a nie administratora, czek spowodował, że godzinami drapałem się po głowie.

Więc wymyśliłem tę wersję, aby mój prosty moduł o nazwie 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));
    }
}

Tym, co różni się od odpowiedzi tutaj, jest sprawdzenie, czy ścieżka znajduje się w części administracyjnej witryny za pomocą path_is_admin zamiast używania arg . Użycie arg spowodowało, że mój plik css nie ładował się na stronie edycji węzłów i innych stronach.

Dodanie JS i CSS jest uważane za złą praktykę hook_init(). Zamiast tego użyjesz 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');
  }
}

Właśnie użyłem innej metody, która może spodobać się programistom front-end. Podtemat preferowany motyw administratora, a następnie dodaj prosty:

scripts[] = myscripts.js

do pliku theme.info, który zawiera javascript potrzebny do stron administracyjnych. Jeśli chcesz, możesz dodać więcej przesłonięć, ponieważ odziedziczą one zasoby Twojego ulubionego motywu administratora.