aPeel is very flexible as far as customization goes. As a designer you have complete control over the look and feel of your site.
liquid templates are just normal HTML pages (or page fragments) that have a few special characteristics. Dynamic variables will be made available at the time the page is sent from the server. To reference a variable you enclose the variable name in a double set of curly braces like so : {{ variable_name }}
Liquid for designers is a good overview of the Liquid templating language and the control structures available.
Here is a screen shot of the 'About Us' page of the aPeel website. We'll use it to illustrate the different sections of the page.
Here is that page highlighting the layout (the template portion of the page is greyed out):
And here is the same page with just the template portion highlighted (the layout has been greyed out):
Here is another page on the site that shares the same layout, but has a different template.
The outer most portions of the page is called the layout. The layout usually includes the header bar, menus, and footer. A basic layout might look like this.
<html>
<head>
<title>A basic layout example</title>
</head>
<body>
<h1>Welcome to the site!</h1>
<hr>
{{ body_content }}
<hr>
© 2008 aPeel. Etc....
</body>
</html>
Pretty simple, eh? {{ body_content }} is a variable that will be passed in to the layout at the time it is rendered. if your layout does not include a call to {{ body_content }} then your layout has no way to include the dynamic content into the page. (OK, this isn't entirely true. You could code up your own alternative to {{ body_content }}, but we'll cover that later.)
it's also a good idea to call a dynamic variable in the title element of the head. That way the browsers title bar will display the title of your page. You might also want to include a string to remind people what site they are on. Something like <title>{{ page.title }} :: aPeel </title>
So a more complete page would look like this.
<html>
<head>
<title>{{ page.title }}</title>
</head>
<body>
{{ 'logo.png' | image }}
<h1>Welcome to the site!</h1>
<hr>
{{ body_content }}
<hr>
© 2008 aPeel. Etc....
</body>
</html>
If you looked closely at that last example you might have noticed {{ 'logo.png' | image }}. This is a short hand way of constructing an image tag. It will create an img tag and set the src to the logo.png file in your files/images directory. Something like this:
<img src='/files/images/logo.png'/>
Just for reference this symbol: | is called a pipe. In liquid templates a pipe is used to send a piece of text through a filter. The previous example is piping the text 'logo.png' to the image filter, which produces the img tag.
The template is just a small fragment of HTML that is responsible for setting up the general structure for the content area of the page. For many sites you will only have one template at it will look like this.
<h1> {{ page.title }} </h1>
<div id="pageText">
{{ page.text }}
</div>
For a more advanced site you might want to have a few pages with a content area arranged in a two column format. You could leave it up to the user to construct the columns in the editor, but it would be better if you could handle that part of the layout and just give them a way to indicate which content should fill the spot that you make.
<div id="pageBody">
<table id="column_table" cellspacing="10">
<tr>
<td valign="top">
<h1> {{ page.title }} </h1>
{{ page.text }}
</td>
{% if side_bar %}
<td valign="top" id="sideBar">
{{ side_bar }}
</td>
{% endif %}
</tr>
</table>
</div>
First the content of the page as it is stored in the database will be processed as a liquid template. This means that you can insert some active content into your pages. Then a template is rendered with the content of the page being passed in. Finally the layout is rendered with the result of the previous rendering stage being available.
Page text --> Template --> Layout ------|-----> Happy visitors! ;)