Ein
Freitagsfrühstück
Environment
Loader
Template Pfad(e)
Cache
Template
Output
load(string $template):Template
render(array $context):string
Load
Tokenize (Lexer)
Parse into AST*
*Abstract Syntax Tree
Evaluate
Is compiled?
no
yes
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<ul id="navigation">
{% for item in navigation %}
<li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endfor %}
</ul>
<h1>My Webpage</h1>
{{ a_variable }}
</body>
</html>
{% ... %}
= führe Statement aus{{ ... }}
= gebe Statement aus{# gibt den Wert von foo aus, bzw. foo.toString() #}
{{ foo }}
{{ foo.bar }}
{# ist equivalent zu #}
{{ foo['bar'] }}
{{ foo.data-foo }} # geht nicht!
{# ...das schon! #}
{{ attribute(foo, 'data-foo') }}
{# wenn foo = undefined und strict_variables = false #}
{{ foo }} {# ist null und gibt einen Leerstring aus #}
{# skalar #}
{% set foo = 'foo' %}
{# array #}
{% set foo = [1, 2] %}
{# object #}
{% set foo = {'foo': 'bar'} %}
{# blocks #}
{% set foo %}
<div id="pagination">
...
</div>
{% endset %}
{# JavaScript, anyone? #}
{# Entferne alle HTML Tags aus `name` und `title-case` es. #}
{{ name | striptags | title }}
{# Verbinde alle Elemente der Liste mit ` ,`. #}
{{ list | join(', ') }}
{# Was wohl? #}
{% filter upper %}
Hallo Welt!
{% endfilter %}
{{ max(1, 3, 2) }}
{% set numbers = range(0, 3) %}
{{ random(5) }}
{# Named Arguments #}
{{ data | convert_encoding('UTF-8', 'iso-2022-jp') }}
{# versus #}
{{ data | convert_encoding(from='iso-2022-jp', to='UTF-8') }}
{% if users | length > 0 %}
{# ... tu was #}
{% endif %}
{# wenn users ein array oder Traversable ist #}
{% for user in users %}
<li>{{ user.username }}</li>
{% endfor %}
{% for user in users %}
{{ loop.index }} - {{ user.username }}
{% endfor %}
{#
loop.index The current iteration of the loop. (1 indexed)
loop.index0 The current iteration of the loop. (0 indexed)
loop.revindex The number of iterations from the end of the loop (1 indexed)
loop.revindex0 The number of iterations from the end of the loop (0 indexed)
loop.first True if first iteration
loop.last True if last iteration
loop.length The number of items in the sequence
loop.parent The parent context
#}
<ul>
{% for user in users if user.active %}
<li>{{ user.username }}</li>
{% endfor %}
</ul>
<ul>
{% for user in users %}
<li>{{ user.username }}</li>
{% else %}
<li><em>no user found</em></li>
{% endfor %}
</ul>
und
<h1>Members</h1>
<ul>
{# keys only #}
{% for key in users | keys %}
<li>{{ key }}</li>
{% endfor %}
{# keys and values #}
{% for key, user in users %}
<li>{{ key }}: {{ user.username }}</li>
{% endfor %}
</ul>
{{ include('sidebar.html') }}
{% for box in boxes %}
{# kennt alle Variablen des äußeren Scopes #}
{{ include('render_box.html') }}
{% endfor %}
{% for foo in boxes %}
{# Setzt die innere Variable box mit dem Wert von foo #}
{{ include('render_box.html', {box: foo}) }}
{% endfor %}
{# keine äußeren Variablen sind innen vorhanden #}
{{ include('template.html', with_context = false) }}
{% include 'sidebar.html' %}
{% for box in boxes %}
{# kennt alle Variablen des äußeren Scopes #}
{% include 'render_box.html.twig' with {box: box} %}
{% endfor %}
{% include 'footer.html.twig' only %}
{% include 'footer.html.twig' ignore missing %}
<!DOCTYPE html>
<html>
<head>
{% block head %}
<link rel="stylesheet" href="style.css" />
<title>{% block title %}{% endblock %} - My Webpage</title>
{% endblock %}
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
<div id="footer">
{% block footer %}
© Copyright 2011 by <a href="http://domain.invalid/">you</a>.
{% endblock %}
</div>
</body>
</html>
{% extends "base.html.twig" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ parent() }}
<style type="text/css">
.important { color: #336699; }
</style>
{% endblock %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome to my awesome homepage.
</p>
{% endblock %}
{% block footer %}{% endblock %}
Pattern Lab
Pattern Lab
legt durch seinen modularen Aufbau den Grundstein für die Erstellung wiederverwendbarer Elemente einer Webseite... (Brad Frost)
Pattern Lab
Atom
Molekül
Organismus
Template
Seite
modular
Pattern Lab
Pattern Lab
Pattern Lab
Pattern Lab
Atom
Pattern Lab
Pattern Lab
Molekül
Pattern Lab
Pattern Lab
Organismus
Pattern Lab
Pattern Lab
Kundenaufmerksamkeit beginnt oft hier
Template
Pattern Lab
Pattern Lab
Pattern Lab
Pattern Lab
/Patternlab
/source
/_patterns
/00-atoms
/10-button.json
/10-button.twig
Pattern Lab
{
"button": {
"label": "Senden",
"class": "",
"layout": "primary",
"type": "submit"
}
}
<button type="{{ button.type }}"
class="[ btn btn-{{ button.layout }} ] {{ button.class }}"
>{{ button.label }}</button>
Pattern Lab
Pattern Lab