اضافه کردن فایل های JS و CSS سفارشی به یک صفحه در دروپال

افزودن کد جاوا اسکریپت و CSS سفارشی به یک صفحه در دروپال آسان می باشد، اما انتخاب روش مناسب برای این کار می تواند کمی گمراه کننده باشد.
برای مدیریت فایل های CSS / JS در داخل پوسته(Theme) یا ماژول دروپال هفت روش وجود دارد، در این بخش نگاهی به مزایا  و معایب 3روش اول می اندازیم.

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

 drupal_add_css(), drupal_add_js()-1

این روش ، رایج ترین روش مورد استفاده اغلب توسعه دهندگان می باشد.

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

  1- سهولت در استفاده، می توان در هر جایی از آن استفاده کزد.

  2- می تواند CSS / JS را به صورت inline قرار دهد.

  3- مستندات آن به راحتی قابل دسترس است.

  4- فایل های اضافه شده کش می شود.

  5- از شرایط ها پشتیبانی می کند(نوع مرورگر ، media و...).

معایب

  1- در همه جای کد یافت می شود.

  2- الحاق چند فایل باعث شلوغی (کثیف شدن) کد می شود.

  3- اگر نام فایل جاوا اسکریپت و یا Style Sheets شما تغییر کند، باید در همه جای کد آن راتغییر دهید.

: مثال

 - اضافه کردن فایل CSS به پوسته یا ماژول دروپال :

function rasta_theme_preprocess_html(&$variables) {
 drupal_add_css(drupal_get_path('theme', 'rasta_theme') . '/rasta-style.css', array('group' => CSS_THEME, 'type' => 'file'));
}

برای اضافه کردن CSS به صورت inline (برای مثال، تغییر رنگ پس زمینه در body) هم به صورت زیر باید عمل کرد :

drupal_add_css('body {background: #000;}', array('group' => CSS_THEME, 'type' => 'inline'));

اگر فایل Style Sheets مورد نظر در سایت دیگری می باشد ،کد شما به این صورت تغییر میکند :

drupal_add_css('http://example.com/style.css', array('type' => 'external'));

 - برای اضافه کردن  فایل Java Script به روش ذیل عمل کنید:

function rasta_theme_preprocess_html(&$variables) {
  function rasta_theme_preprocess_page(&$variables) {
    drupal_add_js(drupal_get_path('theme', 'rasta_theme') .'/rasta-scripts.js', 'file');
  }
}

در مواقعی که میخواهید JS خود را به صورت inline به پوسته یا ماژول دروپال اضافه کنید(برای مثال نمایش پیغام "!Hello" بعد از بار گذاری کامل صفحه)، از کد زیر استفاده فرمایید :

drupal_add_js('jQuery(document).ready(function () { alert(“Hello!”); });', 'inline');

همچنین می توانید برای مشخص نمودن ناحیه ای که تمایل دارید فایل جاوا اسکریپت اضافه شود (Footer یا Header) از کد زیر استفاده کنید :

drupal_add_js('jQuery(document).ready(function () { alert(“Hello!”); });',
    array('type' => 'inline', 'scope' => 'footer', 'weight' => 5));

اگر فایل JS مورد نظر شما در سایت دیگری می باشد ،کد شما به این صورت تغییر میکند :

drupal_add_js('http://example.com/example.js', 'external');

 

2- الحاق کردن در فایل info.

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

  1- به سرعت متوجه می شوید که چه فایل هایی در پوسته / ماژول  دروپال استفاده شده است

  2- اجازه می دهد تا تجمیع (aggregation) بهتر انجام شود.

  3- فایل ها در تمامی صفحات بدون اینکه نیازی به استفاده از توابع  preprocess(ها) باشد اضافه می شوند.

  4- روش استاندارد در پوسته ها می باشد.

معایب

  1- CSS / JS بلا استفاده ،در صفحاتی که شما  به آن ها احتیاجی ندارید هم اضافه می شود.

  2- وقتی فایل ها الحاق می شوند تقریبا کنترلی بر روی ترتیب اضافه شدن آن ها نسبت به دیگر فایل ها ندارید.

  3- در info. ترتیب فایل ها را   نمی توانید با استفاده از وزن (weight) تغییر دهید.

مثال :

(کدهای زیر را در داخل فایل info. پوسته یا ماژول دروپال قرار دهید)

 - اضافه کردن فایل Style Sheets :

stylesheets[all][] = css/rasta-style.css

 - اضافه کردن فایل JS :

scripts[] = js/rasta-scripts.js

 

3- استفاده از  ['attached#']

این روش به شما اجازه می دهد که جاوا اسکریپت یا Style Sheets سفارشی خود را زمانی که یک فرم ساخته شده است،بار گذاری کنید.

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

  1- برای اینکه مطمئن شوید فایل های شما همیشه الحاق می شوند  بهترین روش است.

  2- با فایل های جاوا اسکریپت و CSS به خوبی کار می کند.

  3- می تواند از هر نوع دیتای attach شده استفاده کند.

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

  5- بهترین انتخاب برای فرم ها می باشد.

معایب

  1- اضافه کردن چندین فایل مستلزم استفاده از چندین attach می باشد.

  2- وابسته به مسیر و نام فایل می باشد

مثال:

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

$form['#attached']['css'] = array(
  drupal_get_path('module', 'rasta_module') . '/rasta-style.css',
);

 - اضافه کردن فایل JS :

$form['#attached']['js'] = array(
  drupal_get_path('module', 'rasta_module') . '/rasta-scripts.js',
);

دیدگاه‌ها

تصویر alinaeimi

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

این سه روش اول رو کجا باید بنویسیم کدایی که نوشتین براش رو...

یکم توضیحتون رو کامل تر میدادید خیلی بهتر می شد...
مرسی

تصویر omid_bnt

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

سلام
بجز فایل info بقیه رو نگفتید کجا باید وارد کرد ممکنه بگید

تصویر مهربان

مهربان (تایید نشده)

مهربان بابا حالتون خوبه؟؟
اینایی که فرمودین که همش ترجمه بود از خودتون چیزی ندارین به این فقیر فقرای دروپالی بدین ببرن؟؟
گنگترین مطلبی که برا آموزش میشه پیدا کرد این بودن
بابای مهربان یه توضیحی یه راهنمایی میکردین چی به چیه
با تشکر

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