Design:Template
From Katapulta
(Difference between revisions)
m (→Tag-ul Include și Widget-urile) |
m (→Tag-ul Include și Widget-urile) |
||
| Line 24: | Line 24: | ||
</pre></div></html> | </pre></div></html> | ||
| - | <div class="note"><span>Recomandare:</span> În temele Katapulta widget-urile sunt create într-un folder denumit ''widgets''. | + | <div class="note"><span>Recomandare:</span> În temele Katapulta widget-urile sunt create într-un folder denumit ''widgets''.</div> |
| - | </div> | + | |
| + | Mai jos prezentăm câteva exemple de widget-uri: | ||
| + | |||
| + | Afișează categoriile de articole din Blog: | ||
| + | <html><div class="highlight"><pre> | ||
| + | <span class="x"><div class="widget-box"></span> | ||
| + | <span class="x"> <h4>Articole</h4></span> | ||
| + | <span class="x"> <ul id="blog-categories"></span> | ||
| + | <span class="x"> </span><span class="cp">{%</span> <span class="k">for</span> <span class="nv">category</span> <span class="k">in</span> <span class="nv">blog.categories</span> <span class="cp">%}</span><span class="x"></span> | ||
| + | <span class="x"> <li id="category_</span><span class="cp">{{</span> <span class="nv">category.id</span> <span class="cp">}}</span><span class="x">"></span> | ||
| + | <span class="x"> <a href="</span><span class="cp">{{</span> <span class="nv">category.url</span> <span class="cp">}}</span><span class="x">" title="</span><span class="cp">{{</span> <span class="nv">category.title</span><span class="o">|</span><span class="nf">e</span> <span class="cp">}}</span><span class="x">"></span><span class="cp">{{</span> <span class="nv">category.title</span><span class="o">|</span><span class="nf">e</span> <span class="cp">}}</span><span class="x"></a></span> | ||
| + | <span class="x"> <ul id="postlist-category_</span><span class="cp">{{</span> <span class="nv">category.id</span> <span class="cp">}}</span><span class="x">" class="no-bull sub-list"></span> | ||
| + | <span class="x"> </span><span class="cp">{%</span> <span class="k">for</span> <span class="nv">post</span> <span class="k">in</span> <span class="nv">category.posts</span> <span class="cp">%}</span><span class="x"></span> | ||
| + | <span class="x"> <li><a href="</span><span class="cp">{{</span> <span class="nv">post.url</span> <span class="cp">}}</span><span class="x">"></span><span class="cp">{{</span> <span class="nv">post.title</span><span class="o">|</span><span class="nf">truncate</span><span class="o">(</span><span class="m">30</span><span class="o">)</span> <span class="cp">}}</span><span class="x"></a></li></span> | ||
| + | <span class="x"> </span><span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span><span class="x"></span> | ||
| + | <span class="x"> </ul></span> | ||
| + | <span class="x"> </li></span> | ||
| + | <span class="x"> </span><span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span><span class="x"></span> | ||
| + | <span class="x"> </ul></span> | ||
| + | <span class="x"></div></span> | ||
| + | |||
| + | </pre></div></html> | ||
Revision as of 10:05, 3 May 2011
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.
Template-urile Katapulta
- layout.html - acesta este privit ca un template „container”; toate celelalte template-uri extind (chiar dacă nu e obligatoriu) acest template, deci conținutul lor este redat în cadrul acestui template de bază. Dacă site-ul tău are elemente care se repetă cum ar fi un sidebar sau un meniu principal, atunci este recomandat ca acestea să fie definite aici.
- frontpage.html - redă pagina principală (index/home)
- product.html - redă pagina unui produs
- cart.html - redă pagina „coșul de cumpărături”
- collection.html - redă pagina unei colecții de produse
- collection-by-type.html - redă pagina colecției predefinite „Produse după tipul produsului”
- collection-by-vendor.html - redă pagina colecției predefinite „Produse după producător”
- catalog.html - redă catalogul de produse
- blog.html - redă pagina de blog a site-ului tău; aici apare lista de articole (post-uri)
- post.html - redă pagina unui articol din blog
- postcategory.html - redă pagina unei categorii de articole din blog
- page.html - redă pagina unei pagini statice
- 404.html - redă pagina de eroare 404
Tag-ul Include și Widget-urile
Tag-ul include este folosit pentru a include fragmente de cod în template-urile tale. Aceste fragmente de cod sunt numite în Katapulta widget-uri. Widget-urile se folosesc în special când ai același cod html se repetă în mai multe template-uri. Pentru a nu rescrie de fiecare data același cod acesta se grupează în cadrul unui fișier folosit ca și widget.
Sintaxa pentru include este simplă:
{% include 'widgets/latestposts.html' %}
Recomandare: În temele Katapulta widget-urile sunt create într-un folder denumit widgets.
Mai jos prezentăm câteva exemple de widget-uri:
Afișează categoriile de articole din Blog:
<div class="widget-box">
<h4>Articole</h4>
<ul id="blog-categories">
{% for category in blog.categories %}
<li id="category_{{ category.id }}">
<a href="{{ category.url }}" title="{{ category.title|e }}">{{ category.title|e }}</a>
<ul id="postlist-category_{{ category.id }}" class="no-bull sub-list">
{% for post in category.posts %}
<li><a href="{{ post.url }}">{{ post.title|truncate(30) }}</a></li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</div>