وراثت قالب Django یک راه راحت برای کاهش نفخ کد فراهم می کند.
یکی از قدرتمندترین ویژگی های جنگو توانایی آن در استفاده مجدد از کد به صورت پویا است. وراثت الگو به اشتراک گذاری کد بین الگوهای والد و فرزند اجازه می دهد. تا حد زیادی تلاش های مضاعف را کاهش می دهد.
جنگو زبان قالب خود را برای ترکیب با HTML طراحی کرده است. اگر قبلاً با کد HTML کار کرده باشید، کار با قالب های جنگو برای شما آسان خواهد بود. سایر زبان های قالب مبتنی بر متن مانند Smarty یا Jinja2 دارای نحو مشابهی هستند.
بیایید با ساختن پروژه جنگو درباره وراثت قالب بیشتر بیاموزیم.
قالب جنگو چیست؟
در جنگو، یک قالب یک فایل متنی است که می تواند هر فرمت مبتنی بر متن، مانند HTML، XML، یا CSV را تولید کند.
تگ‌های قالب جنگو، متغیرها و مقادیر منطقی را در قالب کنترل می‌کنند. تگ ها به جدا کردن منطق برنامه از ارائه الگو کمک می کنند. آنها همچنین به تمیز و منظم نگه داشتن قالب های شما کمک می کنند.
جنگو تگ های داخلی زیادی دارد که شبیه {% tag %} هستند. برچسب ها از بسیاری جهات مفید هستند. آنها می توانند متنی را در خروجی ایجاد کنند، حلقه ها را انجام دهند و اطلاعات را در قالب بارگذاری کنند.
شما از برچسب ها در این پروژه برای نشان دادن وراثت قالب استفاده خواهید کرد.
یک پروژه جنگو ایجاد کنید
برای شروع، یک پروژه جنگو ایجاد کنید. یک برنامه با نام قالب ایجاد کنید. هنگامی که این کار را انجام دادید، آماده ایجاد یک تابع نمایش برای برنامه، یک مسیر URL و الگوهایی برای نشان دادن وراثت الگو هستید.
یک عملکرد View ایجاد کنید
ابتدا یک تابع view ایجاد کنید که قالب ها را رندر کند. در این صورت شما قالب index.html را رندر خواهید کرد. روش رندر را از میانبرهای جنگو وارد کنید. سپس یک تابع view به نام index ایجاد کنید که قالب ایندکس را برمی گرداند و رندر می کند.
from django.shortcuts import render\n# Create your views here.\ndef index(request):\n return render (request,'index.html')
یک مسیر URL ایجاد کنید
در مرحله بعد، یک مسیر URL برای تابع view ایجاد کنید تا الگوها را نمایش دهد. تابع مسیر را از django.urls و تابع view را از فایل views.py وارد کنید. سپس تنظیمات و استاتیک را وارد کنید تا هر تصویر و رسانه ای را که ممکن است در قالب ها داشته باشید رندر کنید.
from django.urls import path\nfrom . import views\nfrom django.conf import settings\nfrom django.conf.urls.static import static\nurlpatterns=[\n path('',views.index,name='index'),\n]\nif settings.DEBUG:\n urlpatterns+=static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
ایجاد قالب
اکنون که مسیر view و URL را دارید، الگوها را ایجاد کنید. برای نشان دادن وراثت الگو، یک base.html به عنوان الگوی والد ایجاد کنید. فایل base.html دارای عناصر کلی است که می‌خواهید با index.html، الگوی فرزند، به اشتراک بگذارید.
{% load bootstrap5 %}\n{% load static %}\n<!DOCTYPE html>\n<html lang="en">\n<head> \n <meta charset="UTF-8">\n <meta http-equiv="X-UA-Compatible" content="IE=edge">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <!-- titles -->\n {% if title %}\n <title> Inherited Templates {{title}}</title>\n {% else %}\n <title> Inherited Templates </title>\n {% endif %}\n {% block styles %}\n {% bootstrap_css %}\n <link rel="stylesheet" href="{% static 'css/style.css' %}">\n {% endblock %}\n</head>\n<body>\n {% include 'navbar.html' %}\n {% block content %} {% endblock %}\n <!-- Bootstrap links -->\n <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>\n</body>\n</html>
ابتدا بوت استرپ و وابستگی های استاتیک را روی قالب base.html بارگذاری کنید. می توانید از چارچوب بوت استرپ با پروژه جنگو خود برای استایل دادن به صفحات HTML استفاده کنید. وابستگی استاتیک بارگیری شده در بالا، دارایی های موجود در پوشه استاتیک را بارگیری می کند.
قالب‌های جنگو به شما امکان می‌دهند تا بیت‌هایی از منطق را که مسئول نمایش محتوا هستند، منتقل کنید. برچسب‌های الگو شامل متنی است که با کاراکترهای “{%” و “%}” احاطه شده است. دستور if/else شرایط موجود در تابع view را بررسی می کند. اگر شرط درست باشد، محتوا را در بلوک اول نمایش می دهد. اگر نادرست باشد، محتوا را در مرحله دوم نمایش می دهد.
فایل base.html همچنین محتویات navbar.html را درست در جایی که تگ‌های قالب را قرار می‌دهید، نمایش می‌دهد. یعنی هر زمان که base.html را گسترش دهید، navbar.html نیز به ارث می رسد. هر الگویی که base.html را گسترش دهد، هر عنصری با تگ {% include %} را به ارث می برد.
هر متنی که با {{}} احاطه شده باشد یک متغیر الگو است. متغیرهای الگو داده‌های پویا هستند که توسط توابع مشاهده ارائه می‌شوند. جنگو همچنین از تگ های بلوکی استفاده می کند که از یک تگ باز مانند {% block content %} و یک برچسب بسته مانند {% endblock %} استفاده می کند.
تگ‌های بلوک به الگوهای فرزند اجازه می‌دهند محتویات الگوهای والد را نادیده بگیرند. در این حالت، index.html می تواند محتویات خود را در ناحیه محصور شده توسط تگ های بلوک جایگزین کند. با سایر اجزای base.html تداخلی نخواهد داشت.
بیایید منطق را روی index.html اعمال کنیم
{% extends 'base.html' %}\n{% block content %}\n<div class="container text-center" style="color: white">\n <h1>I Am The Index Template</h1>\n <p>I inherited Bootstrap and the navbar from base.html</p>\n</div>\n{% endblock %}\n
در قالب index.html، از تگ {% extend %} برای گسترش اجزای base.html استفاده کنید. در داخل تگ های بلوک {% block content %}، همه کدهای خود را بنویسید.
در قالب index.html، یک عنصر H1 و یک پاراگراف دارید. برای فراخوانی متغیرها از تابع view می توانید از تگ های قالب در داخل div ها استفاده کنید.
تست وراثت الگو در مرورگر
اکنون می توانید سرور را اجرا کنید. پس از انجام این کار، در مرورگر بررسی کنید که آیا فایل index.html عناصر base.html را به ارث برده است یا خیر. این شامل پیوندهای بوت استرپ و قالب navbar.html است.
فایل index.html باید سبک های navbar و Bootstrap را از قالب پایه به ارث ببرد. اگر چنین است، شما از وراثت الگو به درستی استفاده کرده اید. بدون آن، باید نوار ناوبری و پیوندهای بوت استرپ را در جایی که نیاز داشتید اضافه کنید.
همچنین، هر تغییری که در base.html ایجاد می‌کنید در تمام قالب‌هایی که به آنها گسترش می‌یابد منعکس می‌شود. این اصل در رسیدگی به خطا مهم است. شما به راحتی می توانید قالب های دارای اشکال را شناسایی کنید.
وراثت الگو یکی از راه‌هایی است که جنگو اصل خودت را تکرار نکن (DRY) پیاده‌سازی می‌کند. توسعه شما را بسیار ساده تر و آسان تر می کند.
چرا باید از وراثت قالب جنگو استفاده کنید؟
وراثت قالب جنگو یکی از پیچیده ترین ویژگی های آن است. درک آن ممکن است کمی طول بکشد، اما زمانی که این کار را انجام دادید، تلاش زیادی برای توسعه صرفه‌جویی می‌کند.
وراثت الگو به شما امکان می دهد کد را بین الگوهای والد و فرزند به اشتراک بگذارید. این تضمین می کند که کدهای تکراری در قالب های خود ننویسید.
وراثت قالب در پروژه های بزرگ جنگو مهم است. در چنین مواقعی برنامه های کاربردی و قالب های زیادی برای طراحی وجود دارد. الگوهای والد به شما کنترل زیادی بر سایر اجزای برنامه می دهد.
با یادگیری سیستم قالب جنگو می توانید از نوشتن کدهای تمیز و قدرتمند لذت ببرید.