My GTML Page

I really like the simplicity of GTML. If you're creating web-sites that consist of static pages (such as this one) then you really don't need anything more sophisticated than this perl-script.

Development has currently stopped on this project (the last release was in 2004), but in it's current form, GTML appears to be stable and perfectly capable of mantaining reasonably sized projects such as this one. In any case, the code is very well structured and could be modified by anyone with a reasonable grasp of programming in Perl.

I will be using this page for posting little 'lessons' that I've learned while using GTML.

Generate an XHTML Compliant Site Map

The current documentation for GTML isn't clear (or even correct) in respect of redefining the TOC element macros.

In order to generate a 3-level sitemap that is XHTML compliant (like the one on this site) with the current version of GTML (3.5.4), you have to redefine the TOC macros to output '<DIV>' tags instead of '<UL>/<LI>' tags and define a few CSS2 classes to indent them correctly.

Step 1: Put the following definitions at the top of your GTML Project file (something.gtp):

define __TOC_1__        (((MARKER0)))
define __TOC_2__        (((MARKER0)))
define __TOC_3__        (((MARKER0)))
define __TOC_1_ITEM__   <div class="sitemap-1"><a href="(((MARKER0)))">(((MARKER1)))</a></div>
define __TOC_2_ITEM__   <div class="sitemap-2"><a href="(((MARKER0)))">(((MARKER1)))</a></div>
define __TOC_3_ITEM__   <div class="sitemap-3"><a href="(((MARKER0)))">(((MARKER1)))</a></div>

Step 2: Add the following lines to your site's cascading style-sheet:

div.sitemap-1 {
	display: list-item ;
	font-size: 1.2em ;
	font-weight: bold ;
	margin: 5px 0px 5px 50px ; /* top right bottom left */
}

div.sitemap-2 {
	display: list-item ;
	font-size: 1.2em ;
	margin: 3px 0px 3px 80px ; /* top right bottom left */
}

div.sitemap-3 {
	display: list-item ;
	font-size: 1.1em ;
	margin: 2px 0px 2px 110px ; /* top right bottom left */
}

Notes:

  • Defining your site map this way gives you more control over the style and layout.
  • Using the CSS2 classes, you can give each level of item it's own style which can improve readability.
  • Indentation is controlled by the margin-left value of each class, but adding additional margins all around the elements can improve the layout further.
  • You will need to define additional TOC macros and CSS2 classes for additional levels (4,5,6 etc), if your hierachy needs it. I aim to keep the hierarchy depth to no more than 3 levels.
  • You can use custom bullet graphics by adding "list-style-image: url(bullet.gif);" to each class. The graphic files for the custom bullets may have to go in the same folder as the style-sheet (.css) file.
  • Of course you can rename the CSS2 classes to anything you like - just make sure the TOC macros match the class names.

Page Last Modified: 15th Feb 2008 at 08:29:39