ساخت Homepage

مقدمه

در درس قبل، ما یک ویو ساختیم که یک رشته متنی ساده را به عنوان پاسخ برمی‌گرداند. این روش برای نمایش صفحات وب واقعی مناسب نیست. Django از یک سیستم «تمپلیت» (template) قدرتمند برای جداسازی کد HTML از منطق پایتون استفاده می‌کند. یک تمپلیت، یک فایل متنی است که ساختار یک صفحه HTML را تعریف می‌کند و دارای جایگاه‌هایی (placeholders) برای داده‌های دینامیک است.

در این درس، ما یک صفحه اصلی واقعی برای وبلاگ خود با استفاده از تمپلیت‌های Django خواهیم ساخت.

ایجاد یک تمپلیت

ابتدا، در داخل پوشه اپلیکیشن خود (learning_logs)، یک پوشه جدید به نام templates و در داخل آن، یک پوشه دیگر به نام learning_logs ایجاد کنید. سپس، یک فایل جدید به نام index.html در این مسیر بسازید. ساختار پوشه‌ها باید به شکل زیر باشد:

learning_logs/
└── templates/
    └── learning_logs/
        └── index.html
                    

Django به صورت خودکار در پوشه templates هر اپلیکیشن به دنبال تمپلیت‌ها می‌گردد.

learning_logs/templates/learning_logs/index.html

<p>Learning Log</p>

<p>Learning Log helps you keep track of your learning, for any topic you're
learning about.</p>

رندر کردن تمپلیت از ویو

حالا باید ویو index خود را طوری تغییر دهیم که به جای برگرداندن یک HttpResponse ساده، این تمپلیت HTML را «رندر» (render) کرده و برگرداند.

learning_logs/views.py

from django.shortcuts import render

def index(request):
    """The home page for Learning Log."""
    return render(request, 'learning_logs/index.html')

تابع render دو آرگومان اصلی می‌گیرد: شیء request اصلی، و مسیر تمپلیتی که باید رندر شود. Django این تمپلیت را پیدا کرده، محتوای آن را پردازش و یک پاسخ HTTP کامل حاوی آن HTML را به مرورگر ارسال می‌کند. اگر اکنون سرور را اجرا کرده و صفحه را رفرش کنید، باید محتوای HTML خود را ببینید.

وراثت تمپلیت‌ها (Template Inheritance)

بیشتر وب‌سایت‌ها یک ساختار مشترک (مانند هدر و فوتر) دارند که در تمام صفحات تکرار می‌شود. به جای کپی کردن این ساختار در هر فایل تمپلیت، Django از یک سیستم قدرتمند به نام «وراثت تمپلیت» استفاده می‌کند. ما یک تمپلیت پایه (parent template) می‌سازیم که حاوی ساختار کلی سایت است و سپس تمپلیت‌های فرزند (child templates) تنها بخش‌های منحصر به فرد خود را تعریف می‌کنند.

ایجاد تمپلیت پایه

یک فایل جدید به نام base.html در کنار index.html بسازید.

learning_logs/templates/learning_logs/base.html

<p>
  <a href="{% url 'learning_logs:index' %}">Learning Log</a>
</p>

{% block content %}{% endblock content %}

در این تمپلیت پایه، ما یک تگ block به نام content تعریف کرده‌ایم. این یک جایگاه است که تمپلیت‌های فرزند محتوای خود را در آن قرار خواهند داد.

ارث‌بری از تمپلیت پایه

حالا فایل index.html را طوری تغییر می‌دهیم که از base.html ارث‌بری کند.

learning_logs/templates/learning_logs/index.html

{% extends "learning_logs/base.html" %}

{% block content %}
  <p>Learning Log helps you keep track of your learning, for any topic you're
  learning about.</p>
{% endblock content %}

تگ extends به Django می‌گوید که این تمپلیت از base.html ارث‌بری می‌کند. سپس، با استفاده از تگ block content، محتوای منحصر به فرد این صفحه را در جایگاهی که در تمپلیت والد تعریف شده بود، قرار می‌دهیم.

در این درس، ما با استفاده از سیستم تمپلیت Django، یک صفحه اصلی واقعی برای وب‌سایت خود ساختیم. با استفاده از وراثت تمپلیت، یک ساختار قابل استفاده مجدد و قابل نگهداری برای صفحات خود ایجاد کردیم. در درس بعدی، به «ساخت سایر صفحات اپلیکیشن» خواهیم پرداخت و صفحات دیگری برای نمایش موضوعات و یادداشت‌های فردی ایجاد خواهیم کرد.