What is Chalk?

Graffiti uses a very simple templating language to render its themes called Chalk (Chalk is the combination of NVelocity and Graffiti goodies).

While we do call this a language, do not let the name full you. Chalk is much simpler than anything you have used to build web pages in the past. With this system, you can write your HTML/CSS as you would do normally and then decorate it Chalk. When Graffiti renders a view file, it will find all of your Chalk items and replace with your site content.

Here are some of the more common things you will do with Chalk.

Properties - Format $ItemName.PropertyName - properties allow you access to addition information about an item. As an example, to display the title of a post, you would use $post.Title

Methods - Methods are similar to properties except they usually require you supply additional information. As an example, to render a list of comma seperated tags as links for the current post and wanted to avoid writing a lot of Chalk, you could use the TagList method on the macros helper: $macros.TagList($post.TagList). Here we are passing in the $post.TagList property to the macros.TagList method.

Conditions - There are times you will want content shown only if a certain criteria is met, to do so you can use an if/elseif/else. Most conditional operators are supported (==, >, >=, <, <=, !=) Examples:

Render the CSS class if the post and comment have the same user.

#if($comment.CreatedBy == $post.CreatedBy) class="author" #end

In the example above, if the values are the same, value after the second ) and before #end will be rendered to the browser.

You can also use an else and else if:

#if($where == "category")
<h2 class="archive_head">Entries categorized '$category.Name'</h2>
#elseif($where == "tag")
<h2 class="archive_head">Entries tagged '$tag'</h2>
#elseif($where == "search")
<h2 class="archive_head">Search Results for '$macros.SearchQuery'</h2>
#else
<h2 class="archive_head">Welcome to my site!</h2>
#end

In the example above, we want to render an H2 element depending on the value of the $where value. If we do not find a match, the #else will be used.

Loops - Chalk allows you to quickly and easily loop through a site of items and list them. In addition, while in the loop, there is a special property called $count which lets you know what iteration you are on.

For example, the following sample code would write an unordered list of posts as a link with the title of the post as link text.

#foreach($post in $posts)
   <li><a href="$post.Url">$post.Title</a></li>
#end 

This is simple enough, but we it can start to get complicated when you want apply different formatting for alternating rows, handle the first or last item differently, or even display a special message when no items are present. Thankfully, there is a really simple syntax you can use to handle all of this and more.

#foreach($post in $posts)
#each (this is optional since its the default section)
       text which appears for each item
#before
       text which appears before each item
#after
       text which appears after each item
#between
       text which appears between each two items
#odd
       text which appears for every other item, including the first
#even
       text which appears for every other item, starting with the second
#nodata
       Content rendered if $items evaluated to null or empty
#beforeall
       text which appears before the loop, only if there are items
       matching condition
#afterall
       text which appears after the loop, only of there are items
       matching condition
#end

All inner sections are optional, and they can appear in any order multiple times (sections with same name will have their content appended)

A few notes about NVelocity

  • NVelocity is a port of the java Velocity project. There is little documentation on NVelocity, but the syntax is exactly the same, so if you want to understand this on a very low level, this is the place to start.
  • We are using a version of NVelocity which has been updated by the Castle Project team. Many thanks to this community for some very welcomed additions.  In particular, this version of NVelocity added the special foreach loop processing.