CSS, JS ফাইল সংযুক্ত করা এবং কাস্টমাইজ করা

ড্রুপাল (Drupal) একটি অত্যন্ত নমনীয় কনটেন্ট ম্যানেজমেন্ট সিস্টেম (CMS), যা আপনার সাইটের ডিজাইন এবং ফাংশনালিটি কাস্টমাইজ করার জন্য CSS (Cascading Style Sheets) এবং JavaScript (JS) ফাইল যুক্ত এবং কাস্টমাইজ করার জন্য বিভিন্ন উপায় সরবরাহ করে। এই ফাইলগুলি সাইটের প্রদর্শন এবং ইন্টারঅ্যাকটিভিটি উন্নত করতে ব্যবহৃত হয়।

এই টিউটোরিয়ালে, আমরা CSS এবং JS ফাইল সংযুক্ত করা এবং কাস্টমাইজ করা নিয়ে আলোচনা করব।

১. ড্রুপালে CSS এবং JS ফাইল সংযুক্ত করা

ড্রুপালে CSS এবং JS ফাইল সংযুক্ত করার জন্য বিভিন্ন উপায় রয়েছে। এখানে থিম এবং মডিউল এর মাধ্যমে CSS ও JS ফাইল যুক্ত করার পদ্ধতি দেওয়া হলো।

১.১ থিমের মাধ্যমে CSS এবং JS ফাইল সংযুক্ত করা

ড্রুপালের থিমে CSS এবং JS ফাইল যুক্ত করার জন্য আপনি your_theme.info.yml ফাইলটি ব্যবহার করবেন।

উদাহরণ:

1. আপনার থিমের ডিরেক্টরিতে your_theme.info.yml ফাইলটি খোলুন।
2. CSS এবং JS ফাইল সংযুক্ত করতে নিচের কোডটি যুক্ত করুন:

name: 'My Custom Theme'
type: theme
base theme: classy
description: 'A custom theme for my website.'
regions:
  header: 'Header'
  footer: 'Footer'

libraries:
  - my_custom_theme/my_styles
  - my_custom_theme/my_scripts

stylesheets:
  theme:
    css/custom-style.css: {}
    
javascript:
  js/custom-script.js: {}

এখানে, stylesheets এবং javascript বিভাগে আপনি আপনার কাস্টম CSS এবং JS ফাইল যোগ করেছেন।

১.২ লাইব্রেরি ব্যবহার করে CSS এবং JS ফাইল সংযুক্ত করা

ড্রুপাল ৮ এবং তার পরবর্তী সংস্করণে, CSS এবং JS ফাইল যোগ করার জন্য লাউব্রেরি ব্যবহার করা হয়। লাইব্রেরি আপনাকে আপনার ফাইলগুলি বিভিন্ন পেজ এবং শর্ত অনুসারে লোড করার সুযোগ দেয়।

1. লাউব্রেরি ডিফাইন করা: প্রথমে আপনার থিমের your_theme.libraries.yml ফাইল তৈরি করুন বা সম্পাদনা করুন।

my_custom_theme/my_styles:
  css:
    theme:
      css/custom-style.css: {}

my_custom_theme/my_scripts:
  js:
    js/custom-script.js: {}
  dependencies:
    - core/jquery

2. লাইব্রেরি লোড করা: এখন আপনার থিমে এই লাইব্রেরি লোড করতে, your_theme.theme ফাইলে hook_theme_suggestions_alter() ফাংশন ব্যবহার করুন:

function your_theme_name_theme($existing, $type, $theme, $path) {
  $theme = \Drupal::theme()->getActiveTheme()->getName();

  // Add custom CSS and JS libraries to the theme
  if ($theme == 'your_theme_name') {
    $libraries = ['my_custom_theme/my_styles', 'my_custom_theme/my_scripts'];
    foreach ($libraries as $library) {
      drupal_add_library('theme', $library);
    }
  }
}

১.৩ মডিউল ব্যবহারের মাধ্যমে CSS এবং JS ফাইল সংযুক্ত করা

আপনি যদি ড্রুপাল মডিউল ব্যবহার করে CSS এবং JS ফাইল সংযুক্ত করতে চান, তাহলে hook_library() এবং hook_page_attachments() ব্যবহার করতে পারেন।

উদাহরণ:

1. মডিউল লাইব্রেরি ডিফাইন করা: আপনার মডিউলের your_module.libraries.yml ফাইল তৈরি করুন বা সম্পাদনা করুন।

my_module/my_styles:
  css:
    theme:
      css/custom-style.css: {}

my_module/my_scripts:
  js:
    js/custom-script.js: {}

2. লাইব্রেরি লোড করা: মডিউলের your_module.module ফাইলে hook_page_attachments() ব্যবহার করে CSS এবং JS ফাইল যুক্ত করুন।

function your_module_page_attachments(array &$attachments) {
  // Add CSS
  $attachments['#attached']['library'][] = 'my_module/my_styles';
  
  // Add JS
  $attachments['#attached']['library'][] = 'my_module/my_scripts';
}

২. CSS এবং JS ফাইল কাস্টমাইজ করা

২.১ CSS কাস্টমাইজেশন

ড্রুপালের থিমে CSS কাস্টমাইজ করতে, আপনি CSS ফাইলটি সম্পাদনা করতে পারেন যা আপনি আপনার থিমের css/ ডিরেক্টরিতে রেখেছেন। উদাহরণস্বরূপ:

• সাইটের বেস রং পরিবর্তন করা,
• ফন্ট সাইজ পরিবর্তন করা,
• ইমেজ বা লেআউট কাস্টমাইজ করা।

উদাহরণ:

/* Custom styles */
body {
  background-color: #f4f4f4;
}

h1 {
  font-size: 2em;
  color: #333;
}

২.২ JavaScript কাস্টমাইজেশন

আপনি যদি সাইটের ইন্টারঅ্যাকটিভিটি কাস্টমাইজ করতে চান, তাহলে JavaScript ফাইলটি কাস্টমাইজ করতে পারেন। যেমন:

• ডায়নামিক কন্টেন্ট লোড করা,
• স্লাইডার তৈরি করা,
• পপ-আপ উইন্ডো তৈরি করা।

উদাহরণ:

(function($) {
  $(document).ready(function() {
    // Change background color on click
    $('.button').click(function() {
      $('body').css('background-color', 'lightblue');
    });
  });
})(jQuery);

২.৩ CSS এবং JS কম্প্রেশন

ড্রুপাল সাইটের পারফরম্যান্স উন্নত করার জন্য, আপনি CSS এবং JS ফাইলগুলোকে কম্প্রেস এবং একত্রিত (aggregate) করতে পারেন। এর ফলে সাইটের লোডিং টাইম কমে যাবে।

1. Admin → Configuration → Development → Performance এ যান।
2. "Aggregate CSS files" এবং "Aggregate JavaScript files" অপশনগুলো সক্রিয় করুন।

উপসংহার

ড্রুপাল সাইটে CSS এবং JS ফাইল সংযুক্ত এবং কাস্টমাইজ করা খুবই সহজ এবং নমনীয়। আপনি থিম অথবা মডিউল ব্যবহার করে CSS ও JS ফাইল যুক্ত এবং কাস্টমাইজ করতে পারেন। সঠিকভাবে CSS এবং JS কাস্টমাইজ করার মাধ্যমে আপনি সাইটের ডিজাইন, ইন্টারঅ্যাকটিভিটি এবং পারফরম্যান্স উন্নত করতে পারবেন, যা সাইটের ব্যবহারকারীর অভিজ্ঞতা বাড়াবে।