example: basic overlay

Here is a simple example, showing a frequently occuring case
of having a template overlay another’s positive-space.
We use a base template that defines a page layout, and three sub-templates.
We overlay the base.html template and override one of
the three sub-templates, namely #content.

The templates

base.html

<html>
<head><title>template = ${title}</title></head>
<body>          <span> -ve space (base.html) </span>
  $begin{header} +ve space: base header $end{header}
  $begin{content} +ve space: base content $end{content}
  $begin{footer} +ve space: base footer $end{footer}
  <table class="layout">
    <tr><td>$evoque{#header}</td></tr>
    <tr><td>$evoque{#content}</td></tr>
    <tr><td>$evoque{#footer}</td></tr>
  </table>
</body>
</html>
  • just a normal template, perfectly usable as is
  • defines 3 nested templates, header, content, footer, and evoques them
  • no need to be aware of any overlays over it

overlay.html

$overlay{base.html}
        -ve space (overlay.html)
$begin{content} overlay ${parametrized} content $end{content}
        -ve space (overlay.html)
  • positive overlay template on base.html, own negative space is ignored
  • overrides #content, one of the 3 nested templates defined by base.html
  • if we add definitons for other nested (except #header and #footer
    that are defined in base) they would be ignored
  • when evoque’d directly, this template is rendered with:
    • the -ve space from base.html
    • own #content
    • the #header and #footer from base.html

Output

Rendering the overlay:

name = "overlay.html"
domain.get_template(name).evoque(title=name, parametrized="HAPPY")

Will give the following output:

<html>
<head><title>template = overlay.html</title></head>
<body>          <span> -ve space (base.html) </span>
  <table class="layout">
    <tr><td> +ve space: base header </td></tr>
    <tr><td> overlay HAPPY content </td></tr>
    <tr><td> +ve space: base footer </td></tr>
  </table>
</body>
</html>