Fork me on GitHub

zazen

An article by Gaspard Bucher

Zazen is an adaptation of textile markup language. Everything textile does, zazen does too.

Using a markup language instead of HTML enhances a good separation between content (what you write) and style (how it is displayed). It eases consistent styling across all the website, and changing the design in the future. Saving content as HTML would also make it harder to render the content in non-html contexts (email, pdf, rss).

Basic textile

Here are some quick tips to start writing with textile. Please read the full reference for all the glory details.

Titles and paragraphs

To start a new paragraph, insert two line breaks:

This is the first paragraph.

This is the second.

To create a second level heading (first is usually used by the page title), insert h2. at the beginning of the line:

h2. second level heading

You can use h3,h4,h5 the same way.

Text modifiers

Add stars around a phrase or word to show it in bold (or whatever style ‘strong’ produces):

This is a *black* cat.

To produce italics, use underscore:

The _lazy_ snake.

Images and links

To insert an image, put it’s adress between exclamation marks:

!http://example.com/image.jpg!

To create a link put the title inside quotes and add double dots followed by the target url:

"my friend's site":http://example.com

Adaptations to zena

links

To create a link to another page in your cms, you can replace the target url by the node’s id:

see "this other page":123

If you want the link to use the page’s title, omit the text between quotes:

see "":123

If you do not know the node’s id, you can use the pseudo id syntax by replacing the id with double dots followed by some text to find the node:

see ""::other

If you have many pages named or containing the text ‘other’, you can add as many ’+’ marks at the end to find the next node:

see ""::other++

This “pseudo id” syntax is used in many places in zena. You can also use the “pseudo path” syntax:

see "this":(bird)
see "other":(/zena/images/bird)

anchor

If you want to link to a specific anchor on another page, use the number sign:

see "":22#links

You can even be funky to link to other’s parent page, using other’s title as anchor:

see "":22#[parent/title]

Anchor on the same page is plain textile:

see "hop":#hop

format/mode

For advanced users, you might need to link to a node with a specific format/mode:

see "":123.data node 123 in it's native data format (jpg,png,pdf,etc)
see "":123.xml node 123 in xml format
see "":123_med.xml node 123 rendered with 'med' mode in 'xml' format

A link to a small version of an image could be:

download: "small":30_std.data or "full":30.data image

images

You can insert an image by replacing the image’s adresse by the node’s id or pseudo id:

!12! or !:bird!

If you want to align the image on the left/center/right, use <,=,> (just like in textile):

!<.12! or !=.12! or !>.12!

If an image is too big for your text, you can change it’s size by adding a mode (see inserting images for details):

!12_med!

To add a title to an image, use the slash at the end. Leave the title blank to use the image’s summary:

!12/a pretty picture! or !12/!

Finally, you can combine all of this with a link:

!<.:bird.pv/just a bird!::other

document listing

You can list the documents contained in the current page by writing the following:

!{}!

If you want to list specific documents, write ids or pseudo ids separated by commas:

!{23,12,45,:flower}!

You can use alignement modifiers <,>,=:

!<.{12,45}!

image gallery

Display an inline gallery with the images contained in the current node:

![]!

Use the same options as document listings to set specific ids. You cannot change a gallery’s alignement.

![:zafu++,23]!

table helper

The new table helper allowed to insert a named table with:

|table_name|

then add/remove rows and edit the content directly on the page. (The “table_name” was used as a dynamic attribute.)

You may however create editable tables with a zafu template using the grid tag inside a
form for editing.
Grid can be used in different ways:
  • As a way to store and edit tables in properties.
  • As a way to create/update many objects at once.

comments

  1. Friday, October 24 2008 02:14 Gaspard

    PS: For the table stuff to work, you need to include the “tablekit” javascript:

    <r:javascripts/>
  2. leave a comment