قوالب جانغو

بواسطة /

قوالب جانغو هي ملفات HTML ذات بناء جمل إضافية للسماح باستخدام المتغيرات والحلقات وهياكل التحكم الأخرى.فعندما يستدعي العرض دالة render()، فإنها تقوم بتمرير البيانات إلى القالب ويقوم القالب بإنشاء HTML لعرضه للمستخدم. و هذا مفهوم مشابه جدًا للعديد من أطر الويب MVC وMVT.

يستخدم جانغو الواجهة الخلفية المدمجة لنظام القوالب الخاص به والذي يُسمى Django Template Language أو DTL.

و نظرًا لأن هذا هو نظام القالب الافتراضي الذي يأتي ويستخدمه جانغو ، فهذا هو النظام الذي سنتعرف عليه في هذا الدرس.

بناء جملة قالب جانغو

يتكون بناء جملة قوالب جانغو من ثلاث قطع. و هي المتغيرات والعلامات والمتغيرات مع عوامل التصفية.

  • {{ متغير }} يتم عرض قيمة المتغير عند استخدام اسم المتغير داخل الأقواس المزدوجة المتعرجة.
  • {% tag %} علامات القالب محاطة بأقواس متعرجة مع علامات النسبة المئوية وتستخدم للحلقات، إذا تم إنشاء عناصر أخرى، والعناصر الهيكلية، بالإضافة إلى بعض منطق التحكم.
  • {{variable|filter }} في قوالب جانغو يمكن أن يحتوي المتغير أيضًا على حرف أنبوب بعده لاستخدام مرشح القالب. تأخذ مرشحات القالب سلسلة كمدخل وترجع سلسلة كمخرج.

تعمل عوامل تصفية القالب بطريقة مشابهة للتوجيه في البرمجة النصية لـ Shell. يتم استخدام عوامل التصفية لتنسيقات البيانات مثل تعيين النص في العنوان أو الأحرف الكبيرة.

مثال عن متغير القالب

يمكنك استخدام متغيرات القالب (Template Variables) لعرض قيم محددة داخل القوالب. القيم التي تمررها إلى القوالب يمكن أن تكون متغيرات تم تمريرها من العرض (View) إلى القالب لعرض البيانات. إليك مثال بسيط:

فرضاً أن لديك تطبيق جانغو يتيح للمستخدمين عرض معلومات حول الكتب. لديك عرض (View) ينشئ متغيراً في قالب لعرض عنوان الكتاب واسم المؤلف. هذا هو المثال:

from django.shortcuts import render
from .models import Book  # قم باستيراد نموذج الكتاب الخاص بك

def book_detail(request, book_id):
    # احصل على معلومات الكتاب من قاعدة البيانات
    book = Book.objects.get(id=book_id)

    # قم بإنشاء السياق (context) لنموذج القالب
    context = {
        'book_title': book.title,
        'author_name': book.author,
    }

    return render(request, 'books/book_detail.html', context)

الآن قم بإنشاء نموذج القالب (template) في مجلد القوالب الخاص بتطبيقك (مثل templates/books/book_detail.html) واستخدم متغيرات القالب لعرض البيانات:

<!DOCTYPE html>
<html>
<head>
    <title>{{ book_title }}</title>
</head>
<body>
    <h1>{{ book_title }}</h1>
    <p>المؤلف: {{ author_name }}</p>
</body>
</html>

هنا، نقوم بتمرير book_title و author_name كمتغيرات قالب من العرض إلى النموذج (template)، وبالتالي يتم عرض اسم الكتاب واسم المؤلف في الصفحة النهائية عندما يتم زيارة عرض book_detail في التطبيق جانغو.

كيفية تكرار البيانات في قوالب جانغو

لتكرار البيانات في قوالب Django، يمكنك استخدام حلقة التكرار for والقوالب for تستخدم لعرض مجموعة من البيانات بشكل متكرر. إليك كيفية القيام بذلك:

فرضًا أن لديك نموذج Django وتريد عرض قائمة من العناصر في قالب HTML. قد يكون لديك طريقتين للقيام بذلك:

  1. استخدام {% for %} loop: في القالب الخاص بك، يمكنك استخدام تعبير {% for %} لتكرار عبر العناصر في قائمة ما. على سبيل المثال، إذا كان لديك نموذج MyModel وتريد عرض العناصر فيه، يمكنك القيام بذلك كالتالي:
   <ul>
     {% for item in my_model_list %}
       <li>{{ item }}</li>
     {% endfor %}
   </ul>

هذا سيكرر عبر my_model_list وسيقوم بعرض كل عنصر في القائمة داخل علامات <li>.

  1. استخدام الفلترة: يمكنك أيضًا استخدام الفلترة for لتحقيق نفس الغرض. مثلاً:
   &lt;ul>
     {% for item in my_model_list|slice:":5" %}
       &lt;li>{{ item }}&lt;/li>
     {% endfor %}
   &lt;/ul>

في هذا المثال، تم استخدام الفلترة slice لعرض أول 5 عناصر في القائمة.

تذكر أنه يمكنك ضبط التكرار حسب احتياجاتك والبيانات التي تريد عرضها.

علامة URL

في جانغو، يمكنك استخدام العلامة {% url %} لإنشاء روابط URL داخل قوالبك. هذه العلامة تسمح لك بإنشاء روابط ديناميكية تشير إلى عناوين URL معينة بدلاً من كتابة العناوين URL مباشرة في قوالبك. هذا يجعل التطبيق أكثر قابلية للصيانة ويسهل تغيير هيكل العناوين الخاصة بك دون الحاجة إلى تعديل العديد من أماكن القالب.

هنا كيفية استخدام العلامة {% url %} في قوالب جانغو:

&lt;a href="{% url 'اسم-عرض-المسار' متغير1 متغير2 %}">نص الرابط&lt;/a>

حيث:

  • 'اسم-عرض-المسار' هو اسم عرض المسار الذي تريد ربط الرابط به. يمكنك تحديده في ملف التكوين urls.py الخاص بتطبيقك.
  • متغير1 و متغير2 هي المتغيرات الإضافية إذا كان المسار يتوقع استلامها. إذا لم يتوقع المسار أي متغيرات، يمكن ترك هذا المجال فارغًا.

على سبيل المثال، إذا كان لديك مسار بالاسم “my_view” في ملف التكوين urls.py الخاص بتطبيقك، يمكنك إنشاء رابط لهذا المسار في قالبك على النحو التالي:

&lt;a href="{% url 'my_view' %}">الذهاب إلى صفحة My View&lt;/a>

هذا سيقوم بإنشاء رابط يشير إلى عنوان URL الخاص بـ “my_view” في تطبيقك.

مرشحات القالب

يُستخدم مصطلح “مرشحات القالب” للإشارة إلى الدوال التي تُستخدم لتعديل أو معالجة البيانات داخل القوالب قبل عرضها للمستخدم. يمكن استخدام المرشحات للقوالب لتنظيم وتخصيص كيفية عرض المعلومات للمستخدم في صفحات ويب جانغو.

إليك بعض الأمثلة على كيفية استخدام مرشحات القالب في Django:

  1. {{ variable|filter }}: يمكنك استخدام المرشحات في وضع العرض في القوالب لتنسيق المتغيرات قبل عرضها. على سبيل المثال:
   {{ my_text|lower }}  # سيقوم هذا بتحويل النص إلى حروف صغيرة.
   {{ my_date|date:"Y-m-d" }}  # سيقوم هذا بعرض التاريخ بتنسيق معين.
  1. إنشاء مرشح مخصص: يمكنك إنشاء مرشح مخصص لتنفيذ وظائف معالجة مخصصة. يتعين عليك إنشاء دلة بايثون تقوم بتنفيذ المرشح وثم استخدامه في القالب. على سبيل المثال:
   from django import template

   register = template.Library()

   @register.filter
   def my_custom_filter(value):
       # قم بتنفيذ المعالجة المخصصة هنا
       return processed_value

ثم في القالب:

   {{ my_text|my_custom_filter }}
  1. تسلسلات المرشحات: يمكنك أيضًا تسلسل مرشحات متعددة معًا لتطبيق معالجة متعددة على نفس المتغير. على سبيل المثال:
   {{ my_text|lower|linebreaksbr }}  # يقوم بتحويل النص إلى حروف صغيرة ثم يحول الفواصل إلى علامات &lt;br>

هذه أمثلة بسيطة على كيفية استخدام مرشحات القالب في جانغو. يمكنك أيضًا البحث عن مرشحات مدمجة معه والمرشحات المتوفرة في مكتبات وإضافات مختلفة لتخصيص عمليات معالجة البيانات داخل القوالب.

وراثة قالب جانغو

في جانغو، يمكن أن ترث القوالب بعضها البعض. هذا يعني أنه يمكنك إنشاء قالب أساسي يحتوي على كل المحتوى والسلوك الأساسيين، ثم إنشاء قوالب فرعية ترث من هذا القالب وتضيف محتوى أو سلوكًا إضافيًا.

طريقة الوراثة

لوراثة قالب في جانغو، تحتاج إلى تحديد سمة extends في تعريف القالب. تشير هذه السمة إلى اسم القالب الأساسي الذي تريد أن يرث منه القالب الفرعي.

على سبيل المثال، لنفترض أن لديك قالبًا أساسيًا يسمى base.html. يحتوي هذا القالب على المحتوى والسلوك الأساسيين لموقعك على الويب.

{% extends 'base.html' %}

{% block content %}
    هذا هو المحتوى الأساسي للموقع.
{% endblock %}

يمكنك الآن إنشاء قالب فرعي يسمى home.html يرث من القالب الأساسي.

{% extends 'base.html' %}

{% block content %}
    هذا هو المحتوى الإضافي للصفحة الرئيسية.
{% endblock %}

سيؤدي هذا إلى إنشاء صفحة ويب تحتوي على المحتوى الأساسي للموقع بالإضافة إلى المحتوى الإضافي الذي أضفته في القالب الفرعي.

استخدام سمة block

يمكنك استخدام سمة block في قالب أساسي لتحديد مناطق في القالب يمكن للقوالب الفرعية استبدالها بمحتوىها الخاص.

على سبيل المثال، يمكنك استخدام سمة block لتحديد منطقة في القالب الأساسي حيث تريد أن يعرض القالب الفرعي المحتوى الفريد الخاص به.

{% extends 'base.html' %}

{% block content %}
    هذا هو المحتوى الأساسي للموقع.

    {% block additional_content %}
        هذا هو المحتوى الإضافي الذي يمكن للقوالب الفرعية استبداله.
    {% endblock %}
{% endblock %}

يمكنك الآن إنشاء قالب فرعي يسمى home.html يرث من القالب الأساسي ويستخدم سمة block لاستبدال المحتوى الإضافي.

{% extends 'base.html' %}

{% block additional_content %}
    هذا هو المحتوى الإضافي للصفحة الرئيسية.
{% endblock %}

سيؤدي هذا إلى إنشاء صفحة ويب تحتوي على المحتوى الأساسي للموقع بالإضافة إلى المحتوى الإضافي الذي أضفته في القالب الفرعي.

ملاحظات

  • يمكنك أن ترث قالب من أكثر من قالب واحد.
  • إذا ورثت قالب من أكثر من قالب واحد، فسيتم تحديد المحتوى من القالب الأخير في سلسلة الوراثة.
  • يمكنك استخدام سمة block لتحديد مناطق في القالب يمكن للقوالب الفرعية استبدالها بمحتوىها الخاص.

أمثلة

فيما يلي بعض الأمثلة على استخدام وراثة القالب في جانغو:

  • يمكنك استخدام وراثة القالب لإنشاء قالب أساسي يحتوي على جميع المحتوى والسلوك الأساسيين لموقعك على الويب. ثم يمكنك إنشاء قوالب فرعية ترث من هذا القالب وتضيف محتوى أو سلوكًا إضافيًا لكل صفحة أو قسم على موقعك.
  • يمكنك استخدام وراثة القالب لإنشاء قالب أساسي يحتوي على جميع المحتوى والسلوك المشترك بين عدة قوالب. ثم يمكنك إنشاء قوالب فرعية ترث من هذا القالب وتضيف محتوى أو سلوكًا فريدًا لكل قالب.
  • يمكنك استخدام وراثة القالب لإنشاء قالب أساسي يحتوي على جميع المحتوى والسلوك الذي يمكن استخدامه في مجموعة متنوعة من القوالب. ثم يمكنك إنشاء قوالب فرعية ترث من هذا القالب وتضيف محتوى أو سلوكًا محددًا لكل قالب.

استخدام Bootstrap في قالب Django

استخدام Bootstrap في قالب جانغو هو طريقة سهلة لإنشاء مواقع ويب جذابة وسهلة الاستخدام. Bootstrap عبارة عن إطار عمل CSS و JavaScript مفتوح المصدر يوفر مجموعة من المكونات والأدوات التي يمكن استخدامها لإنشاء تخطيطات وتصميمات ويب متسقة.

للاستخدام Bootstrap في قالب جانغو، تحتاج إلى تثبيت حزمة django-bootstrap-v5. يمكن القيام بذلك باستخدام الأمر التالي:

pip install django-bootstrap-v5

بمجرد تثبيت الحزمة، يمكنك إضافة Bootstrap إلى قالب جانغو عن طريق إضافة التبعيات التالية إلى ملف settings.py الخاص بك:

INSTALLED_APPS = [
    ...
    'bootstrap5',
]

بعد ذلك، يمكنك استخدام Bootstrap في قوالب جانغو عن طريق استيراد المكونات والأدوات من مكتبة Bootstrap. على سبيل المثال، لإنشاء تخطيط ويب باستخدام Bootstrap، يمكنك استخدام العنصر container وعنصر row وعنصر col.

{% extends 'base.html' %}

{% block content %}
&lt;div class="container">
    &lt;div class="row">
        &lt;div class="col-md-12">
            ...
        &lt;/div>
    &lt;/div>
&lt;/div>
{% endblock %}

لمزيد من المعلومات حول استخدام Bootstrap في جانغو، يمكنك الرجوع إلى الوثائق الرسمية.

فيما يلي بعض الأمثلة على كيفية استخدام Bootstrap في قالب Django:

  • إنشاء تخطيط ويب: يمكنك استخدام العناصر container وrow وcol لإنشاء تخطيط ويب مقسم إلى أعمدة.
  • إنشاء نموذج تسجيل دخول: يمكنك استخدام المكونات form وinput وbutton لإنشاء نموذج تسجيل دخول.
  • إنشاء قائمة منسدلة: يمكنك استخدام المكونات select وoption لإنشاء قائمة منسدلة.
  • إنشاء شريط تقدم: يمكنك استخدام المكونات progress وprogress-bar لإنشاء شريط تقدم.

فيما يلي بعض النصائح لاستخدام Bootstrap في قالب Django:

  • استخدم المكونات والأدوات المناسبة: هناك العديد من المكونات والأدوات المتاحة في Bootstrap. تأكد من استخدام المكونات والأدوات المناسبة لاحتياجاتك.
  • قم بتخصيص Bootstrap حسب احتياجاتك: يمكنك تخصيص Bootstrap حسب احتياجاتك عن طريق تغيير الألوان والخطوط والتخطيطات.
  • استخدم Bootstrap بشكل صحيح: تأكد من استخدام Bootstrap بشكل صحيح لتجنب أي أخطاء.

كيفية إضافة ملفات ثابتة

إذا كنت ترغب في إضافة ملفات ثابتة (مثل صور أو ملفات CSS) إلى مشروع Django، يمكنك استخدام STATICFILES_DIRS و STATIC_URL. إليك الخطوات الأساسية لإضافة ملفات ثابتة:

  1. إنشاء دليل لملفات الوسائط الثابتة:
    قم بإنشاء دليل لملفات الوسائط الثابتة في مجلد مشروع Django الخاص بك. يمكنك تسميته بما تريد، مثل “static” أو “media”. يجب أن يتم إنشاء هذا الدليل في مجلد المشروع الرئيسي.
   myproject/
   ├── myapp/
   ├── static/  # أو أي اسم تختاره
   └── myproject/
  1. تكوين الإعدادات:
    انتقل إلى ملف الإعدادات settings.py في مشروع Django الخاص بك وأضف الإعدادات التالية:
   # settings.py

   # تحديد المجلد الذي تم فيه إنشاء ملفات الوسائط الثابتة
   STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

   # تحديد URL لملفات الوسائط الثابتة
   STATIC_URL = '/static/'

تأكد من أن الإعداد BASE_DIR معرف في ملف settings.py. إذا لم يكن معرفًا بالفعل، يمكنك استيراده من django.conf.

  1. إضافة ملفات ثابتة:
    الآن، يمكنك نقل ملفاتك الثابتة إلى الدليل الذي أنشأته في الخطوة 1. مثلاً، إذا كنت ترغب في إضافة ملف CSS يسمى “styles.css”، يجب وضعه في الدليل “static” الذي أنشأته.
   myproject/
   ├── myapp/
   ├── static/
   │   └── styles.css
   └── myproject/
  1. ربط ملفات الوسائط الثابتة في القوالب:
    لربط ملفات الوسائط الثابتة في قوالب Django، يمكنك استخدام توجيهات {% static %}. مثلاً:
   &lt;!DOCTYPE html>
   &lt;html>
   &lt;head>
       &lt;link rel="stylesheet" type="text/css" href="{% static 'styles.css' %}">
   &lt;/head>
   &lt;body>
       ...
   &lt;/body>
   &lt;/html>

هذا سيقوم بتضمين ملف “styles.css” في صفحة HTML الخاصة بك.

اكتشاف المزيد من بايثون العربي

اشترك للحصول على أحدث التدوينات المرسلة إلى بريدك الإلكتروني.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Scroll to Top

اكتشاف المزيد من بايثون العربي

اشترك الآن للاستمرار في القراءة والحصول على حق الوصول إلى الأرشيف الكامل.

Continue reading