Design:Twig
From Katapulta
m (→Moștenire template) |
m (→Moștenire template) |
||
Line 42: | Line 42: | ||
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. | 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 | + | 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. | |
<html><div class="highlight"> | <html><div class="highlight"> |
Revision as of 20:11, 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 %}