Custom Regions এবং Layout Design

Custom থিম ডেভেলপমেন্ট - ড্রুপাল (Drupal) - Web Development

276

ড্রুপাল (Drupal) সাইটের লেআউট এবং ডিজাইন কাস্টমাইজ করতে অনেক শক্তিশালী টুল সরবরাহ করে। এর মধ্যে কাস্টম রিজিয়ন এবং লেআউট ডিজাইন অত্যন্ত গুরুত্বপূর্ণ। রিজিয়ন হল সাইটের বিভিন্ন অংশ যেখানে আপনি ব্লক বা কন্টেন্ট উপাদান প্রদর্শন করতে পারেন, এবং লেআউট ডিজাইন সাইটের গঠন এবং উপস্থাপনাকে কাস্টমাইজ করতে ব্যবহৃত হয়।

এই গাইডে আমরা ড্রুপালে কাস্টম রিজিয়ন তৈরি এবং লেআউট ডিজাইন কাস্টমাইজেশন এর বিস্তারিত আলোচনা করব।


কাস্টম রিজিয়ন তৈরি করা

ড্রুপাল থিমের মাধ্যমে আপনি সাইটের জন্য কাস্টম রিজিয়ন তৈরি করতে পারেন। একটি রিজিয়ন হল এমন একটি এলাকা যেখানে ব্লক বা কন্টেন্ট উপাদানগুলি প্রদর্শিত হবে, যেমন হেডার, সাইডবার, ফুটার ইত্যাদি। আপনি নতুন রিজিয়ন তৈরি করে সাইটের লেআউটকে আরও কাস্টমাইজ করতে পারবেন।

১. কাস্টম রিজিয়ন তৈরি করতে:

  1. থিমের .info.yml ফাইলটি সম্পাদনা করুন: ড্রুপালের থিমের .info.yml ফাইলের মাধ্যমে নতুন রিজিয়ন তৈরি করা যায়। উদাহরণস্বরূপ, যদি আপনি একটি "Custom Sidebar" রিজিয়ন তৈরি করতে চান, তবে আপনার থিমের .info.yml ফাইলে নিচের কোডটি যুক্ত করুন:

    regions:
      header: 'Header'
      primary_menu: 'Primary menu'
      custom_sidebar: 'Custom Sidebar'  # নতুন কাস্টম রিজিয়ন
      footer: 'Footer'
    
  2. থিমের ফোল্ডারে রিজিয়ন ব্যবহার করুন: page.tpl.php অথবা page.html.twig টেমপ্লেট ফাইলে আপনি নতুন রিজিয়নটি ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

    <div id="custom-sidebar">
      {{ page.custom_sidebar }}
    </div>
    

    এই কোডটি আপনার সাইটে Custom Sidebar রিজিয়নে থাকা ব্লক বা কন্টেন্ট প্রদর্শন করবে।

২. ব্লক প্রদর্শন করা কাস্টম রিজিয়নে:

  1. Admin Menu → Structure → Block layout তে যান।
  2. "Place block" ক্লিক করুন এবং "Custom Sidebar" রিজিয়ন নির্বাচন করুন।
  3. যে ব্লকটি আপনি এই রিজিয়নে প্রদর্শন করতে চান সেটি সিলেক্ট করুন এবং Save block ক্লিক করুন।

এভাবে, আপনি কাস্টম রিজিয়ন তৈরি এবং কনফিগার করতে পারবেন এবং সেখানে ব্লক বা কন্টেন্ট উপাদান যুক্ত করতে পারবেন।


লেআউট ডিজাইন কাস্টমাইজ করা

ড্রুপালে লেআউট ডিজাইন কাস্টমাইজেশন প্রক্রিয়া অনেক নমনীয় এবং শক্তিশালী। আপনি কাস্টম লেআউট তৈরি করার জন্য কয়েকটি পদ্ধতি ব্যবহার করতে পারেন, যেমন Layout Builder মডিউল বা Theme কাস্টমাইজেশন।

১. Layout Builder মডিউল ব্যবহার করা:

ড্রুপালে Layout Builder মডিউল ব্যবহার করে আপনি সহজেই কাস্টম লেআউট তৈরি করতে পারেন। এটি সাইটের প্রতিটি পৃষ্ঠা এবং কন্টেন্টের লেআউট কাস্টমাইজ করতে সহায়ক।

Layout Builder ইনস্টল এবং কনফিগার করা:
  1. Layout Builder মডিউল ইনস্টল করুন:
    • Admin Menu → Extend তে গিয়ে Layout Builder মডিউলটি ইনস্টল করুন।
  2. Enable Layout Builder:
    • Admin Menu → Structure → Content types তে গিয়ে আপনার কন্টেন্ট টাইপ সিলেক্ট করুন।
    • "Manage display" এ গিয়ে Use Layout Builder সক্রিয় করুন।
  3. লেআউট কাস্টমাইজ করুন:
    • আপনার কন্টেন্ট বা পৃষ্ঠার লেআউট কাস্টমাইজ করতে Layout অপশনটি ব্যবহার করুন।

Layout Builder এর মাধ্যমে আপনি একাধিক কলাম, ব্লক, ইমেজ, ভিডিও ইত্যাদি উপাদান সহজেই যোগ এবং কাস্টমাইজ করতে পারবেন।

২. থিম কাস্টমাইজেশন দিয়ে লেআউট তৈরি করা:

ড্রুপালে থিম কাস্টমাইজেশন ব্যবহার করে আপনি কাস্টম লেআউট ডিজাইন করতে পারেন। আপনি CSS এবং Twig templates ব্যবহার করে আপনার সাইটের লেআউট কাস্টমাইজ করতে পারেন।

CSS এবং HTML (Twig) দিয়ে কাস্টম লেআউট ডিজাইন:
  1. CSS ফাইল তৈরি করুন: আপনার থিমের css ফোল্ডারে একটি নতুন CSS ফাইল তৈরি করুন এবং সাইটের লেআউটের জন্য কাস্টম স্টাইল যুক্ত করুন:

    .custom-layout {
      display: flex;
      justify-content: space-between;
    }
    
    .custom-layout .left-column {
      width: 65%;
    }
    
    .custom-layout .right-column {
      width: 30%;
    }
    
  2. 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 টেমপ্লেট ব্যবহার করে কাস্টম লেআউট তৈরি করতে পারবেন।


ড্রুপালে কাস্টম লেআউট কনফিগারেশনের টিপস

  1. Flexbox বা Grid Layout ব্যবহার করুন: আধুনিক লেআউট ডিজাইন তৈরি করতে Flexbox বা CSS Grid ব্যবহার করুন। এগুলি সাইটের লেআউট ব্যবস্থাপনাকে আরো নমনীয় এবং রেসপন্সিভ করে তুলবে।
  2. Responsive Design: কাস্টম লেআউট ডিজাইন করতে গেলে নিশ্চিত করুন যে সাইটটি মোবাইল, ট্যাবলেট এবং ডেস্কটপ ডিভাইসের জন্য রেসপন্সিভ। CSS মিডিয়া কুয়েরি ব্যবহার করে রেসপন্সিভ লেআউট তৈরি করুন।
  3. Layout Builder মডিউলের সুবিধা ব্যবহার করুন: Layout Builder মডিউলটি ড্রুপাল 8 ও 9 এর জন্য খুবই শক্তিশালী এবং এটি সাইটের পৃষ্ঠা বা কন্টেন্ট টাইপের লেআউট কাস্টমাইজ করতে অনেক সহজ এবং দ্রুত পদ্ধতি সরবরাহ করে।

উপসংহার

ড্রুপালে কাস্টম রিজিয়ন এবং লেআউট ডিজাইন কাস্টমাইজেশন একটি শক্তিশালী উপায়, যা আপনাকে সাইটের লেআউট এবং কন্টেন্ট ডিসপ্লে কাস্টমাইজ করতে সাহায্য করে। আপনি থিম কাস্টমাইজেশন, Layout Builder মডিউল এবং CSS/ Twig টেমপ্লেট ব্যবহার করে সাইটের লেআউট তৈরি এবং কাস্টমাইজ করতে পারেন। এই কাস্টমাইজেশনগুলো আপনার সাইটের ডিজাইন এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করবে।

Content added By
Promotion

Are you sure to start over?

Loading...