Templating with Firedrop2Customising the Look of Your Blog![]() Introduction
Note You can change the names of the files used for these templates by editing the values in build.ini. Firedrop2 uses some special values in these templates. This page explains how to use the templates, and takes you through a simple example. For examples of how these look in practice, you can visit the following blogs which are created using Firedrop2 :
These blogs, and more, are aggregated at Planet Firedrop. TemplatesBefore we look at the specific templates I'll explain the basics of the templating system. Templating is done by a module called embedded_code that is built into Firedrop2 [1]. Several special values (about the blog or the entry being rendered) are available in the templates. There are two ways to use these values. Single Values<% body %> Any individual value put between <% ... %>, will be inserted into the template. Chunks of Code<# shared.archive_names.sort() # last ten archives archlist = shared.archive_names[-10:] # most recent first archlist.reverse() links = '<li><a href="%s">%s</a></li>' for archid, pagename in archlist: print line % (archid, pagename) #> <# .. #> allows you to put chunks of code in your templates. Everything printed by the code ends up in your final page. This allows you to do clever things, like automatically include links to your archived entries and categories. The code is Python. This is very easy to learn, but
you don't need to be a programmer to use it. You can get a long way just by
editing the examples. Special ValuesThe special values you have to work with in your templates are all listed on the templating reference page. page_template.htmlThis template is the HTML framework for all the pages that Firedrop2 produces for you. This means the front page, the archives, and the category pages. You use a few specific special values to include your titles and archives in the pages. Let's look at a simple example :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title><% options['title'] %>
<link rel="stylesheet" href="default.css" type="text/css" /></title>
<#
if comments_username:
print ("<script type='text/javascript' "
"src='http://www.haloscan.com/load/%s' ></script>" %
comments_username)
#>
</head>
<body>
<div id="nav">
<a class="navlink" href="#startcontent"> Skip in-page navigation</a> |
<a class="navlink" href="/index.html">Home</a> |
<a class="navlink" href="http://my.domain.com/">Main Blog</a> |
<a class="navlink" href="index.html">Techie Blog</a>
</div>
<div id="banner">
<a name="startcontent" id="startcontent"></a>
<div class="title">
<h1><% options['title'] %></h1>
<em><% options['description'] %></em>
</div>
</div>
<div id="mainbody">
<% body %>
</div>
<div id="sidebar">
<div class="indexblock">
<h2>Categories</h2>
<ul class="links">
<li><a href="all_by_date.html">All By Date</a></li>
<li><a href="all_by_category.html">All By Category</a></li>
<#
# this displays the links to the different categories
import urllib
categories = options.get('categories', [])
# just in case no entries are set
categories.sort()
a = 0
start = '<li><a href="%s">%s</a></li>'
while a < len(categories):
category = categories[a]
p = "arch_%s.html" % (category,)
pagename = urllib.quote(p)
print start % (pagename, category)
a += 1
#>
</ul>
</div>
<p> </p>
<div class="indexblock" >
<h2>Archives</h2>
<ul class="links">
<#
shared.archive_names.sort()
archlist = shared.archive_names[-10:]
# last ten archives
archlist.reverse()
for archid, pagename in archlist:
line = '<li><a href="' + pagename + '">' \
+ archid + '</a></li>'
print line
#>
</ul>
<ul class="links">
<li><a href="index.html">Front page</a></li>
<li><a href="index.xml">RSS Feed</a></li>
<li><a href="atom.xml">Atom Feed</a></li>
</ul>
</div>
<p> </p>
<div class="indexblock" >
<h2>Links</h2>
<ul class="links">
<li><a href="http://midtoad.org">midtoad.org</a></li>
<li>
<a href="http://voidspace.org.uk/python/firedrop2/index.html">
Firedrop</a>
</li>
</ul>
</div>
</div>
</body></html>
Note This is an example. It's a good place to start though. It might not look that simple to you, but this page template is divided into only a few distinct blocks between the <body> and </body> tag pair. Ahead of the <body> however, there is the html <head> section.
For a more complicated example of a template, that probably looks a bit better, go to the templating page. entry_template.htmlThis template is used for each entry. Several entries will be put together and used to form the body value of your pages. There are special values for use in your entry templates. These allow you to do things like have a permalink for each entry, and display the categories (with links) that each entry is in. Here is our example :
<a title="Permanent link to this post"
id="e<% entry.get_id() %>"
name="e<% entry.get_id() %>"
href="<% permalink(entry.get_id()) %>"
>#<% entry.get_id() %></a>
<h2><% entry.title %></h2>
<% entry_body %>
<p>
Posted by <strong><% options['author'] %></strong> on
<% entry.attributes['insert_date'] %>.
<br />Categories:
<#
import urllib
catlist = []
link = '<a href="%s">%s</a>'
for cat in entry.attributes.get('categories', []):
url = "arch_%s.shtml" % cat
catlist.append(link %(urllib.quote(url), cat))
print ', '.join(catlist)
#>
<#
if options['comments_system'] == 'haloscan':
print ('<br /><a href="javascript:HaloScan(\'<% comments_prefix %>'
'<% entry.get_id() %>\');" target="_self">')
print ('<script type="text/javascript">postCount(\'<% comments_prefix'
' %><% entry.get_id() %>\');</script></a> | ')
print ('<a href=javascript:HaloScanTB(\'<% comments_prefix %>'
'<% entry.get_id() %>\'); target=_self>')
print ('<script type="text/javascript">postCountTB(\'<% '
'comments_prefix %><% entry.get_id() %>\');</script></a>')
#>
</p>
Once you have set up your templates you are ready to Make an Entry. Note You can add a Del.icio.us It and a Digg It link to each of your blog entries by including something like the following in your entry template : <small>Like this post? <a href="http://digg.com/submit?phase=2&url=http://www.yourblog.com/ <% permalink(entry.get_id()) %>">Digg it</a> or < a href="http://del.icio.us/post?url=http://www.yourblog.com/ <% permalink(entry.get_id()) %>">Del.icio.us it</a>.</small> The lines here are split to fit on the page: rejoin them to make it work. ThemesNew to Firedrop in v.0.2.2 is a Themes plug-in, which is intended to make it easier for new users to change the look of their site (and show off some of Firedrop's capabilities). If you activate the Themes plug-in, you won't have to edit templates in order to change the look of your site, as Firedrop comes with 4 different themes. Each theme has its own set of page and entry templates, which you can customize. There's more information in Plugins. Return to Top |
|