تگ Block

تگ {% block %} همراه با {% endblock %} برای مشخص کردن بخش‌های قابل تغییر در یک تمپلیت والد استفاده می‌شود. وقتی یک تمپلیت پایه (Base Template) ساخته می‌شود، بخش‌هایی که قرار است توسط تمپلیت‌های فرزند تغییر کنند یا مقدار جدید بگیرند داخل بلاک‌ها قرار می‌گیرند. سپس در تمپلیت فرزند، می‌توان همان بلاک‌ها را بازنویسی (override) کرد و محتوای دلخواه را جایگزین آن‌ها نمود. به این ترتیب ساختار کلی صفحه ثابت می‌ماند، اما محتوای بخش‌های خاص در هر صفحه می‌تواند متفاوت باشد.

{% block blockname %}
    Block Content
{% endblock blockname %}

 

━◦○◦ نکته‌های مهم ◦○◦━

  • ‼ باید توجه داشت که blockname نام بلاک بوده و باید یکتا باشد.
  • ‼ می‌توان چندین بلاک مختلف در یک تمپلیت والد تعریف کرد.
  • ‼ بلاک‌ها قابلیت تو در تو (nested) ندارند.
  • ‼ اگر تمپلیت فرزند بلاکی را بازنویسی نکند، همان محتوای پیش‌فرض داخل بلاک تمپلیت پایه نمایش داده می‌شود.
  • ‼ برای استفاده از محتوای قبلی یک بلاک همراه با محتوای جدید، می‌توان از کلمه کلیدی {{ block.super }} در بلاک فرزند استفاده کرد

tutorial/templates/base.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> {% block title %} Araz.S.X {% endblock title %} </title>
    {% block style %}{% endblock style %}
  </head>
  <body>
    {% block content %}{% endblock content %}
    {% block script %}{% endblock script %}
  </body>
</html>

 

در فایل base.html با استفاده از تگ {% block %} مشخص می‌کنیم که در این بخش فضایی وجود دارد تا قالب‌های فرزند، هنگام ارث‌بری از base.html، محتوای مربوط به همان بلوک (blockname) را در آن قرار دهند. به طور معمول، در این فایل می‌توان یک بلوک برای عنوان صفحه (مانند block title) و یک بلوک دیگر برای محتوای اصلی (مانند block content) تعریف کرد. قالب‌های فرزند هنگام ارث‌بری از base.html، محتوای مورد نیاز خود را در این بلوک‌ها قرار می‌دهند. برای مثال، عنوان صفحه در تگ title به کمک block title بازنویسی می‌شود و محتوای متغیر هر صفحه در ناحیه‌ی block content درج خواهد شد. با این کار ساختار کلی سایت، شامل بخش‌های مشترکی مثل هدر یا توضیحات ثابت، یکسان باقی می‌ماند، اما بخش‌های خاص هر صفحه به‌طور مستقل قابل سفارشی‌سازی است. این روش علاوه بر جلوگیری از تکرار کد، باعث نظم و انعطاف‌پذیری بیشتر در مدیریت قالب‌ها می‌شود.

اکنون یک قالب برای صفحه اصلی ایجاد می‌کنیم که ساختار کلی خود را از فایل base.html به ارث می‌برد و تنها بخش محتوای مخصوص به خودش را جایگزین می‌کند. با {% extends "base.html" %} اعلام می‌کنیم که این قالب فرزند است و از ساختار base.html استفاده می‌کند. در بلوک title، مقدار پیش‌فرض عنوان (یعنی همان block.super) حفظ شده و عبارت Home به آن اضافه شده و در نهایت در بلوک content، محتوای اختصاصی صفحه اصلی نوشته شده که هنگام رندر جایگزین بخش مربوطه در قالب پایه می‌شود.

coreapp/templates/home.html

{% extends "base.html" %}
{% block title %} {{ block.super }} | Home  {% endblock title %} 
{% block content %}
  <h1> Tutorial Home Page </h1>
  <p> page is rendered from <b>"base.html"</b> as BASE & <b>"home.html"</b> as CONTENT Templates </p>
{% endblock content %}

 

حال کافیست با جایگزین کردن 'home.html' به جای 'base.html' در تابع homeFunc() در views.py به نمایش زیر در رابط کاربری دست یابیم

بخش بعدی - پیکربندی Views بخش قبلی - مقدمه