↔️ 💃🏾 🐽 So organisieren Sie Skins in Symfony 👩🏾‍🌾 ✌🏿 💃

Dies ist eine kurze Anmerkung dazu, wie Sie die Verwendung von Skins zum Branding von Seiten in Twig am Beispiel von Symfony organisieren können. Diese Lösung ist nicht an Symfony gebunden. Analog können Sie mit Twig Skins in jedem Projekt implementieren.

Sie haben einen Online-Shop, ein Online-Kino, ein Plakat für Veranstaltungen, einen Katalog mit Fernsehsendungen usw. Eines schönen Tages haben Sie die Aufgabe, eine Katalogseite zu brandmarken, um Benutzer anzulocken und den Umsatz für eine Aktion zu steigern. Wie geht das, wenn alle Produkte im Katalog für den Motor gleichwertig sind?

Die einfachste Lösung besteht darin, die Produkt-ID aus dem Katalog fest zu codieren. Sie können der Vorlage eine Bedingung hinzufügen und dem bodyTag eine zusätzliche CSS-Klasse auferlegen , nach der Sie die Seite in allgemeinen Stilen stilisieren können.

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

body.product-12345 {
   # custom style
}

Stile können viel bewirken, insbesondere wenn Sie Flex verwenden, aber Stile sind nicht allmächtig. Manchmal reichen die Möglichkeiten von Stilen nicht aus, um eine Seite zu brandmarken, und Sie müssen das HTML-Markup (Layout) der Seite ändern. Dies erfolgt analog zu den Stilen.

{% 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',
] %}

{# ... #}

Eine andere gute Lösung wäre, die Stile bestimmter Skins in separaten Dateien zu platzieren und nur auf einer Markenseite eine Verbindung herzustellen. Wir werden also die Hauptstile nicht mit Müll verunreinigen, der nur auf einigen Seiten verwendet wird. Wenn jemand interessiert ist, kann ich Ihnen in einem separaten Artikel erklären, wie Sie gulp so konfigurieren, dass eine große Anzahl von Skins zusammen und separat erstellt wird. Wir haben mehr als 300 solcher Skins im Projekt.

So organisieren Sie Skins in Symfony

More articles: