[Sugester V2](https://pomoc.sugester2.pl.md) / [CMS](https://pomoc.sugester2.pl/cms-1.md)

# [Zmienne Liquid w layoutach](https://pomoc.sugester2.pl/zmienne-liquid-w-layoutach-kdqcbrAR.md)

Layouty CMS używają szablonów Liquid do dynamicznego renderowania treści. Zmienne definiujesz w polach (fields) strony.

## Podstawowa składnia

### Wyświetlanie zmiennych
```liquid
{{ title }}
{{ brand | default: 'MojaFirma' }}
```

### Warunki
```liquid
{% if product == 'winery' %}
  <span class="text-purple-500">MojaFirma</span>
{% else %}
  <span class="text-emerald-500">MojaFirma</span>
{% endif %}
```

### Pętle
```liquid
{% for p in paragraphs %}
  {{ p }}
{% endfor %}
```

## Popularne zmienne

<table>
<tr><th>Zmienna</th><th>Opis</th><th>Przykład</th></tr>
<tr><td><code>name</code></td><td>Nazwa strony</td><td><code>Dashboard PL</code></td></tr>
<tr><td><code>title</code></td><td>Tytuł strony</td><td><code>MojaFirma Dashboard</code></td></tr>
<tr><td><code>tagline</code></td><td>Podtytuł/slogan</td><td><code>Monitoring mikroklimatu</code></td></tr>
<tr><td><code>lang</code></td><td>Kod języka</td><td><code>pl</code>, <code>en</code></td></tr>
<tr><td><code>brand</code></td><td>Nazwa marki</td><td><code>MojaFirma</code></td></tr>
<tr><td><code>icon</code></td><td>URL ikony/logo</td><td><code>https://...svg</code></td></tr>
<tr><td><code>product</code></td><td>Typ produktu</td><td><code>vineyard</code>, <code>winery</code>, <code>Dashboard</code></td></tr>
<tr><td><code>current_lang</code></td><td>Aktualny język (display)</td><td><code>PL</code>, <code>EN</code></td></tr>
<tr><td><code>contact_email</code></td><td>Email kontaktowy</td><td><code>kontakt@firma.pl</code></td></tr>
</table>
## Zmienne wielojęzyczne

Dla przełącznika języków:
```liquid
{{ page_path_pl }}  → /dashboard
{{ page_path_en }}  → /dashboard-en
```

Przykład dropdown języka:
```html
<a href="{{ page_path_pl }}" class="{% if lang == 'pl' %}active{% endif %}">PL</a>
<a href="{{ page_path_en }}" class="{% if lang == 'en' %}active{% endif %}">EN</a>
```

## Zmienne systemowe

<table>
<tr><th>Zmienna</th><th>Opis</th></tr>
<tr><td><code>paragraphs</code></td><td>Tablica paragrafów strony</td></tr>
<tr><td><code>path</code></td><td>Ścieżka URL strony</td></tr>
</table>
## Filtry Liquid

```liquid
{{ title | upcase }}              → TYTUŁ
{{ title | downcase }}            → tytuł
{{ email | default: 'brak' }}     → wartość domyślna
{{ text | truncate: 100 }}        → obcięcie tekstu
{{ price | append: ' PLN' }}      → dodanie tekstu
{{ url | remove: 'https://' }}    → usunięcie tekstu
```

## Przykład kompletnego layoutu

```html
<!DOCTYPE html>
<html lang="{{ lang | default: 'pl' }}">
<head>
  <title>{{ title }}</title>
</head>
<body>
  <header>
    <img src="{{ icon }}" alt="{{ brand }}">
    <span>{{ brand }}</span>
  </header>
  
  <main>
    {% for p in paragraphs %}
      {{ p }}
    {% endfor %}
  </main>
  
  <footer>
    <p>{{ contact_label }}: {{ contact_email }}</p>
  </footer>
</body>
</html>
```

## Debugowanie

Aby zobaczyć wszystkie dostępne zmienne, dodaj tymczasowo:
```liquid
<div style="position: relative;"><pre class="language-text" tabindex="0"><code class="language-text">{{ page | json }}</code></pre></div>
```