كيفية تنظيم جلود السمفونية

هذه ملاحظة قصيرة حول كيفية تنظيم استخدام الأسطح لصفحات العلامات التجارية في Twig باستخدام مثال Symfony. لا يرتبط هذا الحل بـ Symfony. قياسا على ذلك ، يمكنك تنفيذ الجلود في أي مشروع باستخدام Twig.

لديك متجر على الإنترنت ، مسرح سينما على الإنترنت ، ملصق للأحداث ، كتالوج للبرامج التلفزيونية ، إلخ. في أحد الأيام الجميلة ، تحصل على مهمة وضع علامة على صفحة كتالوج لجذب المستخدمين وزيادة المبيعات لنوع من الإجراءات. كيف يتم ذلك إذا كانت جميع المنتجات في الكتالوج متكافئة مع المحرك؟

الحل الأبسط هو ترميز معرف المنتج من الكتالوج. يمكنك إضافة شرط إلى القالب وفرض bodyفئة CSS إضافية على العلامة ، حيث يمكنك بعد ذلك تصميم الصفحة في الأنماط العامة.

{% block body_class -%}
    {{ parent () }} product-{{ product.id }}
{%- endblock %}

body.product-12345 {
   # custom style
}

يمكن للأنماط أن تفعل الكثير ، خاصة إذا كنت تستخدم المرن ، لكن الأنماط ليست قاهرة. في بعض الأحيان لا تكون إمكانيات الأنماط كافية لوضع علامة تجارية لصفحة ما وتحتاج إلى تغيير ترميز HTML (تخطيط) للصفحة ، ويتم ذلك عن طريق القياس مع الأنماط.

{% if product.id == 12345 %}
    {# custom code #}
{% else %}
    {# original code #}
{% endif %}

, , , (YAGNI KISS). — . , , .

, , — . , . . , . , . , - (DRY).

. , , , . , , .

product/show.html.twig. product/skin/<skin_name>/, <skin_name> — . default product/skin/default/show.html.twig. , .

public function show(Product $product): Response
{
    return $this->render(sprintf('product/skin/%s/show.html.twig', $product->skin), [
        'product' => $product,
    ]);
}

, , .

{# product/skin/custom_skin/show.html.twig #}

{% extends 'product/skin/default/show.html.twig' %}

{% blocksome_block %}
    {{ parent() }}
    {# customise something #}
{% endblock %}

, . , , , , . . , . , .

{# product/skin/default/show.html.twig #}

{% extends 'product/skin/' ~ product.skin ~ '/layout.html.twig' %}

{# ... #}

{# product/skin/custom_skin/layout.html.twig #}

{% extends 'product/skin/default/layout.html.twig' %}

{# ... #}

:

• product/skin/<skin_name>/show.html.twig ️▼
• product/skin/default/show.html.twig ️▼
• product/skin/<skin_name>/layout.html.twig ️▼
• product/skin/default/layout.html.twig ️▼
• ...

— .

• default
  
  • layout.html.twig
  • show.html.twig
  • qa.html.twig
  • similar.html.twig
• first_skin
  
  • layout.html.twig
  • show.html.twig
  • qa.html.twig
  • similar.html.twig
• second_skin
  
  • layout.html.twig
  • show.html.twig
  • qa.html.twig
  • similar.html.twig

, . Twig.

public function show(Product $product, Twig $twig): Response
{
    $template = $twig->resolveTemplate([
        sprintf('product/skin/%s/show.html.twig', $product->skin),
        'product/skin/default/show.html.twig',
    ]);
    $content = $template->render([
        'product' => $product,
    ]);

    return new Response($content);
}

resolveTemplate() . , , — . , Symfony , .

product/skin/default/show.html.twig , layout.html.twig. , Twig extends , extends resolveTemplate() . - .

{# product/skin/default/show.html.twig #}

{% extends [
    'product/skin/' ~ product.skin ~ '/layout.html.twig',
    'product/skin/default/layout.html.twig',
] %}

{# ... #}

حل آخر جيد هو وضع أنماط جلود محددة في ملفات منفصلة والاتصال فقط على صفحة ذات علامة تجارية. لذلك لن نرمي الأنماط الرئيسية بالقمامة ، والتي يتم استخدامها فقط على صفحتين. إذا كان أي شخص مهتمًا ، فيمكنني في مقال منفصل أن أخبرك بكيفية تكوين gulp لبناء عدد كبير من الأشكال معًا وبشكل منفصل. لدينا أكثر من 300 من هذه الجلود في المشروع.