محتوى كتلة Django هو عنصر HTML يستخدم لعرض محتوى ديناميكي من جانغو. يمكن استخدامه لعرض محتوى من نماذج Django، أو من دوال Django، أو من مصادر أخرى.
يظل الهيكل العام لمستند HTML ثابتًا إلى حد ما، بينما قد يتغير المحتوى الموجود داخل الهيكل. و باستخدام محتوى الكتلة ووراثة القالب، من الممكن تحديد قالب HTML الهيكلي مرة واحدة ثم توريثه من تلك القاعدة للقوالب الأخرى. في هذا الدرس، سنلقي نظرة على كيفية تحقيق ذلك.
مجلد القوالب
يمكنك إنشاء مجلد القوالب على جذر المشروع الرئيسي إذا كنت ترغب في مشاركة القالب الأساسي عبر جميع التطبيقات المثبتة لمشروع Django. اما إذا كنت تفضل الحصول على قالب أساسي فريد لكل تطبيق، فيمكنك وضع مجلد القالب داخل مسار التطبيق.
في هذا المثال، نقوم بوضع القالب الأساسي في جذر المشروع. و عند إضافة دليل القالب في جذر المشروع، نحتاج إلى إخبار Django بكيفية العثور على مجلد القوالب في ملف settings.py كما يلي:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
BASE_DIR / 'templates'
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
داخل مجلد القوالب دعنا نضيف ملف base.html.
{% block %}
يتم استخدام علامة block لتحديد الكتلة التي يمكن تجاوزها بواسطة القوالب الفرعية. بمعنى آخر، عندما تحدد كتلة في القالب الأساسي، فإنك تقول أن هذه المنطقة سيتم ملؤها بمحتوى من ملف قالب فرعي مختلف. خذ بعين الاعتبار قالب base.html الذي يحتوي على كتلتين محددتين. واحدة للعنوان، وواحدة للمحتوى.
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 %} Hello World {% endblock title %}</title>
</head>
<body>
{% block content %}{% endblock content %}
</body>
</html>
{% extends %}
بمجرد الإنتهاء من القالب الأساسي، يمكن توسيعه إلى قوالب فرعية أخرى. و طريقة القيام بذلك هي باستخدام الكلمة الأساسية extends. لذا، في ملف Index.html الذي كنا نعمل عليه، يمكننا إضافة تلك العلامة في أعلى الملف.
#goals\templates\goals\index.html
{% extends 'base.html' %}
{% block title %}Goals{% endblock title %}
{% block content %}
<ul>
{% for timeframe in timeframes reversed %} {% if timeframe == 'monthly' %}
<li><a href="{% url 'namedurl' timeframe %}">{{ timeframe|upper }}</a></li>
{% else %}
<li><a href="{% url 'namedurl' timeframe %}">{{ timeframe|capfirst }}</a></li>
{% endif %} {% endfor %}
</ul>
{% endblock content %}
لاحظ أنه في ملف Index.html قمنا بإزالة كافة عناصر HTML الأساسية. لم تعد هناك حاجة إليها لأنه عند تحميل هذه الصفحة، فإنها سترث HTML الموجود في القالب الأساسي.
قمنا أيضًا بإستخدام علامات block لكل من العنوان و المحتوى. حيث سيتم إدخال أي بيانات داخل هذه الكتل ديناميكيًا في تعريفات الكتل التي أنشأناها في قالب base.html.
تعد الوراثة في قوالب جانغو ميزة رائعة خاصة باستخدام العلامتين {% block %}
و {% Extends %}
، و لقد رأينا كيفية تنفيذ ذلك.
كما رأينا أيضًا أنه من الممكن أن يكون لديك أكثر من قالب أساسي. و قد يكون هذا مفيدًا إذا كنت تريد الحصول على بنية HTML مختلفة قليلًا لأجزاء مختلفة من تطبيقك.
اكتشاف المزيد من بايثون العربي
اشترك للحصول على أحدث التدوينات المرسلة إلى بريدك الإلكتروني.