نحوه ایجاد و استفاده از قالب های جنگو

الگوهای جنگو نقش مهمی در تعریف ظاهر و احساس صفحات وب شما ایفا می‌کنند و در عین حال جدایی تمیزی از نگرانی‌ها بین منطق، که توسط view‌ها مدیریت می‌شود، و رابط کاربری حفظ می‌کنند.

در این مقاله، با قالب های جنگو، روش تنظیم آن ها و راه های متعدد استفاده از آن ها بیشتر آشنا خواهید شد.

قالب های جنگو چیست؟

را قالب جنگو سیستم برای جداسازی ارائه داده ها از منطق زیربنایی الگوها اساساً فایل‌های HTML هستند که حاوی محتوای پویا هستند و به شما امکان می‌دهند داده‌های ارسال شده از نماهای جنگو را نمایش دهید.

را زبان قالب جنگو (DTL) مکان‌ها و منطق مانند حلقه‌ها و شرطی‌ها را برای درج داده‌های پویا در HTML فراهم می‌کند.

علاوه بر ساده سازی توسعه process، ساختار پروژه شما را هنگام استقرار آن در سرور خصوصی مجازی جنگو (VPS) سازماندهی می کند.

راه اندازی قالب های جنگو

راه اندازی قالب ها در جنگو اصلا سخت نیست. در اینجا یک راهنمای سریع است.

چگونه یک قالب بسازیم

برای ایجاد یک قالب در جنگو، باید یک فایل HTML داخل a ایجاد کنید قالب ها دایرکتوری ساختار دایرکتوری ممکن است به شکل زیر باشد:

myproject/
│
├── myapp/
│   ├── templates/
│   │   └── myapp/
│   │       └── homepage.html
│   └── views.py
│
└── manage.py

در این ساختار، جنگو به‌طور خودکار به دنبال قالب‌ها می‌گردد قالب ها دایرکتوری برنامه شما می‌توانید الگوها را در پوشه‌های خاص برنامه سازماندهی کنید (مانند myapp/homepage.html، اطمینان حاصل کنید که هر برنامه دارای الگوهای خاص خود است.

در اینجا یک نمونه از یک قالب ساده (homepage.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
</head>
<body>
    <h1>Welcome to {{ site_name }}</h1>
    <p>{{ message }}</p>
</body>
</html>

در این قالب، {{ site_name }} و {{ پیام }} مکان‌هایی هستند که با داده‌های پویا ارسال شده از نمای پر می‌شوند.

رندر کردن الگوها در نماها

برای رندر کردن یک الگو، باید آن را با استفاده از Django به view ارسال کنید render() تابع در اینجا نمونه ای از روش رندر کردن است homepage.html الگو با برخی از داده های زمینه در a نمای مبتنی بر عملکرد (FBV):

from django.shortcuts import render

def homepage(request):
    context = {
        'site_name': 'My Django Website',
        'message': 'This is the homepage content!'
    }
    return render(request, 'myapp/homepage.html', context)

در این مثال، render() قالب را ترکیب می کند (homepage.html) با داده های داخل زمینه. زمینه یک فرهنگ لغت حاوی داده هایی است که جنگو در قالب قرار می دهد (سایت_نام و پیام).

هنگامی که یک کاربر از این بازدید می کند page، جایگاهداران {{ site_name }} و {{ پیام }} در قالب با ” جایگزین می شودوب سایت جنگو من” و ”این است homepage محتوا!” به ترتیب همانطور که در زمینه.

استفاده از برچسب ها و فیلترهای قالب

قالب های جنگو نیز پشتیبانی می کنند برچسب های قالب و فیلترها، که به شما امکان می دهد محتوای پویا و منطق را در فایل های HTML خود اضافه کنید.

برچسب های قالب شما را قادر می سازد تا به جای رندر مستقیم مقدار، منطق را در قالب ها، مانند حلقه ها و شرطی ها انجام دهید. به عنوان مثال، کد زیر شامل یک اگر وضعیت:

{% if user.is_authenticated %}
    <p>Welcome back, {{ user.username }}!</p>
{% else %}
    <p>Hello, Guest!</p>
{% endif %}

در همین حال، فیلترهای قالب مقادیر را از متغیرها بگیرید و آن را برای اهداف نمایش تغییر دهید. برای مثال فیلتر زیر تاریخ انتشار مقاله را گرفته و آن را در یک نشان می دهد MMMM/DD/YYY قالب:

<p>Published روی {{ article.published_date|date:"F j, Y" }}</p>

به ارث بردن الگوها

جنگو از وراثت قالب پشتیبانی می کند و به شما این امکان را می دهد که قالب های پایه ای ایجاد کنید که سایر قالب ها بتوانند آن را گسترش دهند. این به ویژه برای حفظ یک طرح بندی ثابت در چندین صفحه، مانند سرصفحه و پاورقی مشترک مفید است.

پیشنهاد می‌کنیم بخوانید:  روش تکثیر صفحات در وردپرس با استفاده از افزونه و دستی

ایجاد یک قالب پایه

ساختار قالب پایه (base.html) مانند سایر قالب ها است. در اینجا یک کد مثال است:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}My Site{% endblock %}</title>
</head>
<body>
    <header>
        <h1>Site Header</h1>
    </header>

    <main>
        {% block content %}
        <!-- Page-specific content goes here -->
        {% endblock %}
    </main>

    <footer>
        <p>Footer Content</p>
    </footer>
</body>
</html>

گسترش یک الگو

برای گسترش قالب پایه، یک الگوی جدید با {% الگو %} برچسب زدن در اینجا یک نمونه کد از یک الگوی فرزند (homepage.html):

{% extends 'base.html' %}

{% block title %}Home Page{% endblock %}

{% block content %}
    <h2>Welcome to the homepage!</h2>
    <p>This is the homepage content.</p>
{% endblock %}

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

از جمله فایل های استاتیک در قالب ها

الگوها همچنین به شما این امکان را می‌دهند که به فایل‌های ثابت (مانند CSS، جاوا اسکریپت یا تصاویر) با استفاده از {% ثابت %} تگ قالب به عنوان مثال، برای گنجاندن یک فایل CSS:

<link rel="stylesheet" type="text/css" href="https://www.hostinger.com/tutorials/{% static"css/style.css' %}">

مطمئن شوید که دایرکتوری های فایل استاتیک خود را به درستی تنظیم کرده اید تنظیماتpy:

STATIC_URL = '/static/'

با استفاده موثر از سیستم قالب جنگو، می‌توانید صفحات وب پویا و مبتنی بر داده ایجاد کنید و یک جدایی تمیز بین منطق و ارائه حفظ کنید.

متغیرهای زمینه در قالب ها

متغیرهای زمینه به شما امکان می‌دهند داده‌ها را از نماهای خود به قالب‌ها برای رندر ارسال کنید. آنها شما را قادر می سازند process داده های پویا که بر اساس تغییر می کنند روی را process از نظر شما برای مثال می توانید یک وب بسازید page که به طور خودکار به روز می شود تا آخرین پست را نشان دهد.

برای استفاده از متغیرهای زمینه، یک جفت کلید-مقدار در فرهنگ لغت نماهای خود اضافه کنید. کلید نام متغیرها را مشخص می کند، در حالی که مقدار داده ای است که می خواهید منتقل کنید.

در این مثال ساده، ما را ایجاد می کنیم آخرین_پست ها و page_title متغیرهای زمینه در homepageدیدگاه را آخرین_پست ها داده ها را از آخرین_پست ها queryset while page_title عبور می کند page عنوان:

from django.shortcuts import render
from .models import Post

def home(request):
    # Query the latest blog posts
    latest_posts = Post.objects.order_by('-published_date')[:5]  # Get the 5 most recent posts
    context = {
        'latest_posts': latest_posts,
        'page_title': 'Home - My Blog',
    }
    return render(request, 'home.html', context)

برای رندر کردن متغیر زمینه در قالب خود، آنها را با نوشتن نام آنها در داخل تگ های نگهدارنده مکان فراخوانی کنید. به عنوان مثال، اگر متغیری به نام دارید داده ها، با استفاده از آن نمایش دهید {{ داده }}.

بیایید مثال کد ساده بالا را در قسمت وارد کنیم home.html قالب کد باید به صورت زیر باشد:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ page_title }}</title>
</head>
<body>
    <h1>Latest Blog Posts</h1>
    <ul>
        {% for post in latest_posts %}
            <li>
                <h2>{{ post.title }}</h2>
                <p>{{ post.content|truncatewords:30 }}</p>  <!-- Show a snippet of the content -->
                <a href="https://www.hostinger.com/tutorials/{% url"post_detail' post.id %}">Read more</a>
            </li>
        {% empty %}
            <li>No posts available.</li>
        {% endfor %}
    </ul>
</body>
</html>

مبتنی بر روی توضیح قبلی ما، کد مثال را ارائه می دهد page_title متغیر چون ما آن را با استفاده از متغیرهایی درج می کنیم. با این حال، ما از تگ های قالب برای فراخوانی استفاده می کنیم آخرین_پست متغیر زمینه و اعمال منطق به process داده ها

در مثال بالا، ما از حلقه برای تکرار در پست‌های واکشی شده استفاده می‌کنیم و داده‌هایی مانند محتوای کوتاه شده، شناسه و عنوان را می‌کشیم.

پیشنهاد می‌کنیم بخوانید:  بایگانی VPS

کار با بلوک های قالب

وب سایت شما ممکن است چندین صفحه با طرح بندی یکسان اما محتوای متفاوت داشته باشد. برای مثال، تگ‌های سر خانه حاوی نام وبلاگ هستند، اما به تغییر می‌یابند درباره من روی تماس page.

به جای ایجاد قالب های مختلف برای هر کدام page، جنگو بلوک هایی را ارائه می دهد که به عنوان یک مکان نگهدار محتوای پویا عمل می کنند. شما می توانید با استفاده از یک تگ الگو مانند زیر ایجاد کنید:

{% block name %}HTML content{% endblock %}

برای استفاده از بلوک ها، حداقل به دو الگو نیاز دارید – یکی برای پایه و دیگری برای محتوای ارثی.

بیایید مثال قبلی خانه و تماس را در نظر بگیریم page. برای شروع، یک را ایجاد کنید base.html قالبی که ساختار اولیه محتوای شما را می دهد. محتوا به شکل زیر است:

<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Default Title{% endblock %}</title>
</head>
</html>

سپس، دو الگوی فرزند ایجاد کنید که باعث گسترش آن شود base.html محتوای فایل ساختار اصلی به شکل زیر است:

<!-- child.html -->
{% extends "base.html" %}
{% block title %}Child Page Title{% endblock %}

جایگزین کنید عنوان صفحه کودک با توجه به اطلاعات منزل و تماس pageعنوان اکنون، view را برای رندر کردن این الگوها تعریف کنید:

# views.py
from django.shortcuts import render

def home(request):
    return render(request, 'home.html')

def about(request):
    return render(request, 'contactinfo.html')

مسیر URL را مشخص کنید که نماهای الگوی فرزند را در آدرس های اینترنتیpy فایل:

# urls.py
from django.urls import path
# import your views
from .views import home, contactinfo

urlpatterns = [
    path('', home, name="home"),
    path('contactinfo/', contactinfo, name="contactinfo"),
]

از آنجایی که ما تنظیم کردیم خانه مسیر خالی است، می توانید قالب را به سادگی با وارد کردن نام دامنه وب سایت خود رندر کنید. در همین حال، محتوای اطلاعات تماس نشان داده می شود domain.com/contactinfo/.

نتیجه گیری

قالب های جنگو محتوای HTML وب سایت شما هستند که داده های پویا را از نماها بارگیری می کنند. آنها محتوا را از منطق جدا می کنند و به شما امکان می دهند کد را راحت تر تغییر دهید یا دوباره از آن استفاده کنید.

فایل های الگو در داخل پوشه قالب های برنامه جنگو شما قرار دارند. برای درج داده های ارسال شده از نماها، از {{ متغیر }} برچسب زدن به عنوان مثال، اگر می خواهید عنوانی را از نما نمایش دهید، اضافه کنید {{ عنوان }}.

برای اعمال منطق به داده های رندر شده، از {% متغیر %} برچسب زدن به عنوان مثال، می توانید از طریق یک متغیر زمینه تکرار کنید و داده های اضافی را واکشی کنید. شما همچنین می توانید استفاده کنید اگر بیانیه به process محتوا

الگوها می توانند با استفاده از بلوک ها محتوا را از فرزند خود به ارث ببرند. برای انجام این کار، درج کنید {% block name %}محتوای HTML{% endblock %} در هر دو قالب پایه و فرزند برای تعیین مکان‌نمای محتوای پویا.

روش استفاده از قالب های جنگو سوالات متداول

زبان قالب جنگو چیست؟

زبان قالب جنگو یک سیستم مبتنی بر متن برای تعریف HTML پویا است. استفاده می کند {{ متغیرها }} برای ارائه داده ها، {% برچسب‌ها %} برای منطق (اگر/برای حلقه ها)، و فیلترهایی مانند {{ ارزش|طول }} برای تبدیل داده ها این به شما امکان می دهد منطق پایتون را از ارائه جدا کنید و در عین حال امنیت را از طریق فرار خودکار حفظ کنید.

چگونه یک قالب را در جنگو رندر کنم؟

در جنگو، یک الگو را با استفاده از render() عملکرد در دیدگاه های شما نحو کد به صورت زیر است: بازگشت رندر(درخواست، ‘template.html’، {‘context’: data}).

چگونه می توانم قالب های جنگو خود را ایمن کنم؟

قالب های جنگو به طور خودکار از طریق فرار از HTML با XSS محافظت می شوند. برای بهبود امنیت، yse {% csrf_token %} در فرم هایی برای حفاظت CSRF، اجتناب کنید {{ var|ایمن }} مگر در موارد ضروری، و داده های حساس را از بافت قالب دور نگه دارید. همچنین، از وراثت قالب عاقلانه استفاده کنید و هرگز ورودی نامعتبر کاربر را مستقیماً به قالب ها منتقل نکنید.