Personal tools
Namespaces
Variants
Actions

Design:Layout.html

From Katapulta

(Difference between revisions)
Jump to: navigation, search
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
 
(8 intermediate revisions not shown)
Line 1: Line 1:
-
==Introducere==
+
Fișierul '''layout.html''' este un fișier HTML/XHTML care conține și tag-uri [[Design:Twig|Twig]].
-
Fișierul '''layout.html''' este un fișier HTML/XHTML care conține și tag-uri Twig.
+
 +
Un exemplu de fișier de tip ''layout'' poate arăta astfel:
 +
 +
<html><div class="highlight">
 +
<pre>
 +
<span class="x">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</span>
 +
<span class="x">&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;</span>
 +
<span class="x">&lt;head&gt;</span>
 +
<span class="x">  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;</span>
 +
<span class="x">  &lt;title&gt;</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">&lt;/title&gt;</span>
 +
 +
<span class="x">  &lt;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">" /&gt;</span>
 +
<span class="x">  &lt;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">"&gt;&lt;/script&gt;</span>
 +
<span class="x">&lt;/head&gt;</span>
 +
 +
<span class="x">&lt;body&gt;</span>
 +
 +
<span class="x">  &lt;div id="header"&gt;</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">      &lt;h1 class="logo"&gt;&lt;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">"&gt;</span><span class="cp">{{</span> <span class="nv">shop.name</span> <span class="cp">}}</span><span class="x">&lt;/a&gt;&lt;/h1&gt;  </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">  &lt;/div&gt;</span>
 +
 +
<span class="x">  &lt;div id="main-menu"&gt;</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">      &lt;ul&gt;</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">        &lt;li&gt;&lt;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">&gt;</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">&lt;/a&gt;&lt;/li&gt;</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">      &lt;/ul&gt;</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">  &lt;/div&gt;</span>
 +
 +
<span class="x">  &lt;div id="container"&gt;</span>
 +
<span class="x">    &lt;div id="sidebar"&gt;</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">    &lt;/div&gt;</span>
 +
<span class="x">    </span>
 +
<span class="x">    &lt;div id="content"&gt;</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">        &lt;p&gt;[...content here]&lt;/p&gt;</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">    &lt;/div&gt;</span>
 +
<span class="x">  &lt;/div&gt;</span>
 +
 +
<span class="x">  &lt;div id="footer"&gt;</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">      &lt;ul&gt;</span>
 +
<span class="x">        &lt;li&gt;&lt;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">"&gt;About Us&lt;/a&gt;&lt;/li&gt;</span>
 +
<span class="x">        &lt;li&gt;&lt;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">"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;</span>
 +
<span class="x">        &lt;li&gt;&lt;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">"&gt;Terms and conditions&lt;/a&gt;&lt;/li&gt;</span>
 +
<span class="x">      &lt;/ul&gt;</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">      &lt;p&gt;&amp;copy; 2011. All Rights Reserved.&lt;/p&gt;</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">  &lt;/div&gt;</span>
 +
 +
<span class="x">&lt;/body&gt;</span>
 +
<span class="x">&lt;/html&gt;</span>
 +
 +
</pre>
 +
</div></html>
 +
 +
Aici vor fi definite blocurile de date ('''block''') care vor fi suprascrise de celelalte template-uri (product, collection, post, etc).
 +
 +
De exemplu, unul din blocurile importante care trebuie să se regăsească în orice temă Katapulta este cel denumit în exemplul de mai sus '''content''' (numele nu este important) care va si suprascris în toate template-urile cu conținutul specific fiecărui template.
 +
 +
<div class="note">
 +
<span>Notă:</span>
 +
<p>Pot fi definite mai multe fișiere de tip '''Layout''' având nume diferite și care pot fi folosite individual în template-uri.</p>
 +
</div>
==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]].

Latest revision as of 11:21, 29 April 2011

Fișierul layout.html este un fișier HTML/XHTML care conține și tag-uri Twig.

Un exemplu de fișier de tip layout poate arăta astfel: 

<!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>&copy; 2011. All Rights Reserved.</p>
    {% endblock %}  
  </div>

</body>
</html>

Aici vor fi definite blocurile de date (block) care vor fi suprascrise de celelalte template-uri (product, collection, post, etc).

De exemplu, unul din blocurile importante care trebuie să se regăsească în orice temă Katapulta este cel denumit în exemplul de mai sus content (numele nu este important) care va si suprascris în toate template-urile cu conținutul specific fiecărui template.

Notă:

Pot fi definite mai multe fișiere de tip Layout având nume diferite și care pot fi folosite individual în template-uri.

Variabile

În template-ul layout.html ai acces la toate variabilele globale.

Retrieved from "http://wiki.katapulta.ro/index.php/Design:Layout.html"