Design:Twig
From Katapulta
Twig este limbajul folosit în Katapulta pentru crearea și personalizarea template-urilor de magazin. Este simplu, rapid de învățat și foarte puternic în dezvoltarea template-urilor.
În Twig există două tipuri de taguri:
-
{% ... %}- folosit pentru executarea structurilor de control (for, if, etc.) -
{{ ... }}- folosit pentru afișarea pe ecran a rezultatului unei expresii
Contents |
Variabile
Variabilele sunt date care pot fi folosite în template. Variabilele pot avea atribute sau elemente care pot fi accesate. Poți folosi punctul (.) pentru accesarea atributelor unei variabile sau așa numita sintaxă „subscript” (
[]). Următoarele linii de cod fac același lucru folosind sintaxe diferite:
{{ foo.bar }}
{{ foo['bar'] }}
null.
Filtre
Formatul de afișare a variabilelor poate fi modificat cu ajutorul filtrelor. Filtrele sunt separate de variabile prin simbolul | și opțional pot avea argumente între paranteze. Deasemenea pot fi înlănțuite mai multe filtre. Rezultatul unui filtru va fi aplicat următorului filtru.
De exemplu{{ name|striptags|capitalize }} va înlătura toate tag-urile HTML din variabila „name” și va capitaliza rezultatul. Filtrele care acceptă argumente au paranteze în jurul argumentelor, la fel ca apelul unei funcții.
Un alt exemplu, avem o listă de elemente (array) și vrem să returnăm elementele sub forma unui string, separate prin virgulă: {{ list|join(', ') }}.
Comentarii
Pentru a comenta o linie dintr-un template, folosește sintaxa pentru comentarii:{# ... #}.
{# note: disabled template because we no longer use this
{% for user in users %}
...
{% endfor %}
#}
Moștenire template
Cea mai puternică caracteristică a limbajului Twig este moștenirea template-urilor. Această moștenire permite crearea unui template „schelet” de bază care conține toate elementele comune ale site-ului tău și definirea așa numitelor blocks (blocuri) pe care copiii template-ului de bază le pot suprascrie.
Pentru a înțelege mai ușor cele explicate sus prezentăm în continuare un exemplu.
Template-ul de bază
Acest template, denumit base.html, este un simplu schelet care definește o pagină HTML cu două coloane. Template-urile copil (cele care extind template-ul de bază) vor umple blocurile goale cu conținut.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<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 2009 by <a href="http://domain.invalid/">you</a>.
{% endblock %}
</div>
</body>
</html>
{% block %} ... {% endblock %} definesc patru zone (blocuri) pe care copiii template-ului de bază le pot suprascrie. Deci toată porțiunea de cod conținută într-un tag {% block %} poate fi suprascrisă de alt template, numit template copil.
Pentru o lizibilitate sporită Twig permite alocarea de nume fiecărui block.
{% block sidebar %}
{% block inner_sidebar %}
...
{% endblock inner_sidebar %}
{% endblock sidebar %}
Template-ul copil
Template-ul copil poate arăta sub forma:
{% extends "base.html" %}
{% 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 on my awesome homepage.
</p>
{% endblock %}
{% extends %}. Acest tag precizează pentru Twig că acest template extinde alt template. Acest tag trebuie să fie plasat primul în template.
Dacă vrei să afișezi un block de mai multe ori în pagină poți folosi funcția block.
<title>{% block title %}{% endblock %}</title>
<h1>{{ block('title') }}</h1>
{% block body %}{% endblock %}
Twig nu permite moștenirea multiplă, astfel încât numai un tag extends este permis per template.
Blocurile parinte
Este posibilă randarea conținutului unui bloc părinte folosind funcția parent(). Această funcție returnează rezultatul blocului părinte.
{% block sidebar %}
<h3>Table Of Contents</h3>
...
{{ parent() }}
{% endblock %}
Lista structurilor de control
Structurile de control se referă la toate aspectele care controlează derularea unui program: structuri condiționale (
if, elseif, else), structuri repetitive (
for) și blocuri. Structurile de control apar între tagurile
{% ... %}.
For
Ciclează peste fiecare element dintr-o secvență. De exemplu, dorim să afișăm lista de colecții stocată într-o variabilă numită collections:
<h1>Collections</h1>
<ul>
{% for collection in collections %}
<li>{{ collection.title|e }}</li>
{% endfor %}
</ul>
...
{% for i in 0..10 %}
* {{ i }}
{% endfor %}
Afișează numerele de la 0 la 10.
{% for letter in 'a'..'z' %}
* {{ letter }}
{% endfor %}
Afișează literele de la „a” la „z”.
If
{% if kenny.sick %}
Kenny is sick.
{% elseif kenny.dead %}
Kenny is dead.
{% else %}
Kenny looks okay.
{% endif %}
Filtre
Filtrele obișnuite din Twig pot fi aplicate nu doar asupra unei variabile, ci și asupra unui întreg block dintr-un template. Iată cateva exemple:
{% filter upper %}
This text becomes uppercase
{% endfilter %}
{% filter lower|escape %}
<strong>SOME TEXT</strong>
{% endfilter %}
<strong>some text</strong>.