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 => "js")}'></script>
This is better (also uses the template’s cachestamp):
<script src='#{path(project, :format => "js", :tsamp => find(1432).updated_at.to_i)}'></script>
Example

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