it-swarm.asia

أضف ملفات JavaScript إلى الصفحات الإدارية

كيف أضيف ملفات JavaScript/CSS في كل صفحة إدارة باستخدام وحدة نمطية؟

17
Onita

باستخدام الوحدة النمطية ، يمكنك اتباع طريقتين:

ستسمح لك الطريقة الأولى بإضافة ملفات 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/المظهر.

screenshot

يتم إرجاع قائمة مسارات العقدة التي يمكن تضمينها في الصفحات الإدارية من 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.
ما قلته عن استخدام مكتبة جافا سكريبت لا يزال صحيحًا ، حتى إذا كان من المقترح استخدام #attached لإرفاق مكتبة (أو ملف جافا سكريبت ، أو CSS ملف) إلى صفحة. Drupal 8 لم يعد يسمح بعد الآن بإرفاق ملفات JavaScript أو CSS إلى الصفحة فقط ؛ فأنت بحاجة دائمًا إلى إرفاق مكتبة ، والتي تكون مجموعة من ملفات JavaScript و CSS ، مصنوعة في النهاية من JavaScript فقط أو ملفات CSS.

25
kiamlaluno

في ما يلي طريقتان لإضافة 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');
  }
}
3
Jason Smith

من الممارسات السيئة إضافة 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');
  }
}
1
leymannx

لقد استخدمت للتو طريقة أخرى قد تجذب المطورين الأماميين. Subtheme موضوع المشرف المفضل لديك ثم قم بإضافة بسيط:

scripts[] = myscripts.js

إلى ملف theme.info الخاص بك الذي يحتوي على جافا سكريبت التي تحتاجها لصفحات المشرف. إذا كنت ترغب ، يمكنك إضافة المزيد من التجاوزات ، لأن هذا سيرث موارد موضوع المشرف المفضل لديك.

1
Screenack

لقد أنشأت وحدة باستخدام الخطوات الموضحة هنا: 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 إلى عدم تحميل ملف css على تحرير العقدة وصفحات أخرى.

1
Valross.nu