skins

An article by Gaspard Bucher

skins

Skins are used to define the layout of your websites. A skin contains assets (css, images) and templates (zafu). See the tutorials to create a new skin.

When rendering a page, zena selects the best zafu template based on the current node’s class, the rendering mode and the format (html, png, jpg, rss, js, csv, ical, ...).

You can also have special rendering tools to produce “pdf” or other binary formats if you write a simple rendering engine (see pdf brick for example).

js/css rendering

If you want to generate dynamic “css” or “js” content, you need to take special care because the server adds a “1 year cache” header on this kind of data. The simplest solution is to replace “js” and “css” extensions by “jsx” and “cssx”.

[Advanced stuff] The other solution if you want the cache to work and be able to update the content when changing the template is to somehow insert the template’s cachestamp in the url:

Let’s say the template id is 1432. We want some dynamic JS for the project:

This would cache any generated JS in the browser with the project’s cachestamp only:

<script src='#{path(project, :format =&gt; "js")}'></script>

This is better (also uses the template’s cachestamp):

<script src='#{path(project, :format =&gt; "js", :tsamp =&gt; find(1432).updated_at.to_i)}'></script>

Example

skins

Template selection examples based on the templates in the image above:

url node class mode format template used
project12.html Project html Project.zafu
docproject21.html DocProject html Project.zafu
document3.html Document html Node.zafu
document3.png Image png send document data
image3_pv.png Image pv png send image data with ‘pv’ mode (size/format)
project12_changes.html Project changes html Project-changes.zafu
project12_changes.rss Project changes rss Project-changes-rss.zafu
project12_foo.html Project foo html 404 error (no template for ‘foo’ mode)
project12.bar Project bar 404 error (no template for ‘bar’ format)

Note that DocProject is a specialization (sub-class) of Project. This is why it can be rendered using the “Project.zafu” template.

Url

When creating an url, the mode and format are encoded in a similar way:

Link with “rss” format and “changes” mode: "link title":14_changes.rss