Design:Introducere
From Katapulta
m |
m |
||
Line 1: | Line 1: | ||
- | + | În procesul de construire a unei teme Katapulta trebuie avute în vedere următoarele: | |
- | + | ||
- | + | ||
- | + | ||
- | |||
==Twig== | ==Twig== | ||
Twig este un limbaj folosit în Katapulta pentru designul template-urilor. Este folosit alături de HTML și CSS. În Twig există două tipuri de taguri: | Twig este un limbaj folosit în Katapulta pentru designul template-urilor. Este folosit alături de HTML și CSS. În Twig există două tipuri de taguri: | ||
Line 12: | Line 8: | ||
Mai jos este un exemplu care ilustrează cele explicate mai sus: | Mai jos este un exemplu care ilustrează cele explicate mai sus: | ||
- | <html | + | <html><div class="highlight"> |
<pre><span class="x"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"></span> | <pre><span class="x"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"></span> | ||
<span class="x"><html lang="en"></span> | <span class="x"><html lang="en"></span> | ||
Line 30: | Line 26: | ||
<span class="x"></html></span> | <span class="x"></html></span> | ||
</pre> | </pre> | ||
- | + | </div></html> | |
==Template-uri== | ==Template-uri== | ||
Line 46: | Line 42: | ||
==Filtre== | ==Filtre== | ||
Formatul de afișare a variabilelor poate fi modificat cu ajutorul filtrelor. De exemplu vrei să afișezi prețul de vânzare împreună cu moneda ''$10,99'', atunci folosești filtrul ''money'' astfel: | Formatul de afișare a variabilelor poate fi modificat cu ajutorul filtrelor. De exemplu vrei să afișezi prețul de vânzare împreună cu moneda ''$10,99'', atunci folosești filtrul ''money'' astfel: | ||
+ | <html><div class="highlight"> | ||
<pre> | <pre> | ||
- | {{ variant.price|money }} | + | <span class="cp">{{</span> <span class="nv">variant.price</span><span class="o">|</span><span class="nf">money</span> <span class="cp">}}</span><span class="x"></span> |
</pre> | </pre> | ||
+ | </div></html> | ||
Filtrul este separat de variabilă prin simbolul |. Deasemenea pot fi înlănțuite mai multe filtre. Rezultatul unui filtru va fi aplicat următorului filtru. | Filtrul este separat de variabilă prin simbolul |. Deasemenea pot fi înlănțuite mai multe filtre. Rezultatul unui filtru va fi aplicat următorului filtru. | ||
==Structuri de control== | ==Structuri de control== | ||
Structurile de control se referă la toate aspectele care controlează derularea unui program: structuri condiționale (<pre class="inline">if, elseif, else</pre>), structuri repetitive (<pre class="inline">for</pre>) și blocuri. Structurile de control apar între tagurile <pre class="inline">{% ... %}</pre>. | Structurile de control se referă la toate aspectele care controlează derularea unui program: structuri condiționale (<pre class="inline">if, elseif, else</pre>), structuri repetitive (<pre class="inline">for</pre>) și blocuri. Structurile de control apar între tagurile <pre class="inline">{% ... %}</pre>. |
Revision as of 09:57, 19 April 2011
În procesul de construire a unei teme Katapulta trebuie avute în vedere următoarele:
Contents |
Twig
Twig este un limbaj folosit în Katapulta pentru designul template-urilor. Este folosit alături de HTML și CSS. Î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
Mai jos este un exemplu care ilustrează cele explicate mai sus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>My Webpage</title>
</head>
<body>
<ul id="navigation">
{% for item in navigation %}
<li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endfor %}
</ul>
<h1>My Webpage</h1>
{{ a_variable }}
</body>
</html>
Template-uri
Template-urile Katapulta controlează modul cum va arăta magazinul tău pe web. De exemplu când un cumpărător vizualizează pagina unui produs, Katapulta va folosi template-ul product.html pentru afișarea paginii produsului respectiv. Dacă cumpărătorul vizualizează pagina de Blog a magazinului tău, template-ul blog.html va fi folosit.
În Katapulta, template-urile au întotdeauna extensia .html.
Variabile
Variabilele sunt date pe care le putem utiliza în magazinul nostru. Iată câteva exemple:
* collection.title - afisează denumirea unei colecții * variant.price - afisează prețul unui produs * shop.name - afișează numele magazinului
Filtre
Formatul de afișare a variabilelor poate fi modificat cu ajutorul filtrelor. De exemplu vrei să afișezi prețul de vânzare împreună cu moneda $10,99, atunci folosești filtrul money astfel:
{{ variant.price|money }}
Structuri 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
{% ... %}.