Personal tools
Namespaces
Variants
Actions

Design:Twig

From Katapulta

(Difference between revisions)
Jump to: navigation, search
m (Moștenire template)
m (Moștenire template)
Line 69: Line 69:
În acest exemplu, tag-urile <pre>{% block %} ... {% endblock %}</pre> 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 <pre>{% block %}</pre> poate fi suprascrisă de alt template, numit template copil.
În acest exemplu, tag-urile <pre>{% block %} ... {% endblock %}</pre> 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 <pre>{% block %}</pre> poate fi suprascrisă de alt template, numit template copil.
 +
 +
Pentru o lizibilitate sporită Twig permite alocarea de nume fiecărui block.
 +
<html><div class="highlight">
 +
<pre>
 +
<span class="cp">{%</span> <span class="k">block</span> <span class="nv">sidebar</span> <span class="cp">%}</span><span class="x"></span><span class="x">  </span><span class="cp">{%</span> <span class="k">block</span> <span class="nv">inner_sidebar</span> <span class="cp">%}</span><span class="x"></span><span class="x">      ...</span><span class="x">  </span><span class="cp">{%</span> <span class="k">endblock</span> <span class="nv">inner_sidebar</span> <span class="cp">%}</span><span class="x"></span><span class="cp">{%</span> <span class="k">endblock</span> <span class="nv">sidebar</span> <span class="cp">%}</span><span class="x"></span>
 +
</pre>
 +
</div></html>

Revision as of 20:02, 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 Katapulta un template este un simplu fișier cu extensia .html care conține taguri HTML, CSS și Twig.

Î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'] }}

Dacă o variabilă sau un atribut nu există, va fi returnată valoarea
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 iată un exemplu.

Template-ul de bază

<!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 %}
      &copy; Copyright 2009 by <a href="http://domain.invalid/">you</a>.
    {% endblock %}
  </div>
</body>
</html>

În acest exemplu, tag-urile
{% 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 %}