تصور کنید وب‌سایتی طراحی کرده‌اید که قرار است به کاربران مختلف، پیام‌های متفاوتی نمایش دهد؛ مثلاً به مدیر سایت عبارت “خوش آمدید ادمین” را نشان دهد و برای کاربران عادی، محتوای دیگری را به تصویر بکشد. HTML به تنهایی یک زبان استاتیک است و توانایی درک این تفاوت‌ها را ندارد. اینجاست که جنگو (Django) با معرفی ابزارهای قدرتمندی به نام «تگ‌ها» و «فیلترها» وارد میدان می‌شود. این ابزارها به ما اجازه می‌دهند به صفحات بی‌روح HTML، هوش و پویایی تزریق کنیم و بر اساس داده‌های موجود، چیدمان سایت را در لحظه تغییر دهیم. در واقع، این تگ‌ها و فیلترها هستند که مرز میان یک صفحه ساده و یک وب‌اپلیکیشن حرفه‌ای را تعیین می‌کنند.
نکته اول: تگ if؛ هوشمندسازی صفحات بر اساس منطق کاربر
تگ if یکی از اساسی‌ترین ابزارهای کنترلی در جنگو است که اجازه می‌دهد منطق برنامه‌نویسی را مستقیماً وارد ساختار HTML کنیم. با استفاده از این تگ، می‌توان نمایش بخش‌های مختلف صفحه را مشروط کرد. این قابلیت نه‌تنها برای بهبود تجربه کاربری (UX) ضروری است، بلکه از جنبه امنیتی نیز اهمیت دارد؛ چرا که می‌توان محتوای حساس را فقط به افراد مجاز نمایش داد.
ساختار کلی این تگ با {% if %} شروع شده و با {% endif %} خاتمه می‌یابد:
{% if name == 'admin' %}
<p>You are Admin</p>
{% endif %}
در این مثال، عبارت داخل تگ تنها زمانی نمایش داده می‌شود که متغیر نام برابر با “admin” باشد. به قول معروف:
“Django یک فریم ورک وب است که به راه های ساده جهت ایجاد HTML پویا نیاز دارد.”
نکته دوم: قدرت ارث‌بری با extends و block؛ پایان تکرارهای خسته‌کننده
یکی از چالش‌های بزرگ در توسعه وب، تکرار کدهای مشابه (مانند هدر، فوتر و سایدبار) در تمام صفحات است. جنگو با استفاده از تگ‌های extends و block مفهوم “ارث‌بری تمپلیت” را معرفی کرده است. این رویکرد دقیقاً مطابق با اصل DRY (تکرار نکردن کد) است.
شما یک فایل پایه (مثلاً base.html) می‌سازید و بخش‌های متغیر را با block مشخص می‌کنید:
فایل base.html:
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}My amazing site{% endblock %}</title>
</head>
<body>
<div id="sidebar">
{% block sidebar %}
<ul><li><a href="/">Home</a></li></ul>
{% endblock %}
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
</html>
سپس در صفحات فرزند، با استفاده از extends آن ساختار را به ارث می‌برید و فقط محتوای بلوک‌های خاص را تغییر می‌دهید:
فایل child.html:
{% extends "base.html" %}
{% block title %}My amazing blog{% endblock %}
{% block content %}
<h2>Welcome to my blog!</h2>
{% endblock %}
نکته سوم: تگ url؛ خداحافظی با آدرس‌های سخت‌گیرانه (Hardcoded)
نوشتن آدرس‌های مستقیم (مانند /contact-us/) در کدهای HTML کار پرخطری است؛ زیرا با کوچک‌ترین تغییر در ساختار آدرس‌ها در فایل urls.py تمام لینک‌های سایت شما از کار می‌افتند. تگ url این مشکل را با آدرس‌دهی پویا حل می‌کند.
به جای نوشتن مستقیم مسیر، کافی است نام الگو (view_name) را به تگ بدهید: <a href="{% url 'app_name:view_name' %}">Link to View</a>
با این کار، جنگو به صورت خودکار مسیر واقعی URL را جایگزین می‌کند. این یعنی نگهداری سایت در آینده بسیار آسان‌تر خواهد بود، زیرا آدرس‌ها فقط در یک نقطه (تنظیمات URL) مدیریت می‌شوند.
نکته چهارم: فیلترهای هوشمند؛ زیبایی در جزئیات نمایش
فیلترها وظیفه تغییر نمایش متغیرها را بر عهده دارند تا داده‌های خام به شکلی کاربرپسند ارائه شوند. دو فیلتر بسیار حیاتی برای ظاهر سایت عبارتند از:
• فیلتر date: این فیلتر تاریخ‌های سیستم را به فرمت‌های خوانا تبدیل می‌کند. برای مثال با کد {{ value|date:"D d M Y" }} خروجی به صورت Wed 01 Jan 2025 نمایش داده می‌شود.
◦ پارامترهای پرکاربرد:
• فیلتر truncatechars: این فیلتر برای تمیز نگه داشتن ظاهر سایت در باکس‌های خبری یا لیست‌ها عالی است. اگر متنی طولانی باشد، آن را کوتاه کرده و علامت “…” قرار می‌دهد.
◦ مثال: اگر مقدار متغیر “Joel is a dog” باشد، استفاده از {{ value|truncatechars:7 }} خروجی را به صورت “Joel i…” نمایش می‌دهد.
نکته پنجم: فیلتر default؛ مدیریت حرفه‌ای فیلدهای خالی
در دنیای واقعی، داده‌ها همیشه کامل نیستند. ممکن است کاربری بیوگرافی خود را خالی گذاشته باشد یا فیلدی در پایگاه داده مقدار None یا رشته خالی داشته باشد. نمایش یک فضای خالی یا واژه “None” در سایت، ظاهر آن را غیرحرفه‌ای می‌کند. فیلتر default راهکار جنگو برای این چالش است:
{{ user.bio|default:"No bio available" }}
این ابزار کوچک تضمین می‌کند که سایت شما همیشه پر و صیقل‌خورده به نظر برسد، حتی زمانی که داده‌ای برای نمایش وجود ندارد.
گام بعدی در مسیر توسعه‌دهنده حرفه‌ای
درک عمیق تگ‌ها و فیلترهای جنگو، کلید طلایی برای ساختاردهی به اطلاعات و ایجاد رابط کاربری منعطف است. این ابزارها به شما اجازه می‌دهند بدون درگیر شدن با پیچیدگی‌های لایه منطق (Backend) در زمان طراحی قالب، کنترل کاملی بر نحوه ارائه داده‌ها داشته باشید.
در جدول های زیر تمپلیت تگ ها و فیلتر های جنگو همراه با توضیحات نوشته شده که امکان درک و استفاده رو براتون به خوبی فراهم میکنه:
| نام فیلتر | توضیحات |
|---|---|
| add | یک مقدار مشخص را اضافه می‌کند. [۱] |
| addslashes | قبل از کاراکترهای کوتیشن (quote)، بک‌اسلش اضافه می‌کند تا رشته‌ها Escape شوند. [۱] |
| capfirst | اولین حرف رشته را بزرگ می‌کند. [۱] |
| center | مقدار را در مرکز یک عرض مشخص قرار می‌دهد. [۱] |
| cut | کاراکتر یا عبارت مشخص شده را حذف می‌کند. [۱] |
| date | تاریخ را با فرمت مشخص شده برمی‌گرداند. [۱] |
| default | اگر مقدار False باشد، یک مقدار پیش‌فرض را برمی‌گرداند. [۱] |
| default_if_none | اگر مقدار None باشد، یک مقدار پیش‌فرض را برمی‌گرداند. [۱] |
| dictsort | یک دیکشنری را بر اساس مقدار داده شده مرتب می‌کند. [۱] |
| divisibleby | اگر مقدار بر عدد مشخص شده بخش‌پذیر باشد، True برمی‌گرداند. [۱] |
| escape | کدهای HTML را از یک رشته Escape می‌کند. [۱] |
| filesizeformat | یک عدد را به فرمت اندازه فایل (مثلاً KB, MB) تبدیل می‌کند. [۱] |
| first | اولین آیتم یک شیء را برمی‌گرداند. [۱] |
| floatformat | اعداد اعشاری را تا تعداد مشخصی رقم اعشار گرد می‌کند. [۱] |
| join | آیتم‌های یک لیست را به یک رشته تبدیل می‌کند. [۱] |
| last | آخرین آیتم یک شیء را برمی‌گرداند. [۱] |
| length | تعداد آیتم‌های یک شیء یا تعداد کاراکترهای یک رشته را برمی‌گرداند. [۱] |
| lower | تمام حروف متن را به حروف کوچک تبدیل می‌کند. [۱] |
| make_list | یک مقدار را به یک شیء لیست تبدیل می‌کند. [۱] |
| pluralize | اگر مقدار عددی ۱ نباشد، یک ‘s’ به انتهای کلمه اضافه می‌کند. [۱] |
| random | یک آیتم تصادفی از یک شیء را برمی‌گرداند. [۱] |
| safe | متن را به عنوان متنی امن علامت‌گذاری می‌کند که نباید HTML آن Escape شود. [۱] |
| slugify | متن را به یک عبارت مناسب برای آدرس (Slug) تبدیل می‌کند (حروف کوچک و خط تیره). [۱] |
| striptags | تگ‌های HTML را از متن حذف می‌کند. [۱] |
| time | زمان را با فرمت مشخص شده برمی‌گرداند. [۱] |
| title | حرف اول هر کلمه را بزرگ و بقیه را کوچک می‌کند. [۱] |
| truncatechars | رشته را تا تعداد مشخصی کاراکتر کوتاه می‌کند. [۱] |
| truncatewords | رشته را تا تعداد مشخصی کلمه کوتاه می‌کند. [۱] |
| upper | تمام حروف متن را به حروف بزرگ تبدیل می‌کند. [۱] |
| wordcount | تعداد کلمات موجود در یک متن را برمی‌گرداند. [۱] |
| yesno | مقادیر منطقی (Boolean) را به مقادیر مشخص شده تبدیل می‌کند. [۱] |
| نام تگ | توضیحات |
|---|---|
| autoescape | مشخص می‌کند که آیا حالت autoescape (فرار خودکار کاراکترها) فعال باشد یا خیر. [۱] |
| block | یک بخش بلوک (Block) را برای ارث‌بری در قالب‌ها تعریف می‌کند. [۱] |
| comment | یک بخش توضیحات (Comment) را مشخص می‌کند که در خروجی نمایش داده نمی‌شود. [۱] |
| csrf_token | از فرم‌ها در برابر حملات Cross Site Request Forgeries محافظت می‌کند. [۱] |
| cycle | محتوایی را برای استفاده در هر چرخه از یک حلقه مشخص می‌کند. [۱] |
| debug | اطلاعات مربوط به خطایابی (Debugging) را نمایش می‌دهد. [۱] |
| extends | یک قالب والد (Parent Template) را برای ارث‌بری مشخص می‌کند. [۱] |
| filter | محتوا را قبل از بازگرداندن، فیلتر می‌کند. [۱] |
| firstof | اولین متغیری که خالی نیست را برمی‌گرداند. [۱] |
| for | یک حلقه for را برای پیمایش تعریف می‌کند. [۱] |
| if | یک دستور شرطی if را مشخص می‌کند. [۱] |
| ifchanged | در حلقه‌ها استفاده می‌شود و تنها در صورتی یک بلوک را خروجی می‌دهد که مقدار آن نسبت به تکرار قبلی تغییر کرده باشد. [۱] |
| include | یک قالب یا محتوای خارجی را در قالب فعلی بارگذاری می‌کند. [۱] |
| load | تگ‌های قالب را از یک کتابخانه دیگر بارگذاری می‌کند. [۱] |
| lorem | متن‌های تصادفی (مانند Lorem Ipsum) تولید می‌کند. [۱] |
| now | تاریخ یا زمان فعلی را در خروجی نمایش می‌دهد. [۱] |
| regroup | یک لیست از اشیاء را بر اساس یک ویژگی مشترک گروه‌بندی می‌کند. [۱] |
| resetcycle | در چرخه‌ها (cycles) استفاده می‌شود و چرخه را به حالت اول برمی‌گرداند. [۱] |
| spaceless | فواصل خالی (Whitespace) بین تگ‌های HTML را حذف می‌کند. [۱] |
| templatetag | یک تگ قالب مشخص شده را به عنوان خروجی برمی‌گرداند. [۱] |
| url | بخش مربوط به آدرس مطلق (URL) را برمی‌گرداند. [۱] |
| verbatim | محتویاتی را مشخص می‌کند که نباید توسط موتور قالب پردازش یا رندر شوند. [۱] |
| widthratio | یک مقدار عرض را بر اساس نسبت بین یک مقدار داده شده و حداکثر مقدار محاسبه می‌کند. [۱] |
| with | یک متغیر را برای استفاده در داخل یک بلوک مشخص تعریف می‌کند. [۱] |
سوال تامل‌برانگیز: به نظر شما کدام یک از این ابزارها می‌تواند بیشترین زمان را در پروژه بعدی شما صرفه‌جویی کند: مدیریت هوشمند منطق‌های شرطی با تگ if یا استفاده از ساختار قدرتمند ارث‌بری تمپلیت‌ها؟
Discuss This Article with the Community
Have a question, a different approach, or something you built after reading this? Share it on the forum or join the Discord, we'd love to hear from you.