هفت راه برای اضافه کردن فایل های JS و CSS سفارشی به یک صفحه در دروپال (بخش دوم)

در بخش اول از " هفت راه برای اضافه کردن فایل های جاوا اسکریپت و CSS به دروپال "، با مزایا و معایب سه روش اول
( ()drupal_add_css() , drupal_add_js / الحاق کردن در فایل info.  /استفاده از  ['attached#'] ) آشنا شدیم . دراین بخش چهار روش دیگر را مورد بررسی قرار می دهیم.

(همانند بخش قبلی ، می توانید جهت استفاده از کدهایی که در مثال ها آورده شده است، نام پوسته خود را جایگزین “rasta_theme” ،نام ماژول خور درا جایگزین “rasta_module” نام فایل CSS سفارشی را جایگزین “rasta-style” و نام فایل Js خود را با “rasta-scripts” تعویض نمایید )

drupal_add_library() -4

مزایای استفاده

  1- زمانی که نیاز دارید فایل CSS / JS را در صفحات مختلف استفاده کنید ، راه مناسبی می باشد.

  2- مسیر و نام فایل در داخل یک تابع (متمرکز) نگهداری می شود.

  3- می توانید کتابخانه ها را برای پروژه های دیگر استفاده کنید.

  4- برای الحاق چندین فایل راه آسانی می باشد.

  5- کتابخانه ها می توانند از کتابخانه های دیگر استفاده کنند.

معایب

  1- کمی بیشتر باید کد بنویسید.

  2- تمام فایل های داخل کتابخانه را الحاق می کند.

مثال:

ابتدا کتابخانه مربوط به ماژول یا پوسته دروپال را می سازیم:

(نکته: به جای " LIBRARY_NAME" نام کتابخانه ای را که تمایل دارید بسازید قراردهید)

function rasta_module_library() {

 $module_path = drupal_get_path('module', 'rasta_module');

 $items = array();

 $items['LIBRARY_NAME'] = array(

    'title' => t('LIBRARY NAME TITLE'),

    'version' => '1.0',

    'css' => array(

     $module_path . '/rasta_style.css' => array(),

    ),'js' => array(

     $module_path . '/rasta_scripts.js' => array(),

    ),

  );

return $items;

}

حال،کتابخانه را اضافه میکنیم:

drupal_add_library('rasta_module', 'LIBRARY_NAME');

 

- برای اینکه این با این روش بیشتر آشنا شوید یک مثال عملی را با هم انجام میدهیم:

کتابخانه jQuery UI درهسته دروپال7 قرارداده شده است.اما به طور پیش فرض در تمام صفحات الحاق نمی گردد.اگر شما نیاز به استفاده از آن را دارید(مثلا برای نمایش یک پیغام به کاربر) بدین صورت عمل نمایید:

<?php

drupal_add_library('system', 'ui.dialog');

drupal_add_js('jQuery(document).ready(function(){jQuery("#dialog").dialog({ modal: true });});', 'inline');

?>

<div id="dialog" title="استفاده از jQuery UI">

<p>زمانی که می خواهید کاربر قبل از مشاهده صفحه، پیغامی را مشاهده کند می توانید ازjQuery UI استفاده کنید</p>

</div>

نتیجه به صورت زیر خواهد بود:

استفاده از jQuery UI

 hook_css_alter(&$css), hook_js_alter(&$javascript) -5

این روش به شما اجازه می دهد تاقبل از بارگذاری یک صفحه،فایل  جاوا اسکریپت یا Style Sheets جدید را اضافه   کنید و یا JS / CSS هایی که قبلا ودر هر کجای دروپال اضافه شده است را حذف کنید و یا به سفارشی سازی مجدد آن ها بپردازید.

مزایای استفاده

  1- به شما اجازه می دهد تا توسط وزن (weight) ترتیب عناصر (فایل ها) را عوض نمایید.

  2- می توانید فایل هایی را که نیاز ندارید قبل از تجمیع (aggregation) پاک کنید.

  3- جایگزینی مسیر فایل به آسانی انجام می گیرد (برای مثال:‌ jQuery را از CDN بارگزاری نمایید).

معایب

  1- اضافه کردن فایل ها در این جا امکان پذیر می باشد اما راه بدی است

مثال:

اضافه کردن فایل CSS :

function rasta_theme_css_alter(&$css) {

           $browsers = array(

    'IE' => TRUE,

    '!IE' => TRUE,

 );

           $css['rasta-style.css']['type'] = 'file';

           $css['rasta-style.css']['preprocess'] = TRUE;

           $css['rasta-style.css']['data'] = drupal_get_path('theme', 'rasta_theme') . '/rasta-style.css';

           $css['rasta-style.css']['every_page'] = TRUE;

           $css['rasta-style.css']['group'] = CSS_THEME;

           $css['rasta-style.css']['media'] = 'all';

           $css['rasta-style.css']['browsers'] = $browsers;

    $css['rasta-style.css']['weight'] = '0';

    }

برای اینکه از اضافه شدن  فایل یا فایل های Style Sheets که قبلا به دروپال اضافه شده است جلوگیری کنیم به صورت زیر عمل باید نمود:

(درمثال زیر از اضافه شدن فایل CSS مربوط به ماژول USER که به صورت پیش فرض به سایت ما اضافه می شود جلوگیری میکنیم)

function rasta_theme_css_alter(&$css) {

 unset($css[drupal_get_path('module', 'user') . '/user.css']);

}

اضافه کردن فایل جاوا اسکریپت :

function rasta_theme_js_alter(&$javascript) {

    $javascript['misc/rasta-scripts.js']['data'] = drupal_get_path('theme', 'rasta_theme') . '/rasta-scripts.js';

    $javascript['misc/rasta-scripts.js']['scope'] = 'header';

    $javascript['misc/rasta-scripts.js']['group'] = 'JS_LIBRARY';

    $javascript['misc/rasta-scripts.js']['weight'] = '100';

    $javascript['misc/rasta-scripts.js']['every_page'] = TRUE;

    $javascript['misc/rasta-scripts.js']['type'] = 'file';

    $javascript['misc/rasta-scripts.js']['preprocess'] = 'TRUE';

    $javascript['misc/rasta-scripts.js']['cache'] = 'TRUE';

    $javascript['misc/rasta-scripts.js']['defer'] = 'TRUE';

}

برای اینکه از اضافه شدن  فایل یا فایل های JS که قبلا به دروپال اضافه شده است جلوگیر کنیم به صورت زیر عمل باید کرد:

(درمثال زیر از اضافه شدن فایل جاوا سکریپت مربوط به ماژول Overlay که به صورت پیش فرض به سایت ما اضافه می شودجلوگیری میکنیم)

function rasta_theme_js_alter(&$javascript) {

 unset($javascript[drupal_get_path('module', 'overlay') . 'overlay-parent.js']);

}

 

6- ()drupal_add_html_head

هرگاه بخواهیم به قسمت header سایت دروپالی خود کدی را اضافه کنیم(مثل meta تگ ها،فراخوانی فایل های JS / CSS و....)از این روش استفاده میکنیم.

مزایای استفاده

  1- به شما اجازه می دهد تا انواع مختلف scripts / styles را الحاق کنید

  2- می تواند برای موتورهای قالب js مورد استفاده قرار گیرد(موتورهای قالب JS برای تولید دستورات HTML از دستورات جاوااسکریپت مورد استفاده قرار می گیرند).  

معایب

  1- تجمیع (aggregation) انجام  نمی شود.

  2- پیدا کردن محل اضافه شدن کد دشوار می باشد.

  3- راه مناسبی نیست.

مثال:

برای اضافه کردن فایل CSS از کد زیر استفاده می کنیم:

<?php

$element = array(

 '#tag' => 'link',

 '#attributes' => array(

   'href' => (drupal_get_path('theme', 'rasta_theme').'/rasta-style.css'),

   'rel' => 'stylesheet',

   'type' => 'text/css',

 ),

);

drupal_add_html_head($element,'rasta-style');

?>

برای اضافه کردن جاوا اسکریپت :

<?php

$js_src=(drupal_get_path('theme', 'rasta_theme').'/rasta-scripts.js');

           $element = array(

     '#type' => 'markup',

     '#markup' => '<script language="javascript" type="text/javascript" src='.$js_src.'></script>',

    );

   drupal_add_html_head($element, 'rasta-scripts');

?>

 

7- الحاق مستقیم فایل های جاوا اسکریپت و Style Sheets به عنوان دستورات html در فایل(های) tpl.php.

هیچ گاه از این روش استفاده نکنید!!!!

***

  - هفت راه برای اضافه کردن فایل های JS و CSS سفارشی به یک صفحه در دروپال (بخش اول)

 

دیدگاه‌ها

تصویر محمدعلی اکبری

محمدعلی اکبری

لذت بردم، خیلی کامل بود دو قسمت مطلبتون.

تصویر مجید جعفری

مجید جعفری

چیزی نبود جزء درس پس دادن.
واقعا با این نظر کلی روحیه گرفتم،ممنون از لطفتون.

تصویر سعید

سعید (تایید نشده)

سلام بعد از نوشتن تابع(هوک) مربوط به کتابخانه این بخش کد رو کجا بذارم؟ از زحماتتون ممنونم
drupal_add_library('rasta_module', 'LIBRARY_NAME');

تصویر سعید

سعید (تایید نشده)

متاسفانه در رستا سافت به سوالات شما پاسخ داده نمیشود. بارها سوالات مختلفی پرسیدم دریغ از یک پاسخ نیم سطری!
جزو خصوصیات مسئولین سایت است. انشاءالله هیچ وقت دچار غرور کاذب نشویم.
من جای مسئولین سایت بودم باکس نظرات رو حذف میکردم و صرفا به ارائه محتوا بسنده میکردم. مطالب ارائه شده رو هم جز خودشان سایر کاربران فکر نکنم متوجه شوند.

تصویر محمدعلی اکبری

محمدعلی اکبری

با سلام و احترام؛

وجود باکس نظرات این امکان را فرآهم میکند تا شما دوست عزیز نیز امکان پاسخ دادن به سوالات دیگران را داشته باشید. ممکن است فردی که مطلب را نوشته است دیگر با ما همکاری نکند و دسترسی به ایشان وجود نداشته باشد از طرفی اینجا یک بنگاه حل مشکلات برنامه نویسی نیست (از این جهت که پاسخگویی به برخی سوالات تمرکز بالایی نیاز دارد) و صرفا مطالبی به اشتراک گذاشته می‌شود.

موفق باشید

تصویر سعید

سعید (تایید نشده)

با سلام و تشکر
از بابت تندی قلم از شما عذرخواهی میکنم.
هیچکس توقع پاسخگویی ندارد. اما بنظرم اگر این سوالات تایید نشود بهتر از این است تایید شده و بدون پاسخ بماند بنوعی توهین به نویسنده دیدگاه میباشد.
و لازم است پیشنهادی هم کرده باشم الانه حضور ندارم کدوم مطلب اما چندین بار شده مطلب بطور ناقص ارائه شده و یا زیاد گویا نبوده خیلی بهتر خواهد بود اگر مطالب ارسالی نویسندگان واضح و کامل بیان شده و یا حداقل در صورت امکان به سوالات کاربران پاسخ داده شود. نویسندگان می ایند و میروند اما شما همچنان هستید، هر چقدر مطالب ارائه شده کیفیت بهتری داشته باشد به نفع شما خواهد بود. و هر چقدر سست و ناقص، اعتبار سایت پایین خواهد آمد.
این را هم میدانم اگر این کار صورت پذیر لطف رستا سافت در حق کاربران است نه وظیفه.

تصویر محمدعلی اکبری

محمدعلی اکبری

در واقع مدتی هست بنده که مسئول این بلاگ هستم سربازم و خیلی تلاش میکنم فقط این بلاگ رو در زنده نگه دارم. حرف‌های شما کاملا متین هست و حتما چند وقت دیگه که از این وضعیت رها شدم اوضاع مطالب و کیفیتشون رو بهبود میدم. این بلاگ از نظر داخلی برای گروه ما اهمیت داره و ابزار کارمون هست. برای مخاطب خارجی و اعتبارش حتما انرژی بیشتری بعد از این وضعیتم خواهم گذاشت.

موفق باشید.

تصویر مجید جعفری

مجید جعفری

دوست عزيز سلام.همونجوري كه آقاي اكبري خدمتتون عرض كردن،چند وقتيه براي حضور در كنار تيم رستا كم سعادت شده ام،و اين كم كاري من رو اگر به پاي اعضاي شركت رستا بزاريم كم لطفي نسبت به اين گروه بزرگ هست.
توو خط چهارم همين بخش و خط پنجم بخش يك اين مطلب ، توضيح داده شده كه توي ماژول يا پوسته اي نوشته اين ،اما به علت اينكه جاهاي مختلف از اين روش استفاده ميشه،امكانش نبود به صراحت گفتش كجا استفاده كنين چون ممكن بود خود اين ذكر كردن باعث گمراهي افراد ديگه بشه،اما اينكه كجا استفاده بشه بسته به نياز شما داره،مثلا براي يك فرم ميتونين اينجوري استفاده كنين:

function MYMODULE_form_alter(&$form, &$form_state, $form_id) {
 ...
drupal_add_library('rasta_module', 'LIBRARY_NAME');
...
}

موفق باشين.

تصویر omid_bnt

omid_bnt (تایید نشده)

خب چرا نمیگید کدا رو کجا باید وارد کرد بجز بخش اول که اونم یه موردش که اشاره شده به فایل info بقیه شو نگفتید کجا باید وارد کنیم
فکر میکنم صرفا کپی برداشتید از جایی دیگه ممکنه کپی رایت رو هم رعایت کنید تا به منع اصلی وصل شیم اونجا جواب سوالات رو بگیریم

تصویر ناشناس

ناشناس (تایید نشده)

خداییش دمت گرم با این حرفی که زدی!!
دمت گـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــرم دادا !!

تصویر ناشناس

ناشناس (تایید نشده)

اینا فکر کنم فقط یه برنامه نویس براشون سایتو ساخته و ... و فقط کپی پیست کن مطالب سایت های دیگه هستن

افزودن نظر جدید