Edgewall Software

Changes between Version 1 and Version 2 of TracDev/HtmlTemplates


Ignore:
Timestamp:
Feb 25, 2016, 1:26:38 AM (8 years ago)
Author:
Christian Boos
Comment:

add some ASCII HTML art ;-)

Legend:

Unmodified
Added
Removed
Modified

  • TracDev/HtmlTemplates

    v1 v2  
    184184     - jtheme.html (as this is our default theme page)
    185185
    186 In more details, we describe what happens with the
     186A template which extends another can redefine the content of the //named blocks// defined in the extended template. This redefinition may or may not refer to the original content of the block in the extended template (`${ super() }`).
     187
     188We first give an overview of the three templates and how their content will be combined in the generated output.
     189
     190
     191
     192|--------------------------------------------------------------------------
     193||  __jtheme.html__    || \
     194||  __jlayout.html__ \\ //# extends jtheme.html//   || \
     195||  __jsearch.html__ \\ //# extends jlayout.html//  ||
     196|--------------------------------------------------------------------------
     197{{{#!td style="vertical-align:top"
     198{{{#!html
     199<div style="border: 1px dotted #dde; width: 21em">
     200&lt;html&gt;
     201<div style="background: #ccf; width: 20em; text-align: left; margin: .5em">
     202 &nbsp;&lt;head&gt;<br/>
     203 <div class="head" style="background: #aaf; width: 17em; margin: 1em">
     204  <em># block head</em> <br/>
     205  <em># endblock head</em>
     206 </div>
     207 &nbsp;&lt;/head&gt;
     208</div>
     209
     210<div style="background: #cfc; width: 20em; margin: .5em">
     211 &nbsp;&lt;body&gt;
     212 <div class="body" style="background: #beb; width: 17em; margin: 1em">
     213  <em># block body</em> <br/>
     214  &hellip; banner + metanav + mainnav + contextnav + warnings + notices &hellip;
     215  <div class="content" style="background: #9e9; width: 15em; margin: 1em">
     216   <em># block content</em> <br/>
     217   <em># endblock content</em>
     218  </div>
     219  &hellip; footer &hellip; <br/>
     220  <em># endblock body</em>
     221 </div>
     222 &nbsp;&lt;/body&gt;
     223</div>
     224&lt;/html&gt;
     225</div>
     226}}}
     227\\
     228 (//head// and //content// blocks \\
     229 have no default content)
     230}}}
     231{{{#!td style="vertical-align:top"
     232{{{#!html
     233<div style="border: 1px dotted #dde; width: 21em">
     234&lt;html&gt;
     235<div style="background: #ccf; width: 20em; text-align: left; margin: .5em">
     236 &nbsp;&lt;head&gt;<br/>
     237 <div class="head" style="background: #aaf; width: 17em; margin: 1em">
     238  <em># block head</em> <br/>
     239  &nbsp;&lt;title&gt;
     240  <div class="title" style="background: #99e; width: 10em; margin: 0 1em">
     241   <em># block title</em> <br/>
     242     - Trac <br/>
     243   <em># endblock title</em>
     244  </div> 
     245  &nbsp;&lt;/title&gt; <br/>
     246  &hellip; meta + link + script &hellip; <br/>
     247  <em># endblock head</em>
     248 </div>
     249 &nbsp;&lt;/head&gt;
     250</div>
     251
     252<div style="background: #cfc; width: 20em; margin: .5em">
     253 &nbsp;&lt;body&gt;
     254 <div class="content" style="background: #9e9; width: 17em; margin: 1em">
     255  <em># block content</em> <br/>
     256    &hellip; alternate formats &hellip; <br/>
     257  <em># endblock content</em>
     258 </div>
     259 &nbsp;&lt;/body&gt;
     260</div>
     261&lt;/html&gt;
     262</div>
     263}}}
     264\\
     265 (//head// and //content// blocks \\
     266 have default content)
     267}}}
     268{{{#!td style="vertical-align:top"
     269{{{#!html
     270<div style="border: 1px dotted #dde; width: 21em">
     271&lt;html&gt;
     272<div style="background: #ccf; width: 20em; text-align: left; margin: .5em">
     273 &nbsp;&lt;head&gt;<br/>
     274 &nbsp;&nbsp;&lt;title&gt; <br/>
     275 <div class="title" style="background: #b9e; width: 10em; margin: 0 1em; padding: .4em">
     276  <em># block title</em> <br/>
     277    Search <br/>
     278    <span style="background: #99e">${ super() }</span> <br/>
     279  <em># endblock title</em>
     280 </div> 
     281  &nbsp;&nbsp;&lt;/title&gt; <br/>
     282  <div class="head" style="background: #caf; width: 17em; margin: 1em; padding: .4em">
     283  <em># block head</em> <br/>
     284    <span style="background: #aaf">${ super() }</span> <br/>
     285    &hellip; meta &hellip; <br/>
     286  <em># endblock head</em>
     287 </div>
     288 &nbsp;&lt;/head&gt;
     289</div>
     290
     291<div style="background: #cfc; width: 20em; margin: .5em">
     292 &nbsp;&lt;body&gt;
     293 <div class="content" style="background: #be9; width: 17em; margin: 1em; padding: .4em">
     294  <em># block content</em> <br/>
     295    &lt;div class="content"&gt; <br/>
     296    &hellip; Search Results &hellip;  <br/>
     297    &lt;/div&gt; <br/>
     298    <span style="background: #9e9">${ super() }</span> <br/>
     299  <em># endblock content</em>
     300 </div>
     301 &nbsp;&lt;/body&gt;
     302</div>
     303&lt;/html&gt;
     304</div>
     305}}}
     306}}}
     307|--------------------------------------------------------------------------
     308{{{#!td colspan=3 style="vertical-align:top"
     309generated output:
     310{{{#!html
     311<div style="border: 1px dotted #dde; width: 21em; margin: 0 auto">
     312&lt;html&gt;
     313<div style="background: #ccf; width: 20em; text-align: left; margin: .5em">
     314 &nbsp;&lt;head&gt;<br/>
     315 <div class="head" style="background: #caf; width: 17em; margin: 1em; padding: .4em">
     316 <div style="background: #aaf">
     317  &nbsp;&nbsp;&lt;title&gt; <br/>
     318 <div class="title" style="background: #b9e; width: 10em; margin: 0 1em; padding: .4em">
     319    Search <br/>
     320    <span style="background: #99e">- Trac</span> <br/>
     321 </div> 
     322  &nbsp;&nbsp;&lt;/title&gt; <br/>
     323    &hellip; meta + link + script &hellip;
     324    </div>
     325    &hellip; meta &hellip; <br/>
     326  </div>
     327 &nbsp;&lt;/head&gt;
     328</div>
     329
     330<div style="background: #cfc; width: 20em; margin: .5em">
     331 &nbsp;&lt;body&gt;
     332 <div class="body" style="background: #beb; width: 17em; margin: 1em">
     333  &hellip; banner + metanav + mainnav + contextnav + warnings + notices &hellip;
     334 <div class="content" style="background: #be9; width: 12em; margin: 1em; padding: .4em">
     335    &lt;div class="content"&gt; <br/>
     336    &hellip; Search Results &hellip;  <br/>
     337    &lt;/div&gt; <br/>
     338    <span style="background: #9e9">&hellip; alternate formats &hellip;</span> <br/>
     339 </div>
     340  &hellip; footer &hellip; <br/>
     341 </div>
     342 &nbsp;&lt;/body&gt;
     343</div>
     344&lt;/html&gt;
     345</div>
     346}}}
     347}}}
     348
     349
     350Let's have a closer look at the content of each template, starting with the
     351most specific template, in our example the
    187352[source:cboos.git/trac/search/templates/jsearch.html jsearch.html] page:
    188353{{{#!html+jinja