آشنایی با template تگ ها و فیلترهای Django: معرفی معروف ترین ها
پرینت این مقاله
Django یک فریم ورک وب است که به راه های ساده جهت ایجاد HTML پویا نیاز دارد. template تگ ها و فیلترهای Django امکان اضافه نمودن کدهای پویا را فراهم می کنند.
در این آموزش برخی از template تگ ها و فیلترهای Django به شما معرفی خواهند شد.
template تگ و فیلتر چیست؟
template تگ و فیلتر به شما امکان اجرای عملیات مختلف در صفحات HTML را می دهد.
template تگ ها:
template تگ ها مانند توابع و ساختارهای کنترلی می باشند. برای مثال نام یوزر تان Admin است و می بایست صرفا برای یوزر Admin عبارت "You are Admin" نمایش داده شود اما امکان انجام این عمل و اضافه نمودن شرط در کدهای HTML وجود ندارد. با template تگ if، در Django می توانید شرط مد نظرتان را اضافه نمایید.
برخی از تگ های معروف عبارتند از:
1- تگ if
این تگ ها امکان اضافه نمودن شرط به کد HTML را فراهم می کنند.
قطعه کد نمونه در HTML:
{% if name==admin %}
<p> You are Admin</p>
{% endif %}
در قطعه کد فوق اگر name وارد شده Admin باشد، عبارت "You are Admin" را نمایش می دهد.
لازم به ذکر است که ساختار کلی این تگ {% شرط if %} بوده و در انتها حتما می بایست if بسته شده و کد {% endif %} درج گردد.
2- تگ for
تگ for برای ایجاد حلقه استفاده می شود. برای مثال با استفاده از این حلقه می‌توان آیتم‌های یک لیست را درصفحه HTML نمایش داد.
قطعه کد نمونه در HTML:
<ul>
{% for athlete in athlete_list %}
<li>{{ athlete.name }}</li>
{% endfor %}
</ul>
قطعه کد فوق نام تمام ورزشکاران (athlete) از لیست "athlete_list"را نمایش می دهد.
3- تگ url
این تگ برای آدرس دهی پویا و بدون استفاده از نام دامنه استفاده می شود.
<a href="{% url 'app_name:view_name' %}">Link to View</a>
در اینجا app_name:view_name نام الگوی URL است که می خواهید در این بخش قرار گیرد. Django مسیر URL واقعی را در این بخش جایگزین خواهد نمود.
4- تگ extends و block
این دو تگ برای ارث بری استفاده می شوند. می توانید با تگ block یک template پایه ایجاد و با استفاده از extends مقدار block ها را تغییر دهید.
قطعه کد نمونه در HTML با استفاده از block و فایلی با نام base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>{% block title %}My amazing site{% endblock %}</title>
</head>
<body>
<div id="sidebar">
{% block sidebar %}
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
{% endblock %}
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
</html>
در قطعه کد فوق از سه تگ block استفاده شده است و این کد در صفحه سایت، یک لیست با دو المان را نشان می دهد. این block ها به موتور قالب (template engine) اعلام می کند که ممکن است یک template فرزند این مقادیر را در آینده تغییر دهد.
قطعه کد نمونه در HTML با استفاده از extends و فایل base.html:
{% extends "base.html" %}
{% block title %}My amazing blog{% endblock %}
{% block content %}
{% for entry in blog_entries %}
<h2>{{ entry.title }}</h2>
<p>{{ entry.body }}</p>
{% endfor %}
{% endblock %}
template فیلترها:
template فیلترها مقادیر و رفتار متغیر ها را تغییر می دهند. فرمت نوشتار فیلتر ها به صورت زیر می باشد.
{{ value|x }}
value نام متغیر و x نیز template فیلتر شما می باشد.
برخی از فیلترهای معروف عبارتند از:
1- فیلتر date
این فیلتر فرمت تاریخ را بر اساس ساختار تعیین شده، تنظیم می کند.
برخی فرمت ها جهت آشنایی:
|
نمونه خروجی |
توضیحات |
فرمت کاراکترها |
|
'01' تا '31' |
نمایش روزها با 2 عدد و صفر |
d |
|
'1' تا '31' |
نمایش روزها بدون صفر |
j |
|
'Fri' |
نمایش روزهای هفته با 3 حرف |
D |
|
نمونه خروجی |
توضیحات |
فرمت کاراکترها |
|
'01' تا '12' |
نمایش ماه ها با 2 عدد و صفر |
m |
|
'1' تا '12' |
نمایش ماه ها بدون صفر |
n |
|
'Jan' |
نمایش نام ماه ها با 3 حرف |
M |
جدول(2) فرمت برای ماه
|
نمونه خروجی |
توضیحات |
فرمت کاراکترها |
|
'00' تا '99' |
نمایش ماه ها با 2 عدد و صفر |
y |
|
'0001' تا '9999' |
نمایش ماه ها با 4 عدد و صفر |
Y |
|
True یا False |
نمایش کبیسه بودن یا نبودن سال به صورت بولی (Boolean) |
L |
جدول(3) فرمت برای سال
قطعه کد نمونه در HTML:
{{ value|date:"D d M Y" }}
در این قطعه کد value یک متغیر است و date نیز template فیلتر می باشد.
نتیجه این کد به صورت 'Wed 01 Jan 2025' خواهد بود.
2- فیلتر length
این template طول متغیر را بر می گرداند و برای لیست ها و string ها قابل استفاده است.
قطعه کد نمونه در HTML:
{{ value|length }}
اگر value در این مثال ['a', 'b', 'c', 'd'] یا "abcd" باشد، عدد 4 در خروجی نمایش داده می شود.
3- فیلتر default
اگر مقدار متغیر تعریف نشده یا خالی باشد می توانید یک مقدار پیش فرض برای متغیر تان تنظیم نمایید.
قطعه کد نمونه در HTML:
{{ user.bio|default:"No bio available" }}
در قطعه کد فوق اگر user.bio خالی باشد عبارت "No bio available" نمایش داده می شود.
4- فیلتر truncatechars
این فیلتر تعداد کاراکتری که یک string می تواند داشته باشد را محدود می کند.
قطعه کد نمونه در HTML:
{{ value|truncatechars:7 }}
اگر value در قطعه کد فوق "Joel is a dog" باشد، نتیجه به صورت زیر خواهد بود.
"Joel i…"
توجه داشته باشید، در صورتی که تعداد کاراکترها بیش از محدودیت تعیین شده باشد، به جای باقی حروف، "…" قرار می گیرد.
