zpt
Version:
Zenon Page Templates - JS (ZPT-JS)
94 lines (85 loc) • 4.25 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>ZPT-JS reference - Attributes - METALFillSlot</title>
<script type="text/javascript" src="../lib/zpt.min.js" defer></script>
<script type="text/javascript" src="../js/zpt.js" defer></script>
<script type="text/javascript" src="../lib/syntaxHighlighter/lib.js"></script>
<link rel="stylesheet" type="text/css" href="../docs.css">
<link rel="stylesheet" type="text/css" href="../lib/syntaxHighlighter/theme.css">
</head>
<body>
<div data-use-macro="'page@templates.html'">
<div data-fill-slot="'page-header'">
<h1>ZPT-JS reference - Attributes - METALFillSlot</h1>
<ul>
<li><a href="#syntax">Syntax</a>.</li>
<li><a href="#description">Description</a>.</li>
<li><a href="#differences">Differences with ZPT</a>.</li>
<li><a href="#examples">Examples</a>.</li>
</ul>
</div>
<article data-fill-slot="'article'">
<h2 data-attributes="id 'syntax'">Syntax</h2>
<pre class="syntax">
argument ::= expression
</pre>
<h2 data-attributes="id 'description'">Description</h2>
<p>
The <em>data-fill-slot</em> statement customizes a macro by replacing a slot in the macro with the statement element (and its content).
</p>
<p>
The <em>data-fill-slot</em> statement must be used inside a <a href="attributes-METALUseMacro.html">data-use-macro</a> statement. Slot names must be unique within a macro.
</p>
<p>
If the named slot does not exist within the macro, the slot contents will be silently dropped.
</p>
<p>
Note: some parts extracted from <a href="https://zope.readthedocs.io/en/latest/zopebook/AppendixC.html#define-slot-define-a-macro-customization-point">Zope Page Templates Reference</a>.
</p>
<h2 data-attributes="id 'differences'">Differences with ZPT</h2>
<ul>
<li>
In ZPT the syntax is <em>argument ::= Name</em>, so all slot invokations are literals. ZPT-JS uses expressions.
</li>
<li>
Syntax of external macro invokation.
</li>
</ul>
<h2 data-attributes="id 'examples'">Examples</h2>
<p>
Given this macro::
</p>
<pre class="brush: html">
<div data-define-macro="enhacedSidebar">
Links
<div data-define-slot="links">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/support">Support</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</div>
<span data-define-slot="additional_info"></span>
</div>
</pre>
<p>
You can fill the <em>links</em> slot like so:
</p>
<pre class="brush: html">
<div data-use-macro="'enhacedSidebar'">
<div data-fill-slot="'links'">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/otherProducts">Other products</a></li>
<li><a href="/sales">Sales!</a></li>
</ul>
</div>
</div>
</pre>
</article>
</div>
</body>
</html>