وراثة قوالب فلاسك: إتقان تنظيم قوالب Jinja2

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

ما هي وراثة القوالب؟

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

فكر في الأمر كمخطط لمنزل. القالب الأساسي هو التصميم العام، بما في ذلك الأساس والجدران والسقف. كل غرفة فردية (قالب فرعي) ترث الهيكل الأساسي ولكن يمكن تخصيصها بأرضيات وطلاء وأثاث مختلف.

فوائد وراثة القوالب

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

فهم المفاهيم الأساسية

1. القالب الأساسي

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

مثال على قالب أساسي بسيط (base.html):

    
    
    
    


    

        
My Website
        
    
    

        {% block content %}{% endblock %}
    
    

في هذا المثال، نحدد بنية HTML أساسية مع ترويسة وقائمة تنقل ومنطقة محتوى رئيسية وتذييل. لاحظ علامات {% block %}، التي تحدد الأقسام التي يمكن تجاوزها في القوالب الفرعية.

2. تعريفات الكتل

الكتل هي عناصر نائبة داخل القالب الأساسي يمكن استبدالها أو تعديلها بواسطة القوالب الفرعية. يتم تعريفها باستخدام علامتي {% block %} و {% endblock %}. تسمح لك الكتل بإدخال محتوى معين في أجزاء مختلفة من القالب الأساسي.

في مثال base.html أعلاه، قمنا بتعريف كتلتين:

• title: هذه الكتلة تحدد عنوان مستند HTML.
• content: هذه الكتلة تحدد منطقة المحتوى الرئيسية للصفحة.

3. القوالب الفرعية

ترث القوالب الفرعية القالب الأساسي ويمكنها تجاوز الكتل المحددة في القالب الأساسي. لوراثة قالب أساسي، استخدم علامة {% extends %} في بداية القالب الفرعي.

مثال على قالب فرعي (index.html) يوسع القالب base.html:

{% extends 'base.html' %}

{% block title %}Home - My Website{% endblock %}

{% block content %}
    
Welcome to the Home Page!
    
This is the content of the home page.
{% endblock %}

في هذا المثال، نوسع القالب base.html ونتجاوز كتلتي title و content. يتم تعيين كتلة title إلى "Home - My Website"، ويتم استبدال كتلة content بالمحتوى الخاص بالصفحة الرئيسية.

4. الدالة `super()`

تسمح لك الدالة super() بالوصول إلى محتوى كتلة محددة في القالب الأساسي من داخل قالب فرعي. يكون هذا مفيدًا عندما تريد الإضافة إلى محتوى كتلة أو تعديله دون استبداله بالكامل.

مثال على استخدام super() لإضافة محتوى إلى كتلة content:

{% extends 'base.html' %}

{% block content %}
    {{ super() }}
    
This is additional content added to the base template's content block.
{% endblock %}

في هذا المثال، تُدرج الدالة super() المحتوى الأصلي لكتلة content من القالب base.html، ثم يضيف القالب الفرعي محتواه الخاص أسفله.

تنفيذ وراثة القوالب في فلاسك

لاستخدام وراثة القوالب في فلاسك، تحتاج إلى تنظيم قوالبك في هيكل دليل منطقي وتكوين فلاسك لتحديد موقع قوالبك.

1. هيكل الدليل

هيكل الدليل الشائع لقوالب فلاسك هو كما يلي:

my_project/
    app.py
    templates/
        base.html
        index.html
        about.html
        contact.html
    static/
        style.css
        script.js

في هذا الهيكل، يحتوي دليل templates على جميع قوالب HTML، بما في ذلك القالب الأساسي والقوالب الفرعية. يحتوي دليل static على الملفات الثابتة مثل أوراق أنماط CSS وملفات جافا سكريبت.

2. تكوين فلاسك

بشكل افتراضي، يبحث فلاسك عن القوالب في دليل يسمى templates في نفس الدليل الذي يوجد به تطبيقك. يمكنك تخصيص ذلك عن طريق تعيين السمة template_folder لكائن تطبيق فلاسك.

مثال على تكوين فلاسك لاستخدام مجلد قوالب مخصص:

from flask import Flask, render_template

app = Flask(__name__, template_folder='my_templates')

@app.route('/')
def index():
    return render_template('index.html')

3. عرض القوالب

لعرض قالب في فلاسك، استخدم الدالة render_template(). تأخذ هذه الدالة اسم ملف القالب كوسيطة وتعيد سلسلة HTML المعروضة.

مثال على عرض القالب index.html:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

عند عرض قالب فرعي، يقوم فلاسك تلقائيًا بتضمين القالب الأساسي وتطبيق تجاوزات الكتل المحددة في القالب الفرعي.

أمثلة عملية

مثال 1: مدونة بسيطة

لنقم بإنشاء مدونة بسيطة بقالب أساسي وقوالب فردية لمنشورات المدونة.

base.html:

    
    
    
    


    

        
My Blog
        
    
    

        {% block content %}{% endblock %}
    
    

post.html:

{% extends 'base.html' %}

{% block title %}{{ post.title }} - My Blog{% endblock %}

{% block content %}
    
{{ post.title }}
    
Published on: {{ post.date }}
    
{{ post.content }}
{% endblock %}

في هذا المثال، يوسع القالب post.html القالب base.html ويتجاوز كتلتي title و content بعنوان وتاريخ ومحتوى منشور المدونة. يتم تمرير متغير post إلى القالب من مسار فلاسك.

app.py:

from flask import Flask, render_template

app = Flask(__name__)

posts = [
    {
        'title': 'First Blog Post',
        'date': '2023-10-27',
        'content': 'This is the content of the first blog post.'
    },
    {
        'title': 'Second Blog Post',
        'date': '2023-10-28',
        'content': 'This is the content of the second blog post.'
    }
]

@app.route('/')
def index():
    return render_template('index.html', posts=posts)

@app.route('/post/')
def post(post_id):
    post = posts[post_id]
    return render_template('post.html', post=post)

مثال 2: موقع ويب متعدد اللغات

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

base.html:

  


  
  
{% block content %}{% endblock %}

index_en.html (النسخة الإنجليزية):

{% extends "base.html" %}

{% block title %}Welcome to My Website{% endblock %}
{% block home_link %}Home{% endblock %}
{% block about_link %}About{% endblock %}
{% block content %}
  
Welcome!
  
This is the English version of the homepage.
{% endblock %}

index_fr.html (النسخة الفرنسية):

{% extends "base.html" %}

{% block title %}Bienvenue sur mon site web{% endblock %}
{% block home_link %}Accueil{% endblock %}
{% block about_link %}À propos{% endblock %}
{% block content %}
  
Bienvenue !
  
Ceci est la version française de la page d'accueil.
{% endblock %}

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

أفضل الممارسات

• اجعل القالب الأساسي بسيطًا: يجب أن يحتوي القالب الأساسي فقط على العناصر الأساسية المشتركة عبر جميع الصفحات.
• استخدم أسماء كتل وصفية: اختر أسماء كتل تشير بوضوح إلى الغرض منها.
• نظم قوالبك منطقيًا: اجمع القوالب ذات الصلة معًا في أدلة.
• تجنب الوراثة المتداخلة بعمق: حد من عمق التسلسل الهرمي للوراثة لتجنب التعقيد.
• استخدم الدالة `super()` بحكمة: استخدم الدالة super() فقط عندما تحتاج إلى الإضافة إلى محتوى كتلة من القالب الأساسي أو تعديله.
• فكر في استخدام مكونات القوالب: بالنسبة لمواقع الويب الأكثر تعقيدًا، فكر في تقسيم قوالبك إلى مكونات أصغر قابلة لإعادة الاستخدام. يمكن تحقيق ذلك من خلال التضمينات أو الماكرو في Jinja2، ولكن يجب أن تكمل هذه، لا أن تحل محل، استراتيجية وراثة جيدة.

تقنيات متقدمة

1. التجاوز الشرطي للكتل

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

{% extends 'base.html' %}

{% block content %}
    {% if user.is_authenticated %}
        
Welcome, {{ user.username }}!
        
This is the content for authenticated users.
    {% else %}
        
Welcome!
        
Please log in to access more content.
    {% endif %}
{% endblock %}

2. استخدام الماكرو

ماكرو Jinja2 تشبه الدوال في بايثون. تسمح لك بتعريف مقتطفات قابلة لإعادة الاستخدام من كود HTML يمكن استدعاؤها من داخل قوالبك. يمكن استخدام الماكرو لإنشاء مكونات قوالب مثل عناصر النماذج وقوائم التنقل ومعارض الصور.

مثال على تعريف ماكرو في ملف منفصل (macros.html):

{% macro input(name, type='text', value='') %}
    
{% endmacro %}

مثال على استيراد واستخدام الماكرو في قالب:

{% from 'macros.html' import input %}


    {{ input('username') }}
    {{ input('password', type='password') }}
    Submit

3. مرشحات القوالب

تسمح لك مرشحات القوالب بتعديل مخرجات المتغيرات داخل قوالبك. يوفر Jinja2 عددًا من المرشحات المدمجة، مثل capitalize و lower و upper و date. يمكنك أيضًا تعريف مرشحات مخصصة خاصة بك.

مثال على استخدام مرشح date لتنسيق تاريخ:

Published on: {{ post.date | date('%Y-%m-%d') }}

الخاتمة

تعد وراثة قوالب فلاسك مع Jinja2 تقنية قوية لتنظيم قوالبك، وتعزيز إعادة استخدام الكود، وضمان الاتساق عبر تطبيق الويب الخاص بك. من خلال فهم المفاهيم الأساسية للقوالب الأساسية، وتعريفات الكتل، والقوالب الفرعية، يمكنك إنشاء قوالب جيدة التنظيم وقابلة للصيانة تبسط سير عمل تطوير الويب الخاص بك. تبنى مبدأ (لا تكرر نفسك) DRY واستفد من وراثة القوالب لبناء تطبيقات ويب قوية وقابلة للتطوير.

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