در این مطلب کوتاه تلاش می‌کنیم در زمانی کوتاه با Twig Template Engine آشنا شویم.
یک قالب Twig فایلی متنی است که برای تولید هرگونه محتوا( HTML, CSS, Javascript, XML, CSV, LaTeX, … ) به کار می‌رود. عناصر به کار رفته در یک قالب Twig با علامت‌های زیر از بقیه‌ی عناصر محتوا جدا می‌شوند:
- {{ … }}: برای چاپ محتوای یک متغیر یا نتیجه‌ی یک محاسبه به کار می‌رود.
- {% … %}: برای انجام عملیات منطقی به کار می‌رود. مثلا ایجاد حلقه‌ها یا محدوده‌های شرطی با کمک این علامت به انجام می‌رسد.
- {# … #}: برای درج توضیحات درون کد به کار می‌رود.
در ادامه یک قالب حداقلی که برخی اطلاعات پایه را به نمایش می‌گذارد مشاهده می‌کنید. در این قالب از دو متغیر page_title و navigation که از بیرون به قالب ارسال می‌شوند استفاده شده است.
<!DOCTYPE html> <html> <head> <title>{{ page_title }}</title> </head> <body> <h1>{{ page_title }}</h1> <ul id="navigation"> {% for item in navigation %} <li><a href="{{ item.url }}">{{ item.label }}</a></li> {% endfor %} </ul> </body> </html> |
متغیرهای ارسال شده به یک قالب Twig می‌توانند از نوع رشته، آرایه و یا حتی شیء باشند. Twig توانایی تشخیص این انواع را دارد و به شما اجازه می‌دهد با علامت نقطه«.» به صفات این متغیرها دسترسی پیدا کنید. قطعه کد زیر روش نمایش اطلاعات یک متغیر بر اساس نوع آن را نشان می‌دهد.
{# 1. Simple variables #} {# array('name' => 'AMIB') #} {{ name }} {# 2. Arrays #} {# array('user' => array('name' => 'AMIB')) #} {{ user.name }} {# alternative syntax for arrays #} {{ user['name'] }} {# 3. Objects #} {# array('user' => new User('AMIB')) #} {{ user.name }} {{ user.getName }} {# alternative syntax for objects #} {{ user.name() }} {{ user.getName() }} |
پیرایش قالب‌ها
در بیشتر پروژه‌ها هر قالب بخش‌های مشترکی مانند سربرگ و ته‌برگ را با سایر قالب‌ها مشترک است. Twig با پیاده‌سازی مفهوم «ارث بری قالب» این مشکل را برطرف کرده است. این ویژگی به شما اجازه می‌دهد یک قالب عمومی تعریف کنید. این قالب حاوی محدوده‌هایی(Block) است که هر قالب ارث برنده می‌تواند این محدوده‌ها را بازنویسی کند.
قالب hello.html.twig با استفاده از دستور extends مشخص می‌کند که از قالب عمومی layout.html.twig ارث‌بری می‌کند.
{# src/Acme/DemoBundle/Resources/views/Demo/hello.html.twig #} {% extends "AcmeDemoBundle::layout.html.twig" %} {% block title "Hello " ~ name %} {% block content %} <h1>Hello {{ name }}!</h1> {% endblock %} |
قالب layout.html.twig پس از ساده‌سازی به شکل زیر خواهد بود:
{# src/Acme/DemoBundle/Resources/views/layout.html.twig #} <div> {% block content %} {% endblock %} </div> |
تگ‌های {% block %} به Template Engine اعلام می‌کنند که یک قالب فرزند ممکن است این بخش‌ها را بازنویسی کنند.
در مثال بالا قالب hello.html.twig رشته‌ی «Hello AMIB» را جایگزین این بخش می‌کند.
استفاده از تگ‌ها، فیلترها و توابع
یکی از بهترین ویژگی‌های Twig امکان توسعه با استفاده از تگ‌ها، فیلترها و توابع است. به قطعه کد زیر که از فیلترها برای پردازش اطلاعات پیش از نمایش استفاده می‌کند، توجه کنید.
<h1>{{ article.title|trim|capitalize }}</h1> <p>{{ article.content|striptags|slice(0, 1024) }}</p> <p>Tags: {{ article.tags|sort|join(", ") }}</p> <p>Next article will be published on {{ 'next Monday'|date('M j, Y')}}</p> |
برای کسب اطلاعات بیشتر در مورد فیلترها، تگ‌ها و توابع در Twig به مستندات اصلی مراجعه کنید.
درج کردن قالب‌های دیگر
بهترین روش برای اشتراک‌گذاری یک قطعه کد بین چند قالب مختلف، ایجاد یک قالب کوچک است که می‌تواند در قالب‌های دیگر درج شود.
ابتدا قالب embedded.html.twig را ایجاد می‌کنیم.
{# src/Acme/DemoBundle/Resources/views/Demo/embedded.html.twig #} Hello {{ name }} |
فایل index.html.twig را تغییر می‌دهیم تا این قطعه کد را درون خود درج کند.
{# src/Acme/DemoBundle/Resources/views/Demo/hello.html.twig #} {% extends "AcmeDemoBundle::layout.html.twig" %} {# override the body block from embedded.html.twig #} {% block content %} {{ include("AcmeDemoBundle:Demo:embedded.html.twig") }} {% endblock %} |
مطلب پایانی
Twig در عین سادگی قدرتمند است. با کمک ساختارها، محدوده‌ها، قالب‌ها و درج عملگرها، به سادگی می‌توانید به شیوه‌ای منطقی و قالب توسعه قالب خود را سازماندهی کنید.
منبع: مستندات فریم‌ورک سیمفونی
مطلب خوب و جالبی بود
موفق و پیروز باشید
با تشکر
باعث خوشحالی است
بسیار عالی با تشکر .
سپاس.
بسیار عالی و کاربردی