Design:Layout.html
From Katapulta
(Difference between revisions)
m (Created page with "==Introducere== Fișierul '''layout.html''' este un fișier HTML/XHTML care conține și tag-uri Twig. ==Variabile== În template-ul ''layout.html'' ai acces la toate [[Design:V...") |
m (→Introducere) |
||
| Line 1: | Line 1: | ||
==Introducere== | ==Introducere== | ||
| - | Fișierul '''layout.html''' este un fișier HTML/XHTML care conține și tag-uri Twig. | + | Fișierul '''layout.html''' este un fișier HTML/XHTML care conține și tag-uri [[Design:Twig|Twig]]. |
| + | |||
| + | <html><div class="highlight"> | ||
| + | <pre> | ||
| + | <span class="x"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span> | ||
| + | <span class="x"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"></span> | ||
| + | <span class="x"><head></span> | ||
| + | <span class="x"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></span> | ||
| + | <span class="x"> <title></span><span class="cp">{%</span> <span class="k">block</span> <span class="nv">title</span> <span class="cp">%}</span><span class="x">My Shop</span><span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span><span class="x"></title></span> | ||
| + | |||
| + | <span class="x"> <link rel="stylesheet" type="text/css" href="</span><span class="cp">{{</span><span class="s1">'mystyle.css'</span><span class="o">|</span><span class="nf">asset_url</span><span class="cp">}}</span><span class="x">" /></span> | ||
| + | <span class="x"> <script type="text/javascript" src="</span><span class="cp">{{</span><span class="s1">'myscript.js'</span><span class="o">|</span><span class="nf">asset_url</span><span class="cp">}}</span><span class="x">"></script></span> | ||
| + | <span class="x"></head></span> | ||
| + | |||
| + | <span class="x"><body></span> | ||
| + | |||
| + | <span class="x"> <div id="header"></span> | ||
| + | <span class="x"> </span><span class="cp">{%</span> <span class="k">block</span> <span class="nv">header</span> <span class="cp">%}</span><span class="x"></span> | ||
| + | <span class="x"> <h1 class="logo"><a href="</span><span class="cp">{{</span> <span class="nv">shop.url</span> <span class="cp">}}</span><span class="x">" title="</span><span class="cp">{{</span> <span class="nv">shop.name</span> <span class="cp">}}</span><span class="x">"></span><span class="cp">{{</span> <span class="nv">shop.name</span> <span class="cp">}}</span><span class="x"></a></h1> </span> | ||
| + | <span class="x"> </span><span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span><span class="x"></span> | ||
| + | <span class="x"> </div></span> | ||
| + | |||
| + | <span class="x"> <div id="main-menu"></span> | ||
| + | <span class="x"> </span><span class="cp">{%</span> <span class="k">block</span> <span class="nv">mainmenu</span> <span class="cp">%}</span><span class="x"></span> | ||
| + | <span class="x"> <ul></span> | ||
| + | <span class="x"> </span><span class="cp">{%</span> <span class="k">for</span> <span class="nv">link</span> <span class="k">in</span> <span class="nv">link_lists</span><span class="o">[</span><span class="s1">'main-menu'</span><span class="o">]</span><span class="nv">.links</span> <span class="cp">%}</span><span class="x"></span> | ||
| + | <span class="x"> <li><a href="</span><span class="cp">{{</span> <span class="nv">link.url</span> <span class="cp">}}</span><span class="x">" </span><span class="cp">{%</span> <span class="k">if</span> <span class="nv">link.url</span> <span class="o">==</span> <span class="nv">active_url</span> <span class="cp">%}</span><span class="x"> class="current" </span><span class="cp">{%</span> <span class="k">endif</span> <span class="cp">%}</span><span class="x">></span><span class="cp">{{</span> <span class="nv">link.title</span><span class="o">|</span><span class="nf">e</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"> </span><span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span><span class="x"></span> | ||
| + | <span class="x"> </div></span> | ||
| + | |||
| + | <span class="x"> <div id="container"></span> | ||
| + | <span class="x"> <div id="sidebar"></span> | ||
| + | <span class="x"> </span><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">include</span> <span class="s1">'widgets/cartsummary.html'</span> <span class="cp">%}</span><span class="x"></span> | ||
| + | <span class="x"> </span><span class="cp">{%</span> <span class="k">include</span> <span class="s1">'widgets/shopbyvendor.html'</span> <span class="cp">%}</span><span class="x"></span> | ||
| + | <span class="x"> </span><span class="cp">{%</span> <span class="k">include</span> <span class="s1">'widgets/shopbytype.html'</span> <span class="cp">%}</span><span class="x"></span> | ||
| + | <span class="x"> </span><span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span><span class="x"></span> | ||
| + | <span class="x"> </div></span> | ||
| + | <span class="x"> </span> | ||
| + | <span class="x"> <div id="content"></span> | ||
| + | <span class="x"> </span><span class="cp">{%</span> <span class="k">block</span> <span class="nv">content</span> <span class="cp">%}</span><span class="x"></span> | ||
| + | <span class="x"> <p>[...content here]</p></span> | ||
| + | <span class="x"> </span><span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span><span class="x"></span> | ||
| + | <span class="x"> </div></span> | ||
| + | <span class="x"> </div></span> | ||
| + | |||
| + | <span class="x"> <div id="footer"></span> | ||
| + | <span class="x"> </span><span class="cp">{%</span> <span class="k">block</span> <span class="nv">footermenu</span> <span class="cp">%}</span><span class="x"></span> | ||
| + | <span class="x"> <ul></span> | ||
| + | <span class="x"> <li><a href="</span><span class="cp">{{</span> <span class="nv">pages</span><span class="o">[</span><span class="s1">'about'</span><span class="o">]</span><span class="nv">.url</span> <span class="cp">}}</span><span class="x">">About Us</a></li></span> | ||
| + | <span class="x"> <li><a href="</span><span class="cp">{{</span> <span class="nv">pages</span><span class="o">[</span><span class="s1">'contact'</span><span class="o">]</span><span class="nv">.url</span> <span class="cp">}}</span><span class="x">">Contact Us</a></li></span> | ||
| + | <span class="x"> <li><a href="</span><span class="cp">{{</span> <span class="nv">pages</span><span class="o">[</span><span class="s1">'terms'</span><span class="o">]</span><span class="nv">.url</span> <span class="cp">}}</span><span class="x">">Terms and conditions</a></li></span> | ||
| + | <span class="x"> </ul></span> | ||
| + | <span class="x"> </span><span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span><span class="x"></span> | ||
| + | <span class="x"> </span> | ||
| + | <span class="x"> </span><span class="cp">{%</span> <span class="k">block</span> <span class="nv">copyright</span> <span class="cp">%}</span><span class="x"></span> | ||
| + | <span class="x"> <p>&copy; 2011. All Rights Reserved.</p></span> | ||
| + | <span class="x"> </span><span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span><span class="x"> </span> | ||
| + | <span class="x"> </div></span> | ||
| + | |||
| + | <span class="x"></body></span> | ||
| + | <span class="x"></html></span> | ||
| + | |||
| + | </pre> | ||
| + | </div></html> | ||
==Variabile== | ==Variabile== | ||
În template-ul ''layout.html'' ai acces la toate [[Design:Variabile#Variabile globale|variabilele globale]]. | În template-ul ''layout.html'' ai acces la toate [[Design:Variabile#Variabile globale|variabilele globale]]. | ||
Revision as of 08:32, 29 April 2011
Introducere
Fișierul layout.html este un fișier HTML/XHTML care conține și tag-uri Twig.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{% block title %}My Shop{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{{'mystyle.css'|asset_url}}" />
<script type="text/javascript" src="{{'myscript.js'|asset_url}}"></script>
</head>
<body>
<div id="header">
{% block header %}
<h1 class="logo"><a href="{{ shop.url }}" title="{{ shop.name }}">{{ shop.name }}</a></h1>
{% endblock %}
</div>
<div id="main-menu">
{% block mainmenu %}
<ul>
{% for link in link_lists['main-menu'].links %}
<li><a href="{{ link.url }}" {% if link.url == active_url %} class="current" {% endif %}>{{ link.title|e }}</a></li>
{% endfor %}
</ul>
{% endblock %}
</div>
<div id="container">
<div id="sidebar">
{% block sidebar %}
{% include 'widgets/cartsummary.html' %}
{% include 'widgets/shopbyvendor.html' %}
{% include 'widgets/shopbytype.html' %}
{% endblock %}
</div>
<div id="content">
{% block content %}
<p>[...content here]</p>
{% endblock %}
</div>
</div>
<div id="footer">
{% block footermenu %}
<ul>
<li><a href="{{ pages['about'].url }}">About Us</a></li>
<li><a href="{{ pages['contact'].url }}">Contact Us</a></li>
<li><a href="{{ pages['terms'].url }}">Terms and conditions</a></li>
</ul>
{% endblock %}
{% block copyright %}
<p>© 2011. All Rights Reserved.</p>
{% endblock %}
</div>
</body>
</html>
Variabile
În template-ul layout.html ai acces la toate variabilele globale.