মডিউল ৩.৬ : টেম্পলেট ইনহেরিটেন্স কোড

আজকে আসো আমরা টেমপ্লেট ইনহেরিটেন্স এর কোড দেখি।

বেস্ট প্রাকটিস হচ্ছে গ্লোবালি একটা টেমপ্লেট ফোল্ডার রেখে সেখানে base.html নামে একটা ফাইল তৈরি করা আর সেখানে বুটস্ট্র্যাপ অ্যাড করা। এর পর body তে ব্লক ট্যাগ অ্যাড করা. এখন extends ট্যাগ ইউজ করে আমরা suppose একটা অ্যাপ এর মধ্যে home.html এ base.html ফাইল কে ইনহেরিট করলাম। এখন আমি চাই home.html এ যে কোড গুলা করবো সেগুলা যেনো base.html এর block ট্যাগ portion কে override করে। তাই আমাকে সেম নামের ব্লক ট্যাগ home.html এও ইউজ করতে হবে।

base.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a
                class="nav-link active"
                aria-current="page"
                href="{% url 'home' %}"
                >Home</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'about' %}">About</a>
            </li>
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                Dropdown
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li>
                  <a class="dropdown-item" href="#">Something else here</a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" aria-disabled="true">Disabled</a>
            </li>
          </ul>
          <form class="d-flex" role="search">
            <input
              class="form-control me-2"
              type="search"
              placeholder="Search"
              aria-label="Search"
            />
            <button class="btn btn-outline-success" type="submit">
              Search
            </button>
          </form>
        </div>
      </div>
    </nav>
    {% block content %}
    <h1>parent</h1>
    {% endblock %}

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

home.html

{% extends 'base.html' %} 
{% load static %} 
{% block content %} 

<h1>I am inside first app</h1>

{% endblock %}

এখন তুমি যদি চাও যে base.html এর ব্লক ট্যাগ এ যদি কোনো টেক্সট থাকে সেটা কেউ দেখাইতে তাইলে পাইথন এ ইনহেরিটেন্স করার সময় আমরা যেমন super ফাংশন ইউজ করতাম এখানেও তেমন টা করবো কিন্তু হালকা ডিফারেন্ট ভাবে | আমরা {{block.super}} কে ইউজ করবো 

{% extends 'base.html' %} 
{% load static %} 
{% block content %}
 
{{block.super}}

<h1>I am inside first app</h1>

{% endblock %}

এখন ধরো তোমার একটা contact.html আছে সেটা হয়তো তোমার ওয়েবসাইট এর নিচে থাকবে জাস্ট সো এটা কে তো আলাদা করে রেন্ডার এর দরকার নাই বা সেখানে ইনহেরিটেন্স ইউজ করার প্রয়োজন নেই সেজন্যে তুমি contact.html কে include ট্যাগ এর মাধ্যমে base.html কে বসিয়ে দিতে পারো নিচের মত করে।

তুমি বলতেই পারো ভাইয়া আলাদা কোড এর কি দরকার ডিরেক্ট contact.html এর কোড তো base.html এ পেস্ট করলেই হয়, খেয়াল করে দেখো সেটা করলে কোড অনেক বড় হয়ে যাবে সেটা manage করতেও হিমশিম খাবে সেজন্যে আমরা আলাদা কোড করে সেটাকে ইনক্লুড করে দিচ্ছে base.html এ যেনো সবাই সেটা সব পেজ এই কমন থাকে ।

{% include 'contact.html' %}
Previousমডিউল ৩.৫ : টেম্পলেট ইনহেরিটেন্স থিওরি Nextমডিউল ৪ঃ নিজেকে যাচাই-১

Last updated