آموزش طراحی قالب دروپال 8 - بخش اول | دروپال فارسی؛ آموزش و قالب

با سلام به همه دوستان دروپالی عزیز.
توی این مدت که نسخه 8 دروپال هم منتشر شد ، دوستان دروپالی ما در سایت هاشون خیلی خوب به معرفی امکانات دروپال 8 ، تغییراتش نسبت به دروپال 7 و سایر موارد پرداختند و کار رو به نوعی برای من راحت تر کردند.
دوستانی که با دروپال 7 کار کردن و با قالب مدیریت اون آشنا هستن ، با نصب دروپال 8 خیلی راحت تر می تونن باهاش کار کن چون بسیار راحت و جذاب کار شده است.

مرکز دروپال ایران قصد داره تا در بخش های مختلف آموزشی خودش ، نحوه طراحی یک قالب اختصاصی برای دروپال 8 رو به شما آموزش بده.
شاید یکی از تفاوت های اصلی دروپال 7 و نسبت به دروپال 8 ، نحوه طراحی قالب و کدنویسی اون باشه که ما در این آموزش میخواهیم نکات اولیه مربوط به کدنویسی قالب برای دروپال 8 رو به شما آموزش بدیم.

Twig :

Twig یک موتور قالب (Template Engine) می باشد.استفاده از موتور قالب مزیت های بسیاری داره که به تعدادی از اون ها اشاره داریم : مانند :

- جدا شدن اسکلت و ساختار صفحه از محتوایات اون

- امنیت بالا ، چرا که همه مقادیر قبل از درج در صفحه میتوانند escape شوند.

- عیب یابی سریع تر و راحت تر

- مهم ترین ویژگی هم اینکه برای بخش های مختلف امکان طراحی جداگانه وجود دارد ،که در ادامه موارد گفته شده رو با ذکر مثال توضیح خواهم داد.

عناصر به کار رفته در Twig با علامت های زیر از یکدیگر جدا می شوند :

{{ … }}: برای چاپ محتوای یک متغیر یا نتیجه‌ی یک محاسبه به کار می‌رود.

{% … %}: برای انجام عملیات منطقی به کار می‌رود. مثلا ایجاد حلقه‌ها یا محدوده‌های شرطی با کمک این علامت به انجام می‌رسد.

{# … #}: برای درج توضیحات درون کد به کار می‌رود.

<!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 می‌توانند از نوع رشته،‌ آرایه و یا حتی شیء باشند. 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>

خوب تا اینجا با نحوه نوشتن عناصر در این قالب ،تشخیص نوع داده و قابلیت ارثبری اشنا شدیم.

نکته : موارد گفته شاید به شکل و روش های گوناگونی در دروپال استفاده بشه که در آموزش بعدی به نحوه استفاده از موارد گفته شده در طراحی قالب دروپال 8 خواهیم پرداخت.

آموزش های بعدی :

- معرفی فولدر و فایل های مربوط به قالب هسته در دروپال 8

- معرفی و ایجاد فولدر های مربوط به قالب اختصاصی در دروپال 8

- نحوه نام گذاری فایل های مربوط به قالب

- نحوه فراخوانی بخش های مختلف صفحه نظیر Header ,footer و ....

- ایجاد ارتباط بین بخش های مختلف و ایجاد قابلیت ارث بری

- نحوه فراخوانی ناحیه در دروپال 8

- نحوه نوشتن عبارات شرطی و متغییر ها در قالب

- و....