Design:Twig
From Katapulta
m (→Template-ul copil) |
m (→Template-ul copil) |
||
Line 84: | Line 84: | ||
===Template-ul copil=== | ===Template-ul copil=== | ||
+ | Template-ul copil poate arăta sub forma: | ||
+ | |||
<html><div class="highlight"> | <html><div class="highlight"> | ||
Line 103: | Line 105: | ||
<span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span><span class="x"></span> | <span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span><span class="x"></span> | ||
</pre> | </pre> | ||
- | |||
</div></html> | </div></html> | ||
+ | |||
+ | Ceea ce este important aici este tag-ul <pre>{% extends %}</pre>. Acest tag precizează pentru Twig că acest template '''extinde''' alt template. Acest tag trebuie să fie plasat primul în template. |
Revision as of 20:19, 19 April 2011
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.