آموزش طراحی قالب دروپال 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

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

- و....

mohamad.arabshahi
محمد عربشاهی - در حال یادگیری
مرکز دروپال ايران

راه های ارتباط با ما

آدرس : دفتر شهریار : شهرک وائین ، بعثت 5 نبش سپیدار 10 پلاک 26

تلفن : 09370977406 - 09384363798

ایمیل : drupalcenter.ir@gmail.com

ارتباط با مدیر سایت از طریق تلگرام

logo-samandehi

مرکز دروپال ایران بزرگترین وب سایت  آموزش دروپال در کشور ، در مهر ماه سال 1388 به طور رسمی فعالیت خود را در زمینه وب و دنیای دیجیتال آغاز کرده است. مجموعه مرکز دروپال ایران شامل « آموزش های تصویری » ، « معرفی جدیدترین ماژول ها » ، « ترجمه مقالات دروپالی روز دنیا » ، « طراحی قالب دروپال» و « خبرهای دنیای دروپال» می باشد.این مجموعه به همراه گروه فنی خود و به  پشتوانه کاربران فعال و متعهد ، با  در نظر داشتن چشم اندازی برای آینده نزدیک ، قصد دارد تا به معرفی و آموزش  هرچه بیشتر و بهتر هسته قدرتمند و دوست داشتنی دروپال ،  به روش های مختلف در زمینه های گوناگون بپردازد تا در کنار کاربران خود به موفقیت های هرروز خود بیفزاید. در همین راستا قصد داریم تا بصورت تخصصی و حرفه ای مباحث مختلف دروپال را با کوچک ترین جزئیات و تکنیک ها به دروپال کاران و کسانی که قصد دارند طراحی وب سایت ،پورتال و سیستم های هوشمند را آغاز کنند ، آموزش دهیم.گستردگی مطالب ، تنوع در آموزش ها ، نگاه تخصصی و همگام بودن با کاربران در آموزش عوامل متمایز کردن مرکز دروپال ایران با سایر آموزش دهندگان می باشد.
دروپال برای انجام طراحی های شگفت انگیز !  Drupal Builds something amazing