ড্রুপাল (Drupal) একটি অত্যন্ত নমনীয় কনটেন্ট ম্যানেজমেন্ট সিস্টেম (CMS), যা কাস্টম থিম তৈরি এবং কাস্টমাইজ করার জন্য শক্তিশালী ফিচার সরবরাহ করে। কাস্টম থিম ডেভেলপমেন্টের মাধ্যমে আপনি ড্রুপাল সাইটের ডিজাইন এবং ইউজার ইন্টারফেস সম্পূর্ণভাবে কাস্টমাইজ করতে পারেন। এটি আপনার সাইটকে একটি ইউনিক লুক এবং ফিল দিতে সহায়তা করে, যা আপনার ব্র্যান্ড বা পণ্যের সাথে মানানসই।
এই গাইডে, আমরা ড্রুপালে কাস্টম থিম তৈরি করার প্রক্রিয়া এবং কাস্টম থিম ডেভেলপমেন্টের জন্য প্রয়োজনীয় ধাপগুলো নিয়ে আলোচনা করব।
১. ড্রুপালে কাস্টম থিমের জন্য প্রস্তুতি
ড্রুপালে কাস্টম থিম তৈরি করার জন্য কিছু গুরুত্বপূর্ণ প্রস্তুতি প্রয়োজন।
থিমের জন্য ফোল্ডার স্ট্রাকচার তৈরি
- themes/custom ডিরেক্টরিতে একটি নতুন ফোল্ডার তৈরি করুন। উদাহরণস্বরূপ,
my_custom_theme। - এই ফোল্ডারের মধ্যে কয়েকটি ফাইল তৈরি করতে হবে:
- my_custom_theme.info.yml — থিমের তথ্য সংরক্ষণ করে।
- my_custom_theme.theme — থিমের ফাংশনালিটি এবং কাস্টম ফাংশন পরিচালনা করে।
- templates/ — থিমের টেমপ্লেট ফাইলের জন্য।
- css/ — কাস্টম CSS ফাইল সংরক্ষণ করার জন্য।
- js/ — JavaScript ফাইল সংরক্ষণ করার জন্য।
- images/ — থিমের ছবি বা ইমেজ সংরক্ষণের জন্য।
২. my_custom_theme.info.yml ফাইল তৈরি করা
info.yml ফাইল হল থিমের মেটা তথ্য এবং কনফিগারেশন যা ড্রুপাল সিস্টেমকে জানায় আপনার থিম সম্পর্কে। এই ফাইলটি থিমের ডিরেক্টরির মূল ফোল্ডারে তৈরি করতে হবে।
name: 'My Custom Theme'
type: theme
description: 'A custom theme for my Drupal site.'
core_version_requirement: ^8 || ^9
package: Custom
base theme: stable
libraries:
- my_custom_theme/global-styling
regions:
header: 'Header'
primary_menu: 'Primary menu'
footer: 'Footer'
- name: থিমের নাম।
- description: থিমের বর্ণনা।
- core_version_requirement: ড্রুপাল ৮ বা ৯ সংস্করণে থিমটি কাজ করবে।
- base theme:
stableবা অন্য একটি থিমের ওপর ভিত্তি করে তৈরি হতে পারে। - regions: থিমের বিভিন্ন জায়গা যেমন হেডার, ফুটার, মেনু ইত্যাদি।
৩. CSS, JS এবং থিমের কাস্টম ফাইল যুক্ত করা
আপনি থিমের জন্য কাস্টম CSS এবং JavaScript ফাইল যুক্ত করতে পারেন। এটি করার জন্য my_custom_theme.libraries.yml ফাইল তৈরি করুন এবং নীচের মতো কোড যোগ করুন:
global-styling:
version: 1.0
css:
theme:
css/style.css: {}
js:
js/custom.js: {}
- global-styling: এই লাইনটি নির্দিষ্ট করে যে এটি থিমের গ্লোবাল স্টাইলশিট এবং স্ক্রিপ্ট।
- css/style.css: কাস্টম CSS ফাইল যুক্ত করতে।
- js/custom.js: কাস্টম JavaScript ফাইল যুক্ত করতে।
এই ফাইলগুলো আপনার থিমের css/ এবং js/ ফোল্ডারে থাকতে হবে।
৪. টেমপ্লেট ফাইল তৈরি করা
ড্রুপালে থিমের টেমপ্লেট ফাইলগুলি HTML টেমপ্লেট যা ওয়েবসাইটের কাঠামো তৈরি করে। এই ফাইলগুলো templates/ ফোল্ডারে রাখা হয়। কিছু সাধারণ টেমপ্লেট ফাইল উদাহরণ:
- page.html.twig: পেজের কাঠামো ও কন্টেন্ট প্রদর্শন করে।
- block.html.twig: ব্লকগুলির ডিজাইন ও কন্টেন্ট প্রদর্শন করে।
- node.html.twig: কন্টেন্ট নোডের ডিজাইন।
<!-- page.html.twig -->
<html>
<head>
<title>{{ head_title }}</title>
</head>
<body>
<div class="header">
{{ page.header }}
</div>
<div class="content">
{{ page.content }}
</div>
<div class="footer">
{{ page.footer }}
</div>
</body>
</html>
এই টেমপ্লেট ফাইলগুলো ড্রুপাল সাইটের বিভিন্ন অংশের লেআউট এবং ডিজাইন নির্ধারণ করে। {{ page.header }}, {{ page.content }} ইত্যাদি ফিল্ডগুলি ড্রুপাল দ্বারা স্বয়ংক্রিয়ভাবে পূর্ণ করা হয়।
৫. থিমের ফাংশনালিটি (my_custom_theme.theme)
থিমে কাস্টম ফাংশনালিটি যোগ করার জন্য my_custom_theme.theme ফাইল ব্যবহার করা হয়। এটি PHP কোড ধারণ করে, যা থিমের জন্য অতিরিক্ত ফাংশনালিটি নির্ধারণ করে।
/**
* Implements hook_theme().
*/
function my_custom_theme_theme() {
return array(
'my_custom_block' => array(
'render element' => 'content',
'template' => 'my-custom-block',
),
);
}
/**
* Implements hook_preprocess_HOOK() for page templates.
*/
function my_custom_theme_preprocess_page(array &$variables) {
// Custom preprocess function for the page template.
$variables['my_custom_variable'] = t('This is a custom variable');
}
- hook_theme(): থিমের কাস্টম টেমপ্লেট ফাইলগুলির জন্য ড্রুপালকে জানায়।
- hook_preprocess_page(): পেজ টেমপ্লেটের জন্য অতিরিক্ত ডাটা বা কাস্টম ভেরিয়েবল যোগ করতে ব্যবহৃত হয়।
৬. থিমে থিম সেটিংস প্যানেল তৈরি করা
ড্রুপালে থিম কনফিগারেশন পেজ তৈরি করতে, যেখানে ইউজাররা থিমের কিছু সেটিংস কাস্টমাইজ করতে পারেন, আপনাকে Form API ব্যবহার করে একটি কনফিগারেশন ফর্ম তৈরি করতে হবে।
/**
* Implements hook_form_FORM_ID_alter().
*/
function my_custom_theme_form_system_theme_settings_alter(&$form, &$form_state) {
$form['my_custom_setting'] = array(
'#type' => 'textfield',
'#title' => t('Custom Setting'),
'#default_value' => theme_get_setting('my_custom_setting'),
'#description' => t('A custom setting for my theme.'),
);
}
এই ফর্মের মাধ্যমে আপনি থিমের কাস্টম সেটিংস ইউজারের জন্য সরবরাহ করতে পারবেন।
৭. থিম ডেভেলপমেন্টে টুলস এবং রিসোর্স
ড্রুপালে কাস্টম থিম ডেভেলপমেন্টের জন্য কিছু টুলস এবং রিসোর্স উপকারী হতে পারে:
- Drush: ড্রুপাল সাইটের জন্য একটি কমান্ড লাইন টুল, যা থিম স্যুইচিং এবং ডেভেলপমেন্টে সাহায্য করে।
- Twig Debugging: ড্রুপাল ৮ এবং পরবর্তী সংস্করণে, Twig টেমপ্লেট ইঞ্জিন ব্যবহৃত হয়, এবং ডিবাগিং সক্ষম করে থিম ফাইলগুলি সহজে ডিবাগ করা যায়।
- Theme Developer Module: এই মডিউল থিম ডেভেলপমেন্টের জন্য অনেক উপকারী টুলস সরবরাহ করে, যেমন টেমপ্লেট ফাইলগুলোতে তথ্য দেখানো।
উপসংহার
ড্রুপাল কাস্টম থিম ডেভেলপমেন্ট আপনাকে একটি পূর্ণাঙ্গ কাস্টম ডিজাইন এবং ফিচার সমৃদ্ধ সাইট তৈরি করার সুযোগ দেয়। থিম ডেভেলপমেন্টের জন্য বিভিন্ন ধাপের মাধ্যমে আপনি সাইটের লেআউট, ডিজাইন এবং ফাংশনালিটি কাস্টমাইজ করতে পারবেন। ড্রুপালের থিমিং সিস্টেমের সাহায্যে আপনি আপনার সাইটের ব্যবহারকারী অভিজ্ঞতা (UX) এবং ডিজাইনকে একদম নিজের মতো করে তৈরি করতে পারবেন।
ড্রুপাল (Drupal) এর থিমিং সিস্টেম অত্যন্ত শক্তিশালী এবং নমনীয়, যা আপনাকে আপনার সাইটের ডিজাইন এবং লেআউট সম্পূর্ণ কাস্টমাইজ করার সুযোগ দেয়। ড্রুপাল থিমিং সিস্টেমের মাধ্যমে আপনি সাইটের চেহারা এবং অনুভূতি (look and feel) পরিবর্তন করতে পারবেন, যাতে এটি আপনার ব্র্যান্ড এবং ব্যবহারকারীর চাহিদার সাথে সামঞ্জস্যপূর্ণ হয়।
এই টিউটোরিয়ালে, আমরা ড্রুপালের থিমিং সিস্টেমের বেসিক ধারণা এবং এর কাজের মূল কাঠামো নিয়ে আলোচনা করব।
ড্রুপালের থিমিং সিস্টেম কী?
থিমিং হল ড্রুপাল সাইটের লেআউট এবং ডিজাইন কাস্টমাইজ করার প্রক্রিয়া। এটি HTML, CSS, JavaScript, এবং PHP কোড ব্যবহার করে সাইটের অভ্যন্তরীণ দিককে দর্শনীয় এবং ব্যবহারকারী-বান্ধব করে তোলে।
ড্রুপাল থিমিং সিস্টেম আপনাকে সাইটের ডিসপ্লে কাস্টমাইজ করতে বিভিন্ন স্তরে কাজ করতে দেয়:
- ইন্টারফেস ডিজাইন (UI)
- পেজ লেআউট (Page Layout)
- কন্টেন্ট প্রদর্শন (Content Display)
- রেসপন্সিভ ডিজাইন (Responsive Design)
ড্রুপাল থিমিং সিস্টেমের মূল উপাদান
ড্রুপাল থিমিং সিস্টেমে কিছু গুরুত্বপূর্ণ উপাদান রয়েছে, যা সাইটের ডিজাইন ও লেআউট কাস্টমাইজ করার জন্য ব্যবহৃত হয়। এগুলোর মধ্যে প্রধানগুলো হল:
১. থিম
থিম হল ড্রুপাল সাইটের ডিজাইন এবং লেআউটের প্রধান কাঠামো। ড্রুপালে একটি থিম সাধারণত নিচের উপাদানগুলো ধারণ করে:
- HTML (Structure): সাইটের পেজের ভিত্তি (structure) তৈরি করে।
- CSS (Style): সাইটের স্টাইলিং (look) নিয়ন্ত্রণ করে, যেমন রং, ফন্ট, লেআউট ইত্যাদি।
- JavaScript (Interactivity): সাইটের ইন্টারঅ্যাকটিভিটি এবং ব্যবহারকারী ইন্টারফেস (UI) নিয়ন্ত্রণ করে।
ড্রুপালের একটি থিম .info.yml ফাইল দিয়ে কনফিগার করা হয়, যা থিমের বৈশিষ্ট্য, নির্ভরতা এবং অন্যান্য সেটিংস সুনির্দিষ্ট করে।
২. টেমপ্লেট
ড্রুপালে টেমপ্লেট ফাইলগুলি হলো HTML ফাইল যা সাইটের কনটেন্ট কীভাবে প্রদর্শিত হবে তা নির্ধারণ করে। এগুলোর মধ্যে প্রধান টেমপ্লেট ফাইলগুলো হল:
- page.tpl.php: এটি পুরো পেজের লেআউট সংজ্ঞায়িত করে।
- node.tpl.php: এটি কন্টেন্ট (যেমন পেজ, ব্লগ পোস্ট ইত্যাদি) প্রদর্শন করার জন্য ব্যবহৃত হয়।
- block.tpl.php: ব্লক কনটেন্টের জন্য ব্যবহৃত টেমপ্লেট।
- views-view.tpl.php: ভিউ (Views) মডিউলের কনটেন্ট প্রদর্শন করার জন্য ব্যবহৃত হয়।
ড্রুপালের থিমিং সিস্টেমের শক্তি হল এই টেমপ্লেটগুলিকে কাস্টমাইজ করার মাধ্যমে আপনি কনটেন্টের প্রদর্শন সম্পূর্ণ কাস্টমাইজ করতে পারেন।
৩. থিম .info.yml ফাইল
প্রতিটি থিমের একটি .info.yml ফাইল থাকে, যা থিমের মেটা তথ্য এবং ড্রুপালের থিম সিস্টেমের সাথে এর সম্পর্ক স্থাপন করে। এই ফাইলে থিমের নাম, সংস্করণ, নির্ভরতা এবং অন্যান্য কনফিগারেশন অন্তর্ভুক্ত থাকে।
উদাহরণ:
name: 'My Custom Theme'
type: theme
base theme: classy
description: 'A custom theme for my website.'
regions:
header: 'Header'
footer: 'Footer'
৪. থিম রিজনস (Regions)
ড্রুপালের থিমের মধ্যে regions হলো সাইটের লেআউটের সেই অংশগুলো যেখানে আপনি ব্লক (Blocks), মেনু (Menus) এবং অন্যান্য কন্টেন্ট উপাদানগুলি স্থাপন করতে পারেন। কিছু সাধারণ regions হল:
- Header
- Footer
- Sidebar
- Content
এই regions এর মাধ্যমে আপনি থিমে ব্লক এবং কন্টেন্ট উপাদানগুলিকে কাঙ্ক্ষিত স্থানে নিয়ে আসতে পারেন।
ড্রুপালে থিম কাস্টমাইজেশন
ড্রুপালে থিম কাস্টমাইজ করার জন্য আপনি CSS, HTML, PHP, এবং Twig টেমপ্লেট ফাইলগুলো ব্যবহার করতে পারেন। কিছু গুরুত্বপূর্ণ কাস্টমাইজেশন পদ্ধতি:
১. CSS কাস্টমাইজেশন
আপনার থিমে নতুন CSS যুক্ত করতে, থিমের css ফোল্ডারে একটি নতুন CSS ফাইল তৈরি করুন এবং থিমের *.info.yml ফাইলে এটিকে অন্তর্ভুক্ত করুন:
stylesheets:
all:
- css/style.css
২. HTML কাস্টমাইজেশন
টেমপ্লেট ফাইলগুলির মাধ্যমে HTML কাস্টমাইজ করা যায়। উদাহরণস্বরূপ, page.tpl.php ফাইলের মাধ্যমে সাইটের প্রতিটি পৃষ্ঠার HTML কনটেন্ট কাস্টমাইজ করা যেতে পারে।
৩. PHP কাস্টমাইজেশন
ড্রুপালের PHP ফাইলগুলিতে আপনি থিমের কার্যকারিতা নিয়ন্ত্রণ করতে পারবেন। উদাহরণস্বরূপ, template.php ফাইলের মাধ্যমে আপনি থিমের কাস্টম ফাংশন যোগ করতে পারেন।
৪. Twig টেমপ্লেট কাস্টমাইজেশন
ড্রুপাল ৮ এবং পরবর্তী সংস্করণে Twig টেমপ্লেট ইঞ্জিন ব্যবহার করা হয়। এটি একটি নিরাপদ, নমনীয় এবং গতিশীল HTML টেমপ্লেট ইঞ্জিন। ড্রুপালের থিম কাস্টমাইজেশন করার জন্য Twig ব্যবহার করা অত্যন্ত জনপ্রিয় এবং শক্তিশালী পদ্ধতি।
ড্রুপালের থিম ডেভেলপমেন্ট প্রক্রিয়া
ড্রুপালে থিম তৈরি এবং কাস্টমাইজেশনের জন্য, আপনাকে নীচের ধাপগুলি অনুসরণ করতে হবে:
থিম ফোল্ডার তৈরি: প্রথমে থিমের জন্য একটি নতুন ফোল্ডার তৈরি করুন:
sites/all/themes/custom/my_custom_theme- .info.yml ফাইল তৈরি করুন: এই ফাইলের মাধ্যমে ড্রুপাল থিমের মেটা তথ্য জানায়।
- CSS, JS, এবং টেমপ্লেট ফাইল তৈরি করুন: থিমের জন্য স্টাইলিং (CSS), স্ক্রিপ্ট (JS), এবং টেমপ্লেট ফাইল তৈরি করুন।
- থিম সক্রিয় করুন: Admin → Appearance থেকে আপনার থিম সক্রিয় করুন।
উপসংহার
ড্রুপালের থিমিং সিস্টেম অত্যন্ত শক্তিশালী এবং নমনীয়, যা আপনাকে আপনার সাইটের ডিজাইন এবং লেআউট কাস্টমাইজ করার জন্য পূর্ণ স্বাধীনতা দেয়। আপনি CSS, HTML, PHP, Twig টেমপ্লেট এবং .info.yml ফাইলের মাধ্যমে সাইটের ডিজাইন কাস্টমাইজ করতে পারেন। থিমিং সিস্টেমের এই নমনীয়তা এবং কাস্টমাইজেশন ক্ষমতার মাধ্যমে আপনি আপনার সাইটকে যে কোনও ধরনের ডিজাইনে রূপান্তর করতে পারেন, যা আপনার ব্র্যান্ড এবং ব্যবহারকারীর অভিজ্ঞতার সাথে সামঞ্জস্যপূর্ণ।
ড্রুপাল (Drupal) একটি অত্যন্ত নমনীয় কনটেন্ট ম্যানেজমেন্ট সিস্টেম (CMS) যা থিম কাস্টমাইজেশনের জন্য বিভিন্ন ধরনের পদ্ধতি সরবরাহ করে। কাস্টম থিম তৈরি করা ড্রুপাল সাইটের ডিজাইন এবং ইউজার ইন্টারফেসকে পুরোপুরি আপনার প্রয়োজন অনুযায়ী কাস্টমাইজ করার সুযোগ দেয়। এই টিউটোরিয়ালে আমরা ড্রুপালে কাস্টম থিম তৈরি এবং কনফিগার করার প্রক্রিয়া নিয়ে বিস্তারিত আলোচনা করব।
কাস্টম থিম কী?
কাস্টম থিম হল একটি ড্রুপাল থিম যা আপনার সাইটের ডিজাইন এবং স্টাইল কাস্টমাইজ করার জন্য তৈরি করা হয়। ড্রুপালে কাস্টম থিম তৈরি করা সাইটের লেআউট, কনটেন্ট, এবং ডিজাইন কাস্টমাইজ করার জন্য দরকারী, যা আপনার ব্র্যান্ড এবং ইউজার এক্সপেরিয়েন্সের সাথে মেলে।
কাস্টম থিম তৈরি করার ধাপসমূহ
১. থিম ডিরেক্টরি তৈরি করুন
ড্রুপালে কাস্টম থিম তৈরি করতে প্রথমে আপনাকে themes ডিরেক্টরিতে একটি নতুন থিম ফোল্ডার তৈরি করতে হবে।
themes/custom ডিরেক্টরির মধ্যে একটি নতুন ফোল্ডার তৈরি করুন। উদাহরণস্বরূপ:
sites/all/themes/custom/my_custom_theme
২. .info.yml ফাইল তৈরি করুন
ড্রুপালে একটি থিম ফোল্ডার তৈরি করার পর, আপনাকে একটি .info.yml ফাইল তৈরি করতে হবে। এই ফাইলটি থিমের বৈশিষ্ট্য এবং কনফিগারেশন ড্রুপালকে জানায়।
my_custom_theme.info.yml ফাইল তৈরি করুন এবং নিচের কনফিগারেশন লিখুন:
name: 'My Custom Theme' type: theme base theme: classy description: 'A custom theme for my Drupal site.' regions: header: 'Header' footer: 'Footer' sidebar_first: 'Sidebar First' sidebar_second: 'Sidebar Second'
- name: থিমের নাম
- type: থিমের ধরন (এটি অবশ্যই theme হবে)
- base theme: আপনার থিমের ভিত্তি (এখানে classy ব্যবহার করা হয়েছে, যা ড্রুপালের একটি বেস থিম)
- regions: আপনার থিমের জন্য উপলব্ধ Regions (যেমন Header, Footer, Sidebar)
৩. থিমের টেমপ্লেট ফাইল তৈরি করুন
ড্রুপালের থিম টেমপ্লেট ফাইলগুলি PHP ফাইল হিসাবে থাকে। আপনি এই ফাইলগুলি কাস্টমাইজ করে সাইটের কাঠামো পরিবর্তন করতে পারবেন।
page.tpl.php ফাইল তৈরি করুন, যা সাইটের পেজ লেআউট পরিচালনা করবে:
<html> <head> <title><?php print $head_title; ?></title> </head> <body> <header> <?php print render($page['header']); ?> </header> <div id="content"> <?php print render($page['content']); ?> </div> <footer> <?php print render($page['footer']); ?> </footer> </body> </html>
- এখানে, আপনি
$page['header'],$page['content'], এবং$page['footer']ব্যবহার করে সাইটের বিভিন্ন অঞ্চলের কনটেন্ট রেন্ডার করছেন।
- block.tpl.php ফাইল তৈরি করুন (যদি আপনি কাস্টম ব্লক তৈরি করতে চান)।
৪. CSS এবং JavaScript ফাইল যুক্ত করুন
আপনার থিমের স্টাইল এবং ফাংশনালিটি কাস্টমাইজ করতে CSS এবং JavaScript ফাইল যুক্ত করুন।
styles.css ফাইল তৈরি করুন:
body { font-family: Arial, sans-serif; background-color: #f4f4f4; } header { background-color: #333; color: white; padding: 10px 0; }scripts.js ফাইল তৈরি করুন (যদি কিছু জাভাস্ক্রিপ্ট কার্যকারিতা চান):
(function($) { $(document).ready(function() { alert("Welcome to My Custom Theme!"); }); })(jQuery);my_custom_theme.libraries.yml ফাইল তৈরি করুন এবং CSS/JS ফাইল যুক্ত করুন:
my_custom_theme.styles: version: 1.x css: theme: css/styles.css: {} my_custom_theme.scripts: version: 1.x js: js/scripts.js: {}
৫. থিমের ফিচার কনফিগার করুন
ড্রুপালে থিমের কনফিগারেশন এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করতে my_custom_theme.theme ফাইল ব্যবহার করতে পারেন।
function my_custom_theme_preprocess_page(array &$variables) {
// থিমের জন্য কাস্টম প্রিপ্রসেস ফাংশন
$variables['my_custom_variable'] = t('Hello, this is a custom theme variable!');
}
৬. থিম অ্যাকটিভেট করুন
- ড্রুপাল অ্যাডমিন প্যানেলে যান: Admin → Appearance
- আপনার তৈরি করা কাস্টম থিমটি সেখানে দেখতে পাবেন।
- Enable and set default ক্লিক করে থিমটি সক্রিয় করুন।
কাস্টম থিম কনফিগারেশন
ড্রুপালে কাস্টম থিম কনফিগার করার জন্য Appearance পেজ থেকে আপনি বিভিন্ন সেটিংস অ্যাক্সেস করতে পারবেন।
- Logo এবং Favicon কনফিগার করুন:
- Appearance → Settings → My Custom Theme এ যান।
- সাইটের Logo এবং Favicon আপলোড করুন।
- Color Scheme কনফিগার করুন:
- ড্রুপাল Color module ব্যবহার করে থিমের জন্য কাস্টম কালার স্কিম তৈরি করা যায়।
- Custom Regions কনফিগার করুন:
- theme settings এ গিয়ে আপনি নতুন Region যুক্ত করতে পারেন, যেটি থিমের টেমপ্লেট ফাইলগুলিতে ব্যবহৃত হবে।
উপসংহার
ড্রুপাল (Drupal) একটি অত্যন্ত শক্তিশালী CMS এবং এর মাধ্যমে কাস্টম থিম তৈরি এবং কনফিগারেশন প্রক্রিয়া সহজ। থিম তৈরি করে আপনি সাইটের ডিজাইন, লেআউট এবং কনটেন্ট কাস্টমাইজ করতে পারবেন। এর মাধ্যমে সাইটের ইউজার এক্সপেরিয়েন্স এবং ব্র্যান্ডিংয়ের জন্য একটি সম্পূর্ণ কাস্টমাইজড থিম তৈরি করা সম্ভব।
ড্রুপাল (Drupal) একটি শক্তিশালী কনটেন্ট ম্যানেজমেন্ট সিস্টেম (CMS) যা থিমিং এবং কাস্টম লেআউট তৈরি করার জন্য Twig টেমপ্লেট ইঞ্জিন ব্যবহার করে। Twig একটি মডার্ন টেমপ্লেট ইঞ্জিন যা ড্রুপাল ৮ থেকে ডিফল্ট হিসেবে ব্যবহৃত হচ্ছে এবং এটি HTML কোড এবং ড্রুপাল ডাটা একত্রিত করে আরও পরিষ্কার এবং নিরাপদ টেমপ্লেট তৈরি করতে সাহায্য করে।
এই টিউটোরিয়ালে, আমরা Twig Templates ব্যবহার করে কাস্টম লেআউট তৈরি করার প্রক্রিয়া এবং এর সুবিধাগুলি আলোচনা করব।
Twig Templates কী?
Twig Templates হল একটি সিম্পল এবং নিরাপদ টেমপ্লেট ইঞ্জিন যা HTML ফাইল এবং ড্রুপাল ডাটা (যেমন, নোড, ব্লক, পেজ ইত্যাদি) একত্রিত করতে ব্যবহৃত হয়। ড্রুপাল থিমিং সিস্টেম Twig ব্যবহার করে সাইটের লেআউট, ডিজাইন, এবং কন্টেন্ট প্রদর্শন করে। এটি PHP কোডকে সরল ও নিরাপদ উপায়ে HTML এ রেন্ডার করতে সহায়তা করে।
Twig Templates এর সুবিধা
- নিরাপত্তা: Twig এর একটি স্বতন্ত্র নিরাপত্তা বৈশিষ্ট্য রয়েছে যা অটোমেটিকভাবে HTML ইনপুটকে স্যানিটাইজ করে।
- সহজ ব্যবহার: কোডের পুনঃব্যবহারযোগ্যতা এবং পাঠযোগ্যতা উন্নত করে।
- ফিচার সমৃদ্ধ: Twig-এর ফিচার যেমন লুপ, কন্ডিশনাল স্টেটমেন্ট, ইনক্লুড, ইত্যাদি ডেভেলপারদের জন্য অত্যন্ত সহায়ক।
Custom Layout তৈরি করার জন্য Twig Templates ব্যবহার
ড্রুপালে কাস্টম লেআউট তৈরি করতে, আপনাকে কিছু নির্দিষ্ট ধাপ অনুসরণ করতে হবে, যেমন টেমপ্লেট ফাইল তৈরি, CSS ফাইল যোগ করা এবং HTML স্ট্রাকচার কাস্টমাইজ করা।
১. ড্রুপাল থিম ফোল্ডারে নতুন Twig টেমপ্লেট তৈরি করুন
প্রথমে আপনাকে ড্রুপালের থিম ফোল্ডারে একটি কাস্টম Twig টেমপ্লেট তৈরি করতে হবে। থিম ফোল্ডারে যান এবং একটি নতুন টেমপ্লেট ফাইল তৈরি করুন।
/sites/all/themes/your_theme/templates/custom-layout.html.twig
এখানে, your_theme আপনার কাস্টম থিমের নাম এবং custom-layout.html.twig কাস্টম টেমপ্লেট ফাইলের নাম।
২. টেমপ্লেট ফাইলের মধ্যে HTML এবং Twig কোড লিখুন
একটি সিম্পল কাস্টম লেআউট টেমপ্লেট তৈরি করার জন্য, আপনি HTML এর সাথে Twig সিনট্যাক্স ব্যবহার করে ডায়নামিক কন্টেন্ট যোগ করতে পারবেন। উদাহরণস্বরূপ:
<!DOCTYPE html>
<html>
<head>
<title>{{ page_title }}</title>
<link rel="stylesheet" href="{{ base_path }}themes/your_theme/css/style.css">
</head>
<body>
<header>
<h1>{{ page_title }}</h1>
<nav>
<ul>
<li><a href="{{ path('home') }}">Home</a></li>
<li><a href="{{ path('about') }}">About</a></li>
<li><a href="{{ path('contact') }}">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>{{ content.title }}</h2>
<div class="content">
{{ content.body }}
</div>
</section>
</main>
<footer>
<p>© {{ current_year }} Your Company. All Rights Reserved.</p>
</footer>
</body>
</html>
এখানে:
{{ page_title }}এবং{{ content.title }}ড্রুপাল থেকে ডাটা অ্যাক্সেস করার জন্য Twig ব্যবহার করা হয়েছে।{{ path('home') }}এবং অন্যান্য URL সিস্টেমে কাস্টম রাউটিং ব্যবহৃত হচ্ছে।
৩. Twig ফিল্ড ডেটা এবং কন্টেন্ট রেন্ডারিং
ড্রুপালে, আপনি বিভিন্ন কন্টেন্ট ফিল্ড (যেমন: নোডের শিরোনাম, বডি, ইমেজ ইত্যাদি) Twig টেমপ্লেটে রেন্ডার করতে পারেন। উদাহরণস্বরূপ:
<article>
<header>
<h1>{{ node.title }}</h1>
</header>
<div class="content">
{{ node.body.value }}
</div>
<footer>
<p>Published on: {{ node.created|date('m/d/Y') }}</p>
</footer>
</article>
এখানে:
{{ node.title }}এবং{{ node.body.value }}ড্রুপাল নোডের শিরোনাম এবং বডি ফিল্ড প্রদর্শন করছে।{{ node.created|date('m/d/Y') }}তারিখ ফর্ম্যাট করার জন্য Twig ফিল্টার ব্যবহার করা হচ্ছে।
৪. CSS এবং JavaScript যোগ করা
আপনি আপনার কাস্টম টেমপ্লেটের সাথে CSS এবং JavaScript ফাইল যোগ করতে পারেন। CSS বা JavaScript ফাইলগুলি আপনার থিম ফোল্ডারে থাকতে হবে।
CSS যোগ করা:
your_themeফোল্ডারে একটি নতুন CSS ফাইল তৈরি করুন, যেমনstyle.css।আপনার Twig টেমপ্লেটে এই CSS ফাইলটি লিংক করুন:
<link rel="stylesheet" href="{{ base_path }}themes/your_theme/css/style.css">
JavaScript যোগ করা:
- আপনার থিমের
jsফোল্ডারে একটি নতুন JavaScript ফাইল তৈরি করুন, যেমনscripts.js। টেমপ্লেটে JavaScript ফাইলটি লোড করুন:
<script src="{{ base_path }}themes/your_theme/js/scripts.js"></script>
৫. কাস্টম টেমপ্লেট ফাইল এবং ব্লক ব্যবহার
আপনি ব্লক বা পেজের জন্য কাস্টম টেমপ্লেট ফাইল তৈরি করতে পারেন। ড্রুপাল বিভিন্ন টেমপ্লেট ফাইলের নামিং কনভেনশন অনুসরণ করে, যেমন:
- node--[content-type].html.twig: কনটেন্ট টাইপের জন্য কাস্টম টেমপ্লেট।
- block--[block-id].html.twig: নির্দিষ্ট ব্লকের জন্য কাস্টম টেমপ্লেট।
- page--[path].html.twig: নির্দিষ্ট পেজের জন্য কাস্টম টেমপ্লেট।
এটি ড্রুপালকে আরও নমনীয় এবং কাস্টমাইজযোগ্য করে তোলে।
উপসংহার
Twig Templates ড্রুপালে কাস্টম লেআউট তৈরি এবং থিমিং প্রক্রিয়াকে সহজ এবং নিরাপদ করে তোলে। আপনি Twig ব্যবহার করে HTML, CSS এবং JavaScript কাস্টমাইজ করতে পারবেন, এবং ড্রুপালের ডাইনামিক কন্টেন্ট রেন্ডার করতে পারবেন। এই প্রক্রিয়াগুলির মাধ্যমে আপনি সম্পূর্ণ কাস্টমাইজড লেআউট তৈরি করতে পারবেন যা আপনার সাইটের ডিজাইন এবং ফিচারের চাহিদা অনুযায়ী মানানসই হবে।
ড্রুপাল (Drupal) একটি অত্যন্ত নমনীয় কনটেন্ট ম্যানেজমেন্ট সিস্টেম (CMS), যা আপনার সাইটের ডিজাইন এবং ফাংশনালিটি কাস্টমাইজ করার জন্য CSS (Cascading Style Sheets) এবং JavaScript (JS) ফাইল যুক্ত এবং কাস্টমাইজ করার জন্য বিভিন্ন উপায় সরবরাহ করে। এই ফাইলগুলি সাইটের প্রদর্শন এবং ইন্টারঅ্যাকটিভিটি উন্নত করতে ব্যবহৃত হয়।
এই টিউটোরিয়ালে, আমরা CSS এবং JS ফাইল সংযুক্ত করা এবং কাস্টমাইজ করা নিয়ে আলোচনা করব।
১. ড্রুপালে CSS এবং JS ফাইল সংযুক্ত করা
ড্রুপালে CSS এবং JS ফাইল সংযুক্ত করার জন্য বিভিন্ন উপায় রয়েছে। এখানে থিম এবং মডিউল এর মাধ্যমে CSS ও JS ফাইল যুক্ত করার পদ্ধতি দেওয়া হলো।
১.১ থিমের মাধ্যমে CSS এবং JS ফাইল সংযুক্ত করা
ড্রুপালের থিমে CSS এবং JS ফাইল যুক্ত করার জন্য আপনি your_theme.info.yml ফাইলটি ব্যবহার করবেন।
উদাহরণ:
- আপনার থিমের ডিরেক্টরিতে
your_theme.info.ymlফাইলটি খোলুন। - 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 ফাইল যোগ করার জন্য লাউব্রেরি ব্যবহার করা হয়। লাইব্রেরি আপনাকে আপনার ফাইলগুলি বিভিন্ন পেজ এবং শর্ত অনুসারে লোড করার সুযোগ দেয়।
- লাউব্রেরি ডিফাইন করা: প্রথমে আপনার থিমের
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
- লাইব্রেরি লোড করা: এখন আপনার থিমে এই লাইব্রেরি লোড করতে,
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() ব্যবহার করতে পারেন।
উদাহরণ:
- মডিউল লাইব্রেরি ডিফাইন করা: আপনার মডিউলের
your_module.libraries.ymlফাইল তৈরি করুন বা সম্পাদনা করুন।
my_module/my_styles:
css:
theme:
css/custom-style.css: {}
my_module/my_scripts:
js:
js/custom-script.js: {}
- লাইব্রেরি লোড করা: মডিউলের
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) করতে পারেন। এর ফলে সাইটের লোডিং টাইম কমে যাবে।
- Admin → Configuration → Development → Performance এ যান।
- "Aggregate CSS files" এবং "Aggregate JavaScript files" অপশনগুলো সক্রিয় করুন।
উপসংহার
ড্রুপাল সাইটে CSS এবং JS ফাইল সংযুক্ত এবং কাস্টমাইজ করা খুবই সহজ এবং নমনীয়। আপনি থিম অথবা মডিউল ব্যবহার করে CSS ও JS ফাইল যুক্ত এবং কাস্টমাইজ করতে পারেন। সঠিকভাবে CSS এবং JS কাস্টমাইজ করার মাধ্যমে আপনি সাইটের ডিজাইন, ইন্টারঅ্যাকটিভিটি এবং পারফরম্যান্স উন্নত করতে পারবেন, যা সাইটের ব্যবহারকারীর অভিজ্ঞতা বাড়াবে।
ড্রুপাল (Drupal) সাইটের লেআউট এবং ডিজাইন কাস্টমাইজ করতে অনেক শক্তিশালী টুল সরবরাহ করে। এর মধ্যে কাস্টম রিজিয়ন এবং লেআউট ডিজাইন অত্যন্ত গুরুত্বপূর্ণ। রিজিয়ন হল সাইটের বিভিন্ন অংশ যেখানে আপনি ব্লক বা কন্টেন্ট উপাদান প্রদর্শন করতে পারেন, এবং লেআউট ডিজাইন সাইটের গঠন এবং উপস্থাপনাকে কাস্টমাইজ করতে ব্যবহৃত হয়।
এই গাইডে আমরা ড্রুপালে কাস্টম রিজিয়ন তৈরি এবং লেআউট ডিজাইন কাস্টমাইজেশন এর বিস্তারিত আলোচনা করব।
কাস্টম রিজিয়ন তৈরি করা
ড্রুপাল থিমের মাধ্যমে আপনি সাইটের জন্য কাস্টম রিজিয়ন তৈরি করতে পারেন। একটি রিজিয়ন হল এমন একটি এলাকা যেখানে ব্লক বা কন্টেন্ট উপাদানগুলি প্রদর্শিত হবে, যেমন হেডার, সাইডবার, ফুটার ইত্যাদি। আপনি নতুন রিজিয়ন তৈরি করে সাইটের লেআউটকে আরও কাস্টমাইজ করতে পারবেন।
১. কাস্টম রিজিয়ন তৈরি করতে:
থিমের .info.yml ফাইলটি সম্পাদনা করুন: ড্রুপালের থিমের
.info.ymlফাইলের মাধ্যমে নতুন রিজিয়ন তৈরি করা যায়। উদাহরণস্বরূপ, যদি আপনি একটি "Custom Sidebar" রিজিয়ন তৈরি করতে চান, তবে আপনার থিমের.info.ymlফাইলে নিচের কোডটি যুক্ত করুন:regions: header: 'Header' primary_menu: 'Primary menu' custom_sidebar: 'Custom Sidebar' # নতুন কাস্টম রিজিয়ন footer: 'Footer'থিমের ফোল্ডারে রিজিয়ন ব্যবহার করুন:
page.tpl.phpঅথবাpage.html.twigটেমপ্লেট ফাইলে আপনি নতুন রিজিয়নটি ব্যবহার করতে পারেন। উদাহরণস্বরূপ:<div id="custom-sidebar"> {{ page.custom_sidebar }} </div>এই কোডটি আপনার সাইটে Custom Sidebar রিজিয়নে থাকা ব্লক বা কন্টেন্ট প্রদর্শন করবে।
২. ব্লক প্রদর্শন করা কাস্টম রিজিয়নে:
- Admin Menu → Structure → Block layout তে যান।
- "Place block" ক্লিক করুন এবং "Custom Sidebar" রিজিয়ন নির্বাচন করুন।
- যে ব্লকটি আপনি এই রিজিয়নে প্রদর্শন করতে চান সেটি সিলেক্ট করুন এবং Save block ক্লিক করুন।
এভাবে, আপনি কাস্টম রিজিয়ন তৈরি এবং কনফিগার করতে পারবেন এবং সেখানে ব্লক বা কন্টেন্ট উপাদান যুক্ত করতে পারবেন।
লেআউট ডিজাইন কাস্টমাইজ করা
ড্রুপালে লেআউট ডিজাইন কাস্টমাইজেশন প্রক্রিয়া অনেক নমনীয় এবং শক্তিশালী। আপনি কাস্টম লেআউট তৈরি করার জন্য কয়েকটি পদ্ধতি ব্যবহার করতে পারেন, যেমন Layout Builder মডিউল বা Theme কাস্টমাইজেশন।
১. Layout Builder মডিউল ব্যবহার করা:
ড্রুপালে Layout Builder মডিউল ব্যবহার করে আপনি সহজেই কাস্টম লেআউট তৈরি করতে পারেন। এটি সাইটের প্রতিটি পৃষ্ঠা এবং কন্টেন্টের লেআউট কাস্টমাইজ করতে সহায়ক।
Layout Builder ইনস্টল এবং কনফিগার করা:
- Layout Builder মডিউল ইনস্টল করুন:
- Admin Menu → Extend তে গিয়ে Layout Builder মডিউলটি ইনস্টল করুন।
- Enable Layout Builder:
- Admin Menu → Structure → Content types তে গিয়ে আপনার কন্টেন্ট টাইপ সিলেক্ট করুন।
- "Manage display" এ গিয়ে Use Layout Builder সক্রিয় করুন।
- লেআউট কাস্টমাইজ করুন:
- আপনার কন্টেন্ট বা পৃষ্ঠার লেআউট কাস্টমাইজ করতে Layout অপশনটি ব্যবহার করুন।
Layout Builder এর মাধ্যমে আপনি একাধিক কলাম, ব্লক, ইমেজ, ভিডিও ইত্যাদি উপাদান সহজেই যোগ এবং কাস্টমাইজ করতে পারবেন।
২. থিম কাস্টমাইজেশন দিয়ে লেআউট তৈরি করা:
ড্রুপালে থিম কাস্টমাইজেশন ব্যবহার করে আপনি কাস্টম লেআউট ডিজাইন করতে পারেন। আপনি CSS এবং Twig templates ব্যবহার করে আপনার সাইটের লেআউট কাস্টমাইজ করতে পারেন।
CSS এবং HTML (Twig) দিয়ে কাস্টম লেআউট ডিজাইন:
CSS ফাইল তৈরি করুন: আপনার থিমের
cssফোল্ডারে একটি নতুন CSS ফাইল তৈরি করুন এবং সাইটের লেআউটের জন্য কাস্টম স্টাইল যুক্ত করুন:.custom-layout { display: flex; justify-content: space-between; } .custom-layout .left-column { width: 65%; } .custom-layout .right-column { width: 30%; }Twig টেমপ্লেট ফাইলে লেআউট যুক্ত করুন: আপনার থিমের page.html.twig বা node.html.twig ফাইলে কাস্টম লেআউট যুক্ত করুন:
<div class="custom-layout"> <div class="left-column"> {{ page.content }} </div> <div class="right-column"> {{ page.sidebar_first }} </div> </div>
এভাবে, আপনি CSS এবং Twig টেমপ্লেট ব্যবহার করে কাস্টম লেআউট তৈরি করতে পারবেন।
ড্রুপালে কাস্টম লেআউট কনফিগারেশনের টিপস
- Flexbox বা Grid Layout ব্যবহার করুন: আধুনিক লেআউট ডিজাইন তৈরি করতে Flexbox বা CSS Grid ব্যবহার করুন। এগুলি সাইটের লেআউট ব্যবস্থাপনাকে আরো নমনীয় এবং রেসপন্সিভ করে তুলবে।
- Responsive Design: কাস্টম লেআউট ডিজাইন করতে গেলে নিশ্চিত করুন যে সাইটটি মোবাইল, ট্যাবলেট এবং ডেস্কটপ ডিভাইসের জন্য রেসপন্সিভ। CSS মিডিয়া কুয়েরি ব্যবহার করে রেসপন্সিভ লেআউট তৈরি করুন।
- Layout Builder মডিউলের সুবিধা ব্যবহার করুন: Layout Builder মডিউলটি ড্রুপাল 8 ও 9 এর জন্য খুবই শক্তিশালী এবং এটি সাইটের পৃষ্ঠা বা কন্টেন্ট টাইপের লেআউট কাস্টমাইজ করতে অনেক সহজ এবং দ্রুত পদ্ধতি সরবরাহ করে।
উপসংহার
ড্রুপালে কাস্টম রিজিয়ন এবং লেআউট ডিজাইন কাস্টমাইজেশন একটি শক্তিশালী উপায়, যা আপনাকে সাইটের লেআউট এবং কন্টেন্ট ডিসপ্লে কাস্টমাইজ করতে সাহায্য করে। আপনি থিম কাস্টমাইজেশন, Layout Builder মডিউল এবং CSS/ Twig টেমপ্লেট ব্যবহার করে সাইটের লেআউট তৈরি এবং কাস্টমাইজ করতে পারেন। এই কাস্টমাইজেশনগুলো আপনার সাইটের ডিজাইন এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করবে।
Read more
