Twig Template-Engine in Symfony

Twig ist die Standard-Template-Engine von Symfony und bietet eine saubere, verständliche Syntax für das Erstellen von Vorlagen. Sie ermöglicht es Entwicklern, das Frontend und das Backend klar zu trennen, was die Wartung und Entwicklung von Anwendungen erleichtert. In diesem Artikel werden wir die folgenden Themen ausführlich behandeln:

Einführung in die Twig-Syntax
Variablen, Filter und Funktionen
Template-Vererbung und Layout-Management
Einbinden und Einbetten von Templates
Asset-Management in Twig

1. Einführung in die Twig-Syntax

1.1 Was ist Twig?

Twig ist eine moderne Template-Engine für PHP, die von SensioLabs, den Entwicklern von Symfony, entwickelt wurde. Sie wurde entworfen, um sicher, schnell und flexibel zu sein. Twig bietet:

Klare Syntax: Ähnlich wie Jinja2 in Python oder Django-Templates.
Sicherheit: Automatische Escaping-Mechanismen verhindern XSS-Angriffe.
Erweiterbarkeit: Möglichkeit, benutzerdefinierte Funktionen, Filter und Tags zu erstellen.

1.2 Grundlegende Syntax

Twig verwendet spezielle Syntax-Elemente, um Anweisungen in Templates zu markieren:

Variablen-Ausgabe: {{ variable }}
Anweisungen/Kontrollstrukturen: {% ... %}
Kommentare: {# ... #}

Beispiel:

<!DOCTYPE html>
<html>
<head>
    <title>Meine Webseite</title>
</head>
<body>
    <h1>Willkommen, {{ name }}!</h1>
    {% if is_logged_in %}
        <p>Sie sind eingeloggt.</p>
    {% else %}
        <p>Bitte loggen Sie sich ein.</p>
    {% endif %}
</body>
</html>

1.3 Kommentare

Kommentare in Twig werden nicht im endgültigen HTML angezeigt.

{# Dies ist ein Kommentar und wird nicht gerendert #}

2. Variablen, Filter und Funktionen

2.1 Variablen

Variablen werden in den Controller-Methoden definiert und an das Template übergeben.

Beispiel im Controller:

public function index()
{
    return $this->render('index.html.twig', [
        'name' => 'Max Mustermann',
        'is_logged_in' => true,
    ]);
}

Verwendung im Template:

{{ name }}

2.2 Filter

Filter modifizieren die Ausgabe von Variablen. Sie werden mit dem Pipe-Symbol | angewendet.

Häufig verwendete Filter:

upper: Wandelt einen String in Großbuchstaben um.
lower: Wandelt einen String in Kleinbuchstaben um.
title: Wandelt den ersten Buchstaben jedes Wortes in Großbuchstaben um.
length: Gibt die Länge einer Sequenz oder eines Strings zurück.
date: Formatiert ein Datum.

Beispiel:

{{ name|upper }}  {# Ausgabe: MAX MUSTERMANN #}
{{ name|lower }}  {# Ausgabe: max mustermann #}

2.3 Funktionen

Funktionen führen bestimmte Aktionen aus oder geben Werte zurück.

Häufig verwendete Funktionen:

include(): Fügt ein anderes Template ein.
path(): Generiert eine URL basierend auf einem Routen-Namen.
asset(): Generiert die URL zu einem Asset (CSS, JS, Bilder).
dump(): Gibt den Inhalt einer Variablen aus (nützlich für Debugging).

Beispiel:

<a href="{{ path('homepage') }}">Startseite</a>

2.4 Kombination von Filtern und Funktionen

Sie können Filter und Funktionen kombinieren.

Beispiel:

{{ user.registrationDate|date('d.m.Y') }}

3. Template-Vererbung und Layout-Management

3.1 Prinzip der Vererbung

Twig ermöglicht die Vererbung von Templates, was die Wiederverwendbarkeit und Konsistenz fördert. Ein Basis-Layout kann erstellt werden, von dem andere Templates erben.

3.2 Erstellung eines Basis-Layouts

Basis-Template `base.html.twig`:

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Meine Webseite{% endblock %}</title>
    {% block stylesheets %}
        <link rel="stylesheet" href="{{ asset('css/styles.css') }}">
    {% endblock %}
</head>
<body>
    {% block body %}{% endblock %}
    {% block javascripts %}
        <script src="{{ asset('js/scripts.js') }}"></script>
    {% endblock %}
</body>
</html>

3.3 Ableitung von Templates

Beispiel `index.html.twig`:

{% extends 'base.html.twig' %}

{% block title %}Startseite - Meine Webseite{% endblock %}

{% block body %}
    <h1>Willkommen auf der Startseite</h1>
    <p>Dies ist der Inhalt der Startseite.</p>
{% endblock %}

3.4 Blöcke definieren und überschreiben

Definieren von Blöcken: Mit {% block blockname %}{% endblock %} im Basis-Template.
Überschreiben von Blöcken: Mit {% block blockname %}{% endblock %} im abgeleiteten Template.

Verschachtelung von Blöcken:

Sie können Blöcke innerhalb von Blöcken definieren.

{% block content %}
    {% block article %}
        <p>Artikel-Inhalt</p>
    {% endblock %}
{% endblock %}

3.5 Verwendung des `parent()`-Funktion

Mit {{ parent() }} können Sie den Inhalt des übergeordneten Blocks einbeziehen.

Beispiel:

{% block title %}
    {{ parent() }} - Zusätzlicher Titel
{% endblock %}

4. Einbinden und Einbetten von Templates

4.1 Einbinden von Templates mit `include()`

include() ermöglicht es, ein anderes Template einzufügen, ohne die Template-Vererbung zu verwenden.

Beispiel:

<div class="sidebar">
    {{ include('partials/sidebar.html.twig') }}
</div>

4.2 Variablen an inkludierte Templates übergeben

Sie können Variablen an das inkludierte Template übergeben.

{{ include('partials/sidebar.html.twig', { 'categories': categoryList }) }}

Im inkludierten Template partials/sidebar.html.twig:

<ul>
    {% for category in categories %}
        <li>{{ category.name }}</li>
    {% endfor %}
</ul>

4.3 Einbetten von Templates mit `embed`

embed kombiniert include und extends, sodass Sie Blöcke im eingebetteten Template überschreiben können.

Beispiel:

{% embed 'partials/panel.html.twig' with {'title': 'Neuigkeiten'} %}
    {% block content %}
        <p>Hier sind die neuesten Neuigkeiten.</p>
    {% endblock %}
{% endembed %}

In partials/panel.html.twig:

<div class="panel">
    <h2>{{ title }}</h2>
    <div class="panel-content">
        {% block content %}{% endblock %}
    </div>
</div>

4.4 Verwendung von `macro` für wiederverwendbare Komponenten

Mit Makros können Sie wiederverwendbare Template-Funktionen erstellen.

Definieren eines Makros in `macros.html.twig`:

{% macro render_table(rows) %}
    <table>
        {% for row in rows %}
            <tr>
                {% for column in row %}
                    <td>{{ column }}</td>
                {% endfor %}
            </tr>
        {% endfor %}
    </table>
{% endmacro %}

Verwendung des Makros:

{% import 'macros.html.twig' as mymacros %}

{{ mymacros.render_table(data) }}

5. Asset-Management in Twig

5.1 Verwendung der `asset()`-Funktion

Die asset()-Funktion generiert die URL zu einem Asset, das im public/-Verzeichnis Ihrer Symfony-Anwendung liegt.

Beispiel:

<link rel="stylesheet" href="{{ asset('css/styles.css') }}">
<img src="{{ asset('images/logo.png') }}" alt="Logo">

5.2 Asset-Versionierung und Cache-Busting

Um sicherzustellen, dass Benutzer immer die aktuelle Version Ihrer Assets laden, können Sie eine Versionsnummer hinzufügen.

Konfiguration in `config/packages/framework.yaml`:

framework:
    assets:
        version: 'v1.0.0'
        version_format: '%%s?version=%%s'

Verwendung in Twig:

<link rel="stylesheet" href="{{ asset('css/styles.css') }}">

Die generierte URL wäre dann:

/css/styles.css?version=v1.0.0

5.3 Integration mit Webpack Encore

Webpack Encore ist ein Wrapper für Webpack, der die Asset-Verwaltung vereinfacht.

Installation von Webpack Encore:

yarn add @symfony/webpack-encore --dev

Konfiguration von Webpack Encore:

Erstellen Sie die Datei webpack.config.js:

const Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/js/app.js')
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
;

module.exports = Encore.getWebpackConfig();

Verwendung in Twig:

{% block stylesheets %}
    {{ encore_entry_link_tags('app') }}
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
{% endblock %}

5.4 Vorteile der Verwendung von Webpack Encore

Automatische Versionierung und Hashing: Hilft beim Cache-Busting.
Unterstützung von ES6, Sass, React, Vue.js: Moderne Frontend-Technologien.
Optimierung: Minimierung und Bündelung von Assets für bessere Leistung.

Zusammenfassung

Die Twig-Template-Engine bietet eine leistungsstarke und flexible Möglichkeit, die Darstellung Ihrer Symfony-Anwendungen zu gestalten. Durch das Verständnis der Twig-Syntax, der Verwendung von Variablen, Filtern und Funktionen sowie der effizienten Verwaltung von Layouts und Assets können Sie saubere und wartbare Templates erstellen.

Weiterführende Ressourcen

Offizielle Twig-Dokumentation: twig.symfony.com
Symfony-Dokumentation zu Twig: symfony.com/doc/current/templates.html
Webpack Encore-Dokumentation: https://symfony.com/doc/current/frontend.html

1. Einführung in die Twig-Syntax

1.1 Was ist Twig?

1.2 Grundlegende Syntax

Beispiel:

1.3 Kommentare

2. Variablen, Filter und Funktionen

2.1 Variablen

Beispiel im Controller:

2.2 Filter

Häufig verwendete Filter:

Beispiel:

2.3 Funktionen

Häufig verwendete Funktionen:

Beispiel:

2.4 Kombination von Filtern und Funktionen

Beispiel:

3. Template-Vererbung und Layout-Management

3.1 Prinzip der Vererbung

3.2 Erstellung eines Basis-Layouts

Basis-Template base.html.twig:

3.3 Ableitung von Templates

Beispiel index.html.twig:

3.4 Blöcke definieren und überschreiben

Verschachtelung von Blöcken:

3.5 Verwendung des parent()-Funktion

Beispiel:

4. Einbinden und Einbetten von Templates

4.1 Einbinden von Templates mit include()

Beispiel:

4.2 Variablen an inkludierte Templates übergeben

4.3 Einbetten von Templates mit embed

Beispiel:

4.4 Verwendung von macro für wiederverwendbare Komponenten

Definieren eines Makros in macros.html.twig:

5. Asset-Management in Twig

5.1 Verwendung der asset()-Funktion

Beispiel:

5.2 Asset-Versionierung und Cache-Busting

Konfiguration in config/packages/framework.yaml:

5.3 Integration mit Webpack Encore

Installation von Webpack Encore:

Konfiguration von Webpack Encore:

5.4 Vorteile der Verwendung von Webpack Encore

Zusammenfassung

Weiterführende Ressourcen

Ali Ajjoub

Lassen Sie uns K o n t a k t aufnehmen!

Basis-Template `base.html.twig`:

Beispiel `index.html.twig`:

3.5 Verwendung des `parent()`-Funktion

4.1 Einbinden von Templates mit `include()`

4.3 Einbetten von Templates mit `embed`

4.4 Verwendung von `macro` für wiederverwendbare Komponenten

Definieren eines Makros in `macros.html.twig`:

5.1 Verwendung der `asset()`-Funktion

Konfiguration in `config/packages/framework.yaml`: