web-gelistirme-sc.com

Yönetim sayfalarına JavaScript dosyaları ekleme

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

17
Onita

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

İ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 açıklanan işlevdir:

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

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

screenshot

Yönetim sayfalarına eklenebilecek düğüm yollarının listesi node_admin_paths () adresinden 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 yolu olan herhangi bir sayfadan kaçınmanız gerekiyorsa, path_is_admin() kullanıyorsanız, bunlardan kaçınmak için belirli bir kod eklemeniz gerekir. 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 hooks_library () kodunu aşağıdakine benzer bir kodla 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 hook_form_alter() uygulaması 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');
  }
}

Kod drupal_add_js() ve drupal_add_css() işlevlerini çağırmak yerine, drupal_add_library('mymodule', 'mymodule.library') işlevini çağırmalıdır.

hook_library() kullanmanın yanlısı:

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

    drupal_add_library('system', 'drupal.collapse'), misc/collapse.js ve misc/form.js çağrılarının her ikisi de dahil edilir.

  • 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 $form['#attached']['library'][] = array('mymodule', 'mymodule.library'); veya drupal_add_library('mymodule', 'mymodule.library') kullanıyor olabilir.

arg () kullanırken current_path () kullanmaya gerek yoktur. Geçerli sayfanın yolu admin/structure/block ise,

  • arg(0)"admin" döndürecek
  • arg(1)"structure" döndürecek
  • arg(2)"block" döndürecek

Güncelleme

hook_init() artık Drupal 8'den kullanılmıyor. Drupal 8 için alternatif hook_form_alter(), hook_page_attachments() veya hook_page_attachements_alter() . hook_page_build() ve hook_page_alter() artık Drupal 8 bölümünde kullanılmamaktadır.
Bir kitaplık (veya bir Javascript dosyası veya bir dosya eklemek için #attached kullanılması önerilse bile, bir JavaScript kitaplığı kullanma hakkında söylediğim şey hala doğru CSS dosyası) ekleyin. 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 kitaplık eklemeniz gerekir. CSS dosyaları.

25
kiamlaluno

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

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

Alternatif olarak ve temadan bağımsız olduğu için daha iyi, hook_init () uygulayan bir modül oluşturun ve drupal_add_js () veya drupal_add_css ()current_path () .

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');
  }
}
3
Jason Smith

hook_init() öğesinden JS ve CSS eklemek kötü bir uygulama olarak kabul edilir. Bunun yerine hook_page_build() kullanırsınız:

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

Sadece ön uç geliştiricilere hitap edebilecek başka bir yöntem kullandım. Subtheme tercih ettiğiniz yönetici teması 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.

1
Screenack

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 bana 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 sitenin yönetici bölümünde olup olmadığını arg yerine path_is_admin ile kontrol etmektir. Arg kullanımı css dosyamın düğüm düzenleme ve diğer sayfalara yüklenmemesine neden oldu.

1
Valross.nu