🍖 👨🏿‍⚕️ 👩🏾‍🌾 Cara mengatur kulit di symfony ⏯️ 🤜 🧝🏾

Ini adalah catatan singkat tentang bagaimana Anda dapat mengatur penggunaan skins untuk pembuatan branding halaman di Twig menggunakan contoh Symfony. Solusi ini tidak terkait dengan Symfony. Dengan analogi, Anda dapat menerapkan skin dalam proyek apa pun menggunakan Ranting.

Anda memiliki toko online, bioskop online, poster acara, katalog acara TV, dll. Suatu hari, Anda mendapatkan tugas untuk membuat halaman katalog untuk menarik pengguna dan meningkatkan penjualan untuk beberapa jenis tindakan. Bagaimana melakukan ini jika semua produk dalam katalog setara dengan mesin?

Solusi paling sederhana adalah dengan meng-hardcode ID produk dari katalog. Anda dapat menambahkan suatu kondisi pada templat dan memaksakan bodykelas CSS tambahan pada tag, yang menurutnya Anda dapat menyesuaikan dgn mode halaman dengan gaya umum.

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

body.product-12345 {
   # custom style
}

Gaya dapat melakukan banyak hal, terutama jika Anda menggunakan flex, tetapi gaya tidak mahakuasa. Kadang-kadang kemungkinan gaya tidak cukup untuk membuat halaman dan Anda perlu mengubah markup HTML (tata letak) halaman, dan ini dilakukan dengan analogi dengan gaya.

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

{# ... #}

Solusi bagus lainnya adalah dengan menempatkan gaya kulit tertentu dalam file terpisah dan hanya terhubung pada halaman bermerek. Jadi kita tidak akan membuang sampah ke gaya utama dengan sampah, yang hanya digunakan pada beberapa halaman. Jika ada yang tertarik, maka dalam artikel terpisah saya dapat memberitahu Anda cara mengkonfigurasi tegukan untuk membangun sejumlah besar kulit bersama-sama dan secara terpisah. Kami memiliki lebih dari 300 skin seperti di proyek.

Cara mengatur kulit di symfony

More articles: