بخش view در symfony

در مقاله قبل در رابطه با مقدمات و آشنایی اولیه با ساختار سیمفونی صحبت کردم در این مقاله بخش view  آن را با هم بررسی می‌کنیم.

Symfony برای مدیریت قالب‌ها از یک Template Engine به نام Twig استفاده می‌کند که کار مدیریت و پیاده سازی ساختارهای قالب را به طرز فوق العاده ای بهتر و آسانتر کرده است. اگر مقاله قبل را خوانده باشید متوجه می‌شوید که TwigBundle در ابتدا در فایل AppKernel  لود می‌شود.

قبلا در گیت‌هاب پروژه‌ای تحت عنوان symfony-hello-world ایجاد کردم و با استفاده از ساختار Git Flow آن را مدیریت کردم. شما در ورژن V.1.0 میتوانید نسخه نصب شده سیمفونی را مشاهده کنید و در ورژن V.1.1 نسخه ای که ساختار اولیه قالب وبلاگی Fantom را بر روی آن تنظیم کردم مشاهده کنید.

Symfony Fantom template structure

برای پیاده سازی ساختار قالب‌ به مسیر app > Resource > views میرویم و فولدری به نام قالب جدید ایجاد می‌کنیم تا فایلهای view را داخل آن‌ ایجاد کنیم. فولدری به نام Layouts ایجاد می‌کنم و فایلهای کلی قالب مثل header , footer  و… را در آن قرار می‌دهم.

برای مثال فایل master قالب‌ سایت را به صورت زیر می‌نویسیم:


{% include 'Fantom/Layouts/header.html.twig' %}

<!--======Header Menu Area =======-->
{% include 'Fantom/Layouts/navigation.html.twig' %}
<!--======Header Menu Area =======-->

{% block postSlider %}{% endblock %}

<!--============Blog Area =======-->
<section class="blog_area p_120">
    <div class="container">
        <div class="row">

            <div class="{% block parentClass %}col-lg-8{% endblock %}">
                {% block content %}{% endblock %}
            </div>

            {% block sidebar %}
                {% include 'Fantom/Layouts/sidebar.html.twig' %}
            {% endblock %}

        </div>
    </div>
</section>
<!--========Blog Area ==========-->

{% include 'Fantom/Layouts/footer.html.twig' %}

همانطور  که می‌بینید بلاک‌هایی همچون content , sidebar ایجاد کردیم و فایلهای header و footer را هم جدا کردیم تا ساختار تمیزتری داشته باشیم.

برای بلاک sidebar مقدار پیشفرضی را قرار دادیم و همچنین در صفحاتی که خواستیم سایدبار نداشته باشیم قسمت کلاس والد صفحه را قابل تغییر در سایر صفحات گذاشتیم. به این صورت میتونیم سایر صفحات را به راحتی مطابق نیازمون داشته باشیم.

داخل فایلهای header و footer بلاک‌هایی به نام‌های header و footer ایجاد کردم تا در صفحاتی که نیاز داریم استایل یا کدهایی را به هدر و فوتر اضافه کنیم این امکان را داشته باشیم و همچنین بعضی از پلاگین‌ها فقط در بعضی صفحات استفاده می‌شود و لزومی ندارد لینک آن در master وجود داشته باشد و آن را داخل بلاک مورد نظر تعریف می‌کنیم.


# header file
{% block header %}{% endblock %}

# footer file
{% block footer %}{% endblock %}

حالا که ساختار اصلی view را پیاده سازی کردیم داخل یک فولدر جدید به نام Front فایلهای قالب برای صفحات مختلف را ایجاد می‌کنم مثلا فایل صفحات اصلی، مطالب و مشاهده مطلب و … را در این فولدر ایجاد می‌کنم و همانطور که میدونید از فایل master ارث‌بری (extend) می‌کند.


# Home Page 

{% extends 'Fantom/base.html.twig' %}

# Display post slider in home page
{% block postSlider %}
    {% include 'Fantom/Layouts/post-slider.html.twig' %}
{% endblock %}

{% block header %}
    {{ parent() }}
# header code here ...
{% endblock %}

{% block content %}
   # content code for home page here ...
{% endblock %}

{% block footer %}
    {{ parent() }}
# Footer code here ...
{% endblock %}

به این صورت تمام فایل‌های قالب سایت را ایجاد می‌کنیم. ساختار نهایی قالب‌ها را می‌توانید در ورژن V.1.2 روی گیت‌هاب مشاهده کنید.

پیشنهاد میکنم داکیومنت Twig را حتما مطالعه کنید.

Comments