Fork me on GitHub

html to zafu

An article by Gaspard Bucher

Introduction to zafu by modifying an existing html document.

There is a video illustrating the content of this tutorial. The video’s content is not as recent as this page, though.

Zafustore

zafu ?

Once you have a static xhtml template you can make it dynamic by adding zafu. Zafu is zena’s templating language.

getting ready

To get a template you can play around with, you can create a new static xhtml template, export an exisiting one (both shown in create a skin) or import a template from a URL.

Importing a skin

Here we import the “VectorLover” template from a styleshout.com URL, but you may also import tgz files.

  • Login.
  • Go to “skins” section.
  • Click on the “add document” image (hover under ‘documents’).
  • On the “import” tab, either enter the URL of the template or upload the templates .tgz file (created or exported).
  • Select to import a skin, and click on finish to import it with all its templates.
    upload template
  • Enable “dev” mode in the admin section:
    dev mode
  • Create a test page and set it’s skin to the new one (e.g. “vectorLover”).

This is what you should see when you reload the test page:

vector blank

clic on image to view a larger version

Most pages usually contain some kind of list (blog) or a single item (post, page). We will start with adapting a single page.

title

On our template, we want to transform the part that says “Template Info” to the title of the page.

Open the template in the edit window. If your browser supports it (e.g. with a plugin like its-all-text), you can even open the template in the editor of your choice.

To do this, enlarge the development overlay box by hovering over the box located in the bottom right corner of the page when you are logged in as an administrator (and enabled under your login name), and click on the edit icon of the zafu template.

edit template

Change

<h2><a href="index.html" title="">Template Info</a></h2>

to

<h2 do='title' actions='all'><a href="index.html" title="">Template Info</a></h2>

and press “validate”. Your template should look like this (without the red border !):

title made dynamic

You can now try to change the title for this page with the usual edit buttons.

text

We will now change the main text starting with “VectorLover 1.0 is a free…” with our own:

Edit the template once more and insert <r:text> before the following

<r:text><p><strong>VectorLover 1.0...

and close the text tag where the template says “Good luck…” :

...
<p>Good luck and I hope you find my free templates useful!</p></r:text>

Press the validate button and once the test page has reloaded you should see this:

text made dynamic

You can now start typing text to see how it updates where the red arrow points (see zazen).

assets

To load assets that have a corresponding database node (include images etc.) from your templates, you can use relative URLs. (For static filesystem assets, refer to the fs_skin brick information. An example from a css file:

#header { background:url('img/header.png') }

If you want to load an arbitrary file from your site, that is not part of your template, use a link that contains the ID number of that file.

#header { background:url('/en/image271.png') }

Currently, such links will be converted to links that point directly to the asset cache when you press “parse names to ids” on the text document tab, or automatically when saving, and the converted link is written to the template.

This means that in order to continue taking advantage of asset caching after updating your assets, you will currently need to also update the links in the templates again.

conclusion

When starting a new website, we found that it is easy to first create a complete html page with lipsum text and dummy images. If your webpage looks pretty and you are happy with it (in fact, you stole it from some other website, but nobody should know, you changed the background color). Upload the html page and css and gently add the “do” tags to make your content dynamic.

next ?

Once you understand the logic behind the Data Model, Skins, and Quick Reference, you can start exploring the reference manual on zafu (it has tons of examples).

comments

  1. leave a comment