html to zafu

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

zafu ?

Once you have created a static xhtml template and imported it into zena, it’s time to start making it dynamic.

getting ready

This tutorial is based on adapting “VectorLover” from styleshout.com.

• login
• go to “skins”
• clic on the “add document” image (hover under ‘documents’)
• import the template
  
• enable “dev” mode in the admin section:
  
• create a test page and set it’s skin to “vectorLover”

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

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:

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 !):

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:

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

next ?

Once you understand the logic behind zafu, you can start exploring the reference manual on zafu (it has tons of examples).