Get best of the week

如何在Symfony中组织皮肤

这是一个简短的注释，说明如何使用Symfony的示例在Twig中组织皮肤使用以制作品牌页面。该解决方案与Symfony无关。以此类推，您可以使用Twig在任何项目中实现外观。


您拥有在线商店，在线电影院，活动海报，电视节目目录等。好的一天，您将获得对目录页进行品牌化的任务，以吸引用户并通过某种行动增加销售量。如果目录中的所有产品对于发动机都是等效的，该怎么办？


最简单的解决方案是对目录中的产品ID进行硬编码。您可以在模板中添加一个条件，并在body标签上添加一个额外的CSS类，然后您可以根据该标签以常规样式对页面进行样式化。


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

body.product-12345 {
   # custom style
}

样式可以做很多事情，尤其是在使用flex时，但是样式并不是万能的。有时，样式的可能性不足以为页面打上烙印，您需要更改页面的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多个这样的皮肤。

More articles:


All Articles