Twig Templates ব্যবহার করে Custom Layout তৈরি

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

330

ড্রুপাল (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 যোগ করা:

  1. your_theme ফোল্ডারে একটি নতুন CSS ফাইল তৈরি করুন, যেমন style.css
  2. আপনার Twig টেমপ্লেটে এই CSS ফাইলটি লিংক করুন:

    <link rel="stylesheet" href="{{ base_path }}themes/your_theme/css/style.css">
    

JavaScript যোগ করা:

  1. আপনার থিমের js ফোল্ডারে একটি নতুন JavaScript ফাইল তৈরি করুন, যেমন scripts.js
  2. টেমপ্লেটে 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 কাস্টমাইজ করতে পারবেন, এবং ড্রুপালের ডাইনামিক কন্টেন্ট রেন্ডার করতে পারবেন। এই প্রক্রিয়াগুলির মাধ্যমে আপনি সম্পূর্ণ কাস্টমাইজড লেআউট তৈরি করতে পারবেন যা আপনার সাইটের ডিজাইন এবং ফিচারের চাহিদা অনুযায়ী মানানসই হবে।

Content added By
Promotion

Are you sure to start over?

Loading...