Themes

In this tutorial we'll use the default Skrivr theme, and include all of Skrivr's features. The theme consists of nine HTML-files:

index.html
header.html
article.html
article-example.html
articles.html
static.html
category.html
category-example.html
footer.html

And three basic folders:

• css
• imgs
• js

The theme is essentially plain HTML with some Skrivr specific template-tags that pick up and render your content.

A post (or article)

This is the main type of content on a Skrivr site, the regular posts and articles you write and publish.

A post is a textfile that should be named like this in order to be published:

Categoryname_Slug_20110101.txt

For example:

Food I like_Best sushi in town_20110824.txt

The post "Best sushi in town" will now appear in the category "Food I like", as will any other post with a file name starting with "Food I like".

You can display posts on your main page (index.html), and create a main navigation for your Skrivr site with the {{ menu|raw }} template tag. We'll cover the menus in more detail later in this tutorial.

Pages

While a post or an article represents the constantly growing collection of content on a Skrivr powered site, you probably want some 'static' content as well. Like a contact, about or colophon page.

These types of pages are by default not not part of the main navigation. Therefore we have created the {{ static_menu|raw }} template tag with which you list your 'static' pages.

A static pages is created by Skrivr when you name a text file like this:

Static_PageTitle_20110101.txt

For example:

Static_Contact us_20110506.txt

More on menus later in this tutorial.

Note! Both the post and 'static' page menus can be placed anywhere in your Skrivr template.

Code and template-tags

To create a template that is easy to use and reusable you should use includes:

{% include 'header.html' %}

The post-feed

It's very easy to create a "loop" that outputs all your posts. In the Skrivr default theme we did it like this:

{% for post in post_feed %} 
    <div class="post"> 
        <p class="date">{{ post.date }} | in <a href="{{ post.categorylink }}">{{ post.category }}</ a></p> 
        <a href="{{ post.permalink }}">
            <h1>{{ post.headline }}</h1>
        </a> 
        {{ post.body|raw }} 
    </div> 
{% endfor %} 

It's a plain for-loop that says: for every post in the post-feed create a div with the class "post" and in that div display date, category and the body of the post.

Note! In the for-loop you must prefix the body tag with "post" so that it looks like this {{ post.body|raw }}.

The main menu

When you render the menu via the {{ menu|raw }} template tag Skrivr picks up the names of all your text files and sorts them into an array.

The array is then rendered as a list divided into sections and posts. This is how it looks, with the classes added by Skrivr:

<ul class="category-list">
    <li class="category-title">
        <h3>Examples</h3>
        <ul class="post-list">
            <li class="post-title">
                <a href="examples/getting-started-with-skrivr"> 
                    Getting started with Skrivr
                </a>
            </li>
            <li class="post-title">
                <a href="examples/skrivr-demotext">
                    Skrivr Demotext
                </a>
            </li>
            <li class="post-title">
                <a href="examples/working with-templates">
                    Working with templates
                </a>
            </li>
        </ul>
    </li>
</ul>

Depending on where in your template files you place the template tag, and how you style the menu-list in your CSS, you will be able to style the menu almost any way you like.

The static menu

Skrivr renders static pages via the template tag {{ static_pages|raw }} and the outputted markup looks like this:

<ul class="static-list">
    <li class="static-title">
        <a href="static/about"> About </a>
    </li>
    <li class="static-title">
        <a href="static/contact"> Contact us</a>
    </li>
    <li class="static-title">
        <a href="static/find-us"> Find us</a>
    </li>
</ul>

This menu can be placed anywhere in your HTML files and styled via your CSS.

Note! Skrivr is clever and recognizes file names both with and without spaces.

With: Static_ PageTitle _20110101.txt

Without: Static_PageTitle_20110101.txt