![[Image: The IceFrog]](frog150.png)
IceFrog seperates the content from the design for your web pages. As a result, it's easily to maintain a common look and feel across a web site and to change the look and feel quickly.
IceFrog is built on Template Toolkit, so you get the powerful, rich, and robust template support that Template Toolkit is famous for.
Different portions of the web site can have different looks and feels. IceFrog also allows you to automatically generate "breadcrumbs" indicating where in the site the user is. Above you can see breadcrumbs showing that you are in "About" which is a child page of "IceFrog".
IceFrog can help you manage button bars. The button bar at the left of this page highlights the selected page. Some sections have child pages which appear in the button bar when you are in that section. Again, IceFrog is managing this, individual pages simply specify which section they are in.
Of course all of these features are optional and can be used however you want.
For a good example of what IceFrog is capable of, check out highprogrammer.com. The entire domain is managed by IceFrog. The majority of the site has a minimal design, the role-playing game section has another design, the Shadowrun section has another, and the Amber section has yet another.
IceFrog strives to use relative links whenever possible, making it easy to move from location to location while keeping everything working.
IceFrog runs before you place your web site on the public web. The resulting pages are static, meaning you don't need CGI, PHP, ASP, or other support on the web server. The resulting pages will be served extremely fast because they require no further processing. However, if you have dynamic parts of your site, IceFrog can be used to generate partially completed template for final use.
IceFrog is completely backward compatible with your existing site. Any file that hasn't been converted to IceFrog will be copied directly into the destination directory. As a result, you can easily start using IceFrog and convert your existing site at your own pace.
You specify one or more template files. These files look exactly like your normal HTML (or PHP, or ASP, or whatever) pages, but the content has been removed and replaced with Template Toolkit and IceFrog commands. A minimal template file might look like the following.
<html>
<head>
<title>[% title %]></title>
<!--% IF description.defined %-->
<meta name="description" content="[% description %]">
<!--% END %-->
<!--% IF keywords.defined %-->
<meta name="keywords" content="[% keywords %]">
<!--% END %-->
</head>
<body>
<img src="[% PATHTO("../images/mylogo.png") %]" style="float:left">
<h1>[% title %]></h2>
<ul>
<li><a href="[% PATHTO("../") %]">Home page</a>
<li><a href="[% PATHTO("../FAQ.html"]) %">FAQ</a>
</ul>
<div style="border: 2px solid black">
[% body %]
<!--% IF 0 %-->
This text is just here to flesh out the template page,
making it easier to do layout while doing design. This
text will disappear when the page is generated.
<!--% END %-->
</div>
</body>
</html>
(Note, the PATHTO's about all start with ../. This is because path are relative to the template file. The template file is typically stored in a subdirectory of the actual site. PATHTO will correctly resolve the path relative to your actual concrete file.)
Naturally, your template file will likely be much more complex, including any formatting you wish to share across your site.
Given a single template file, you then create one or more specific files. For example, to create a main page for your site, you might create an index.html.ifi file which will be transformed into index.html in your destination directory. A minimal example might include:
title: Gnomovision keywords: gnomovision, passes, compilers body<<ENDOFBODY <p>Gnomovision makes passes at compilers. It's the example program given in the <a href="http://www.gnu.org/copyleft/gpl.html"> GNU General Public License</a> ENDOFBODY
The generated HTML file might look like:
<html>
<head>
<title>Gnomovision</title>
<meta name="keywords" content="gnomovision, passes, compilers">
</head>
<body>
<img src="images/mylogo.png" style="float:left">
<h1>Gnomovision></h2>
<ul>
<li><a href="index.html">Home page</a>
<li><a href="FAQ.html">FAQ</a>
</ul>
<div style="border: 2px solid black">
<p>Gnomovision makes passes at compilers.
It's the example program given in the
<a href="http://www.gnu.org/copyleft/gpl.html">
GNU General Public License</a>
</div>
</body>
</html>