ড্রুপাল (Drupal) একটি অত্যন্ত নমনীয় কনটেন্ট ম্যানেজমেন্ট সিস্টেম (CMS), যা ব্লক এবং রেসপন্সিভ ডিজাইন কনফিগারেশন ব্যবহারের মাধ্যমে সাইটের লেআউট এবং উপস্থাপনা কাস্টমাইজ করতে সহায়ক। ব্লক সিস্টেমটি ড্রুপালের একটি শক্তিশালী ফিচার, যা সাইটের বিভিন্ন অঞ্চলে কন্টেন্ট বা উইজেট প্রদর্শন করতে ব্যবহৃত হয়। একইভাবে, ড্রুপালে রেসপন্সিভ কনফিগারেশন ব্যবহারের মাধ্যমে আপনি আপনার সাইটকে মোবাইল এবং ডেস্কটপ ডিভাইসের জন্য উপযোগী করে তুলতে পারেন।
এই টিউটোরিয়ালে, আমরা ড্রুপালে Regions এ ব্লক যুক্ত করা এবং রেসপন্সিভ কনফিগারেশন করার প্রক্রিয়া বিস্তারিতভাবে আলোচনা করব।
Regions এ ব্লক যুক্ত করা
ড্রুপাল থিমে Regions (এলাকা) ব্যবহার করে আপনি বিভিন্ন অংশে ব্লকগুলিকে কাস্টমাইজ করতে পারেন। ড্রুপালের থিমগুলি সাধারণত একটি নির্দিষ্ট ডিরেক্টরি দ্বারা সন্নিবেশিত ব্লকগুলি প্রদান করে, এবং থিমের Regions দ্বারা আপনি ব্লকগুলিকে সাইটের বিভিন্ন অংশে প্রদর্শন করতে পারেন (যেমন, হেডার, ফুটার, সাইডবার ইত্যাদি)।
১. ব্লক সিস্টেম সম্পর্কে বোঝা
ব্লকগুলি হল উপাদান যেগুলি নির্দিষ্ট কনটেন্ট বা ফিচার প্রদর্শন করতে ব্যবহৃত হয়। এগুলি সাধারণত সাইটের হেডার, ফুটার, সাইডবার বা পৃষ্ঠার অন্যান্য অংশে যুক্ত করা হয়।
২. Regions সেটআপ করা
থিমের regions ডিফাইন করা থাকে যেখানে আপনি ব্লক প্রদর্শন করতে চান। Regions সাধারণত থিমের your_theme.info.yml ফাইলে নির্ধারিত থাকে।
এখানে একটি উদাহরণ দেয়া হলো:
regions:
header: 'Header'
primary_menu: 'Primary menu'
secondary_menu: 'Secondary menu'
page_top: 'Page top'
content: 'Content'
sidebar_first: 'First sidebar'
sidebar_second: 'Second sidebar'
footer: 'Footer'
এই ফাইলটি থিমে থাকা বিভিন্ন এলাকা নির্ধারণ করে, যেমন হেডার, ফুটার, সাইডবার ইত্যাদি।
৩. ব্লক যোগ করা
ব্লক যুক্ত করতে:
ড্রুপাল অ্যাডমিন প্যানেলে যান:
Admin Menu → Structure → Block layout- "Place block" বাটনে ক্লিক করুন।
- আপনি যেখানে ব্লকটি প্রদর্শন করতে চান, সেখানে সেগুলি নির্বাচন করুন (যেমন, সাইডবার, হেডার, ফুটার ইত্যাদি)।
- আপনি যে ব্লকটি প্রদর্শন করতে চান, সেটি নির্বাচন করুন (যেমন, "Menu", "Search form", "Custom block" ইত্যাদি)।
- ব্লকটি কনফিগার করে "Save block" করুন।
৪. ব্লক কনফিগারেশন
আপনি ব্লক কনফিগার করতে পারেন, যেমন:
- Visibility settings: ব্লকটি কোন পৃষ্ঠায় বা কন্টেন্টে প্রদর্শিত হবে তা নির্ধারণ করা।
- Access control: ব্লকটি কোন ইউজার রোল দেখতে পারবে সেটি নির্ধারণ করা।
রেসপন্সিভ কনফিগারেশন
ড্রুপালে রেসপন্সিভ ডিজাইন কনফিগারেশন নিশ্চিত করতে, আপনাকে কিছু CSS এবং থিম কনফিগারেশন পরিবর্তন করতে হবে যাতে সাইট মোবাইল এবং ডেস্কটপ ডিভাইসের জন্য উপযোগী হয়। সাধারণত, ড্রুপাল থিমগুলি রেসপন্সিভ কনফিগারেশনের জন্য আগে থেকেই প্রস্তুত থাকে, তবে আপনি চাইলে নিজেও কাস্টম রেসপন্সিভ ডিজাইন যোগ করতে পারেন।
১. থিমের রেসপন্সিভ কনফিগারেশন চেক করা
ড্রুপালের বেশিরভাগ আধুনিক থিম রেসপন্সিভ হয়, অর্থাৎ এটি মোবাইল, ট্যাবলেট এবং ডেস্কটপ ডিভাইসের জন্য উপযোগী। আপনি থিম কনফিগারেশনে গিয়ে এটি নিশ্চিত করতে পারেন।
- Appearance মেনুতে গিয়ে আপনার থিম নির্বাচন করুন।
- Theme settings তে গিয়ে থিমের রেসপন্সিভ সেটিংস চেক করুন।
২. CSS মিডিয়া কুয়েরি ব্যবহার
যদি আপনি কাস্টম রেসপন্সিভ ডিজাইন যোগ করতে চান, তবে আপনাকে CSS মিডিয়া কুয়েরি ব্যবহার করতে হবে। এটি একটি CSS ফিচার যা বিভিন্ন স্ক্রীনের আকার অনুযায়ী স্টাইল প্রয়োগ করতে সাহায্য করে।
উদাহরণস্বরূপ:
/* মোবাইল ডিভাইসের জন্য */
@media (max-width: 767px) {
.main-content {
width: 100%;
padding: 10px;
}
}
/* ট্যাবলেট ডিভাইসের জন্য */
@media (min-width: 768px) and (max-width: 1024px) {
.main-content {
width: 75%;
padding: 20px;
}
}
/* ডেস্কটপ ডিভাইসের জন্য */
@media (min-width: 1025px) {
.main-content {
width: 50%;
padding: 30px;
}
}
৩. Bootstrap ফ্রেমওয়ার্ক ব্যবহার
ড্রুপালের Bootstrap থিম ফ্রেমওয়ার্ক ব্যবহার করে আপনি দ্রুত রেসপন্সিভ ডিজাইন তৈরি করতে পারেন। Bootstrap হল একটি জনপ্রিয় ফ্রন্টএন্ড ফ্রেমওয়ার্ক যা বিভিন্ন রেসপন্সিভ লেআউট এবং কম্পোনেন্ট সরবরাহ করে।
- Bootstrap থিম ইনস্টল করুন: Bootstrap for Drupal মডিউল ডাউনলোড করুন।
- থিম কনফিগার করুন: থিমের ফাইলের মধ্যে Bootstrap এর রেসপন্সিভ ক্লাস যোগ করুন।
উপসংহার
ড্রুপালে Regions এ ব্লক যুক্ত করা এবং রেসপন্সিভ কনফিগারেশন সাইটের ডিজাইন এবং ইউজার এক্সপেরিয়েন্স উন্নত করার জন্য গুরুত্বপূর্ণ। ব্লক সিস্টেমের মাধ্যমে আপনি সাইটের বিভিন্ন অংশে কন্টেন্ট বা ফিচার প্রদর্শন করতে পারবেন এবং রেসপন্সিভ কনফিগারেশন ব্যবহারের মাধ্যমে সাইটকে মোবাইল এবং ডেস্কটপ ডিভাইসে কার্যকরী এবং উপযোগী করে তুলতে পারবেন।
Read more
