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 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 iată un exemplu.
+
Pentru a înțelege mai ușor cele explicate sus prezentăm în continuare un exemplu.
-
 
+
===Template-ul de bază===
-
'''Template-ul de bază''', 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.
+
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 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 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 %}
      &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 %}