Tagy v šablonách

{% page %}

Vykresluje obsah jiné stránky CMS.

{% page "about" %}

S parametry

{% page "blog-post" id="123" %}
{% page "product-detail" slug="laptop-dell" %}

Podmíněné vykreslení

{% if showAbout %}
    {% page "about" %}
{% endif %}

{% partial %}

Vkládá parciální šablonu (partial).

{% partial "sidebar" %}
{% partial "navigation/main-menu" %}

S parametry

{% partial "product-card" product=item %}
{% partial "user-info" user=currentUser showEmail=true %}

S bloky

{% partial "modal" %}
    <h2>Nadpis modálu</h2>
    <p>Obsah modálu zde...</p>
{% endpartial %}

{% content %}

Vykresluje obsahový blok (content file).

{% content "footer-text" %}
{% content "terms-and-conditions" %}

Markdown obsah

{% content "about-us.md" %}
{% content "api-documentation.md" %}

{% component %}

Vykresluje komponentu.

{% component "blogPosts" %}
{% component "productList" categoryId=5 %}

S vlastnostmi

{% component "contactForm" 
    successMessage="Zpráva byla odeslána!"
    redirectUrl="/dekujeme"
%}

{% placeholder %}

Definuje místo pro vložení obsahu z jiných šablon.

V layoutu

<!DOCTYPE html>
<html>
<head>
    <title>{% placeholder title %}</title>
    {% placeholder head %}
</head>
<body>
    {% placeholder content %}
    {% placeholder scripts %}
</body>
</html>

Ve stránce

{% put title %}{{ page.title }}{% endput %}

{% put head %}
    <meta name="description" content="{{ page.description }}">
{% endput %}

{% put content %}
    <h1>Obsah stránky</h1>
    <p>Text stránky...</p>
{% endput %}

S výchozím obsahem

{% placeholder sidebar %}
    <div class="default-sidebar">
        <h3>Výchozí obsah</h3>
    </div>
{% endplaceholder %}

{% scripts %}

Vkládá JavaScript soubory do správného místa.

{% scripts %}
    <script src="{{ 'assets/js/app.js'|theme }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
{% endscripts %}

Podmíněné načítání

{% scripts %}
    {% if this.page.id == 'contact' %}
        <script src="{{ 'assets/js/contact-form.js'|theme }}"></script>
    {% endif %}
{% endscripts %}

{% styles %}

Vkládá CSS soubory do správného místa.

{% styles %}
    <link rel="stylesheet" href="{{ 'assets/css/app.css'|theme }}">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
{% endstyles %}

Responzivní styly

{% styles %}
    <link rel="stylesheet" href="{{ 'assets/css/desktop.css'|theme }}" media="(min-width: 1024px)">
    <link rel="stylesheet" href="{{ 'assets/css/mobile.css'|theme }}" media="(max-width: 768px)">
{% endstyles %}

{% flash %}

Zobrazuje flash zprávy ze session.

{% flash %}
    <div class="alert alert-{{ type }}">
        {{ message }}
    </div>
{% endflash %}

S různými typy

{% flash success %}
    <div class="success-message">
        <strong>Úspěch!</strong> {{ message }}
    </div>
{% endflash %}

{% flash error %}
    <div class="error-message">
        <strong>Chyba!</strong> {{ message }}
    </div>
{% endflash %}

{% verbatim %}

Zabraňuje zpracování Twig syntaxe uvnitř bloku.

{% verbatim %}
    <script>
        var template = '{{ user.name }}';  // Toto nebude zpracováno
        console.log(template);
    </script>
{% endverbatim %}

Pro Vue.js nebo Angular

{% verbatim %}
    <div id="app">
        <h1>{{ title }}</h1>          <!-- Vue.js syntaxe -->
        <p>{{ description }}</p>
    </div>
{% endverbatim %}

{% macro %}

Definuje opakovaně použitelnou funkci.

{% macro renderButton(text, url, class) %}
    <a href="{{ url }}" class="btn {{ class }}">{{ text }}</a>
{% endmacro %}

Použití makra

{% import _self as forms %}

{{ forms.renderButton('Přihlásit se', '/login', 'btn-primary') }}
{{ forms.renderButton('Registrovat', '/register', 'btn-secondary') }}

Složitější makro

{% macro productCard(product, showPrice) %}
    <div class="product-card">
        <h3>{{ product.name }}</h3>
        <img src="{{ product.image }}" alt="{{ product.name }}">
        {% if showPrice %}
            <p class="price">{{ product.price }} Kč</p>
        {% endif %}
        <a href="/product/{{ product.id }}">Zobrazit detail</a>
    </div>
{% endmacro %}

{% for %}

Smyčka pro iteraci přes pole nebo objekty.

{% for product in products %}
    <div class="product">
        <h3>{{ product.name }}</h3>
        <p>{{ product.price }} Kč</p>
    </div>
{% endfor %}

S klíči

{% for key, value in settings %}
    <p><strong>{{ key }}:</strong> {{ value }}</p>
{% endfor %}

S podmínkami

{% for user in users if user.active %}
    <p>{{ user.name }} je aktivní</p>
{% endfor %}

Loop proměnná

{% for item in items %}
    <div class="item {{ loop.first ? 'first' : '' }} {{ loop.last ? 'last' : '' }}">
        <span class="number">{{ loop.index }}</span>
        <h4>{{ item.title }}</h4>
    </div>
{% endfor %}

{% if %}

Podmíněné větvení.

{% if user %}
    <p>Vítej, {{ user.name }}!</p>
{% else %}
    <p>Nejsi přihlášen.</p>
{% endif %}

Více podmínek

{% if user.role == 'admin' %}
    <a href="/admin">Administrace</a>
{% elseif user.role == 'moderator' %}
    <a href="/moderate">Moderování</a>
{% else %}
    <a href="/profile">Profil</a>
{% endif %}

Složité podmínky

{% if user and user.active and user.verified %}
    <div class="premium-content">
        <!-- Obsah pro ověřené uživatele -->
    </div>
{% endif %}

{% if product.inStock and product.price > 0 %}
    <button class="buy-now">Koupit nyní</button>
{% endif %}

Praktické příklady

Komplexní navigace

<nav class="main-nav">
    {% for item in menu %}
        {% if item.children %}
            <div class="dropdown">
                <a href="{{ item.url }}">{{ item.title }}</a>
                <ul class="dropdown-menu">
                    {% for child in item.children %}
                        <li><a href="{{ child.url }}">{{ child.title }}</a></li>
                    {% endfor %}
                </ul>
            </div>
        {% else %}
            <a href="{{ item.url }}" class="{{ this.page.url == item.url ? 'active' : '' }}">
                {{ item.title }}
            </a>
        {% endif %}
    {% endfor %}
</nav>

Obsah