Yönetim sayfalarına JavaScript dosyaları ekleme

Bir modül kullanarak her yönetim sayfasına JavaScript / CSS dosyalarını nasıl ekleyebilirim?

Bir modül kullanarak iki yöntemi takip edebilirsiniz:

• Uygulama ) (hook_init
• Uygulama ) (hook_form_alter

İlk yöntem herhangi bir yönetim sayfasına fazladan JavaScript (veya CSS) dosyaları eklemenize izin verirken, ikinci yöntem bu dosyaları yalnızca form içeren sayfalara eklemenize izin verir.

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" yerine modülünüzün kısa adını yazın; "mymodule.js" ve "mymodule.css" ifadelerini JavaScript ve CSS dosyalarının gerçek adlarıyla değiştirin.

system_init () , yönetim sayfalarına belirli dosyalar eklemek için aşağıdaki kodu içerir.

  $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 () , belgelerinde şu şekilde tanımlanan işlevdir:

Sitenin yönetim bölümünde bir yol olup olmadığını belirleyin.

node/<nid>/editYönetici / görünümde bulunan ayara bağlı olarak , düğümle ilgili bazı yolların yönetim bölümüne dahil edilebileceğini düşünün .

Yönetim sayfalarına eklenebilecek düğüm yollarının listesi node_admin_paths () yönteminden döndürülür .

  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;

Herhangi bir nedenle, düğüm / * gibi bir yola sahip herhangi bir sayfadan kaçınmanız gerekiyorsa, bunlardan kaçınmak için belirli bir kod eklemeniz gerekir, path_is_admin() . Herhangi bir modülün, yönetim sayfalarının bir parçası olarak kabul edilen sayfaları değiştirebileceğini düşünün.

Her iki durumda da, modül , aşağıdakine benzer bir kodla hooks_library () uygularsa , bir kütüphane kullanmak olacaktır .

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

Bu durumda, önceki uygulaması hook_form_alter()aşağıdaki gibi olacaktır.

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

Aramak yerine drupal_add_js()ve drupal_add_css()kod çağırmalıdır drupal_add_library('mymodule', 'mymodule.library').

Kullanma yanlısı hook_library():

• Kütüphaneler arasındaki bağımlılıklar otomatik olarak ele alınır. Aşağıdaki tanımları kullanarak iki kütüphaneyi tanımlayan system_library () durumunda olan şey budur.

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

  Arayan drupal_add_library('system', 'drupal.collapse'), misc / collapse.js ve misc / form.js hem dahil edilecektir.

• Kütüphaneyle ilişkili CSS dosyaları otomatik olarak JavaScript dosyalarıyla birlikte yüklenir.

• Kitaplık ne zaman daha fazla JavaScript veya CSS dosyası kullanırsa, kitaplığı içeren kod değişmez; hala kullanıyor olabilir $form['#attached']['library'][] = array('mymodule', 'mymodule.library');, ya da drupal_add_library('mymodule', 'mymodule.library').

Kullanım gerek yoktur current_path () kullanabilirsiniz zaman arg () . Geçerli sayfanın yolu admin / structure / block ise,

• arg(0) geri dönücek "admin"
• arg(1) geri dönücek "structure"
• arg(2) geri dönücek "block"

Güncelleme

hook_init()kullanan Siteye 8. Drupal 8 alternatif gelen artık kullanılmaz hook_form_alter(), hook_page_attachments()ya da hook_page_attachements_alter(). hook_page_build()ve hook_page_alter()Drupal 8'de artık kullanılmıyor . Bir sayfaya bir kütüphane (veya bir Javascript dosyası veya bir CSS dosyası) eklemek
için kullanılması #attachedönerilse bile, bir JavaScript kitaplığı kullanma hakkında söylediğim şey hala doğrudur . Drupal 8 artık bir sayfaya yalnızca JavaScript veya CSS dosyaları eklemenize izin vermiyor; her zaman sonunda JavaScript veya CSS dosyalarından oluşan bir dizi JavaScript ve CSS dosyası içeren bir kitaplık eklemeniz gerekir.

Sayfalara JS / CSS eklemek için iki yaklaşım.

JavaScript ve CSS'yi doğrudan page.tpl.php şablon dosyasına ekleyebilirsiniz, şablon dosyaları PHP dosyaları olduğundan, arg () öğesini kullanarak URL'yi kontrol edebilirsiniz. ve buna göre sunabilirsiniz.

Alternatif olarak ve temadan bağımsız olduğu için daha iyi, hook_init () uygulayan bir modül oluşturun ve current_path () yöntemine göre drupal_add_js () veya drupal_add_css () yöntemini çağırın .

Aşağıdaki kod gibi bir şey işe yarayacaktır.

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

Burada açıklanan adımları kullanarak bir modül oluşturdum: http://purewebmedia.biz/article/2014/04/23/adding-your-own-css-admin-theme

Modül metnini bu sayfada açıklandığı gibi kopyaladı:

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

Ancak ben (şeylerden biri olarak) tüm sayfalardaki gönderme düğmelerini ve düğüm düzenleme formunu biçimlendirmek istediğimde yönetici denetimi başarısız oldu. Bu yol düğüme / düzenlemeye gittiğinden ve yönetici olmadığından, çek beni saatlerce kafamı çizdi.

Bu yüzden admin_css adlı basit modülümü yapmak için bu sürümü buldum.

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

Buradaki yanıttan farklı olan, yolun arg yerine sitenin yönetici bölümünde path_is_admin ile olup olmadığını kontrol etmektir . Arg kullanımı css dosyamın düğüm düzenleme ve diğer sayfalara yüklenmemesine neden oldu.

JS ve CSS eklemek kötü bir uygulama olarak kabul edilir hook_init(). Bunun yerine şunları kullanırsınız 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');
  }
}

Sadece ön uç geliştiricilere hitap edebilecek başka bir yöntem kullandım. Tercih ettiğiniz yönetici temasını alt edin ve ardından basit bir ekleyin:

scripts[] = myscripts.js

yönetici sayfalarınız için ihtiyacınız olan javascript'i içeren theme.info dosyasına ekleyin. İsterseniz, daha fazla geçersiz kılma ekleyebilirsiniz, çünkü bu favori yönetici temanızın kaynaklarını devralır.