Advanced WebMake

In my last article I covered the basics of creating a Web site using WebMake, a simple offline content management system written in Perl that creates Web sites using templates. In this article I’ll introduce some more advanced topics and techniques.

The WebMake example for this article, advanced.wmk, contains page, header, and footer templates similar to those in the first article. One new feature in this file is the <contenttable> section at the top of the file. A contenttable gives you a place to quickly define multiple name-value pairs. In this case the name of the site’s author and his e-mail address are defined. These values of these tags are referenced using the $[name] notation as shown in footer.txt.

Using images

WebMake’s HTML cleaner automatically adds height and width attributes to <img> tags on your pages. If you later edit a picture and change its dimensions without changing its filename WebMake will not update the height and width attributes when it creates the page. This results in a picture that displays poorly when the page is viewed. To force WebMake to update these attributes you can either rename the picture or delete the cache.db file associated with the site. This file is typically located in a subdirectory off of the .webmake directory in your home directory. For example, .webmake/home_rkrause_articles_webmake_advanced_advanced/ is the path to the cache.db file for advanced.wmk on my machine. If this file is deleted, WebMake will regenerate the entire site.

Creating breadcrumb trails

Breadcrumb trails show the path the visitor took through the a site to get to the current page. This makes it easy to go back several levels without repeatedly using the back button or starting over at the home page.

WebMake uses sitemap information when it generates breadcrumb trails. Instructions for creating sitemaps were covered in the last article.

To generate breadcrumb trails you first need to define some templates to control how the breadcrumb looks. For complete control you can define three templates: btop for the top level in the trail, blevel for levels below the top, and btail for the bottom-most, or currently viewed, page.

The breadcrumb trail templates are shown below:

<template name=btop>
   [ $[${name}.title] /
</template>

<template name=blevel>$[${name}.title] /
</template>

<template name=btail>$[${name}.title] ]
</template>

A trail created with the above templates looks like:

[ home title / level title / current page title ]

To generate the trail you must add a section to the advanced.wmk file. This tag specifies the name of the breadcrumb trail, the sitemap to use for creating trails, and the names of the templates to use for each item in the trail. An example is shown below:

<breadcrumbs name=crumbtrail map=sitemapname
   top=btop
   tail=btail
   level=blevel />

To add the trail to a Web page, use the $[breadcrumbs] construct:

$[crumbtrail]

I usually define the btop template with “Home” as the page name and “index.html” as its link instead of using ${name}.title and ${url}.

Templates within templates

WebMake’s strongest feature is the ability to use templates for frequently used content. Using templates within templates is illustrated in the page_template definition of the advanced.wmk file, which inserts the header and footer templates in to each page.

To generate many pages with an identical layout but containing unique information you can use templates and metadata. I have used this method to create employee pages where the layout of each employee’s page was controlled by a template but the information shown was unique for that employee. In this example the template for each employee’s page is called employee_template.txt. Since this is just a template to use when creating each employee’s page and won’t be a page itself, its map value is set to false so it won’t show up in a sitemap.

The unique items such as name, department, extension, and hire date are set through metadata. Decide what to name each metadata field and use WebMake’s $[this.metadata] construct to show the values. In this example the metadata fields are named employee_name, employee_department, employee_ext, and employee_hired.

Define content for each employee and assign values to metadata with <wmmeta> tags. Two content definitions, employee1.txt and employee2.txt, are used here. In each of these employee pages call the employee layout template with the following line:

	${employee_info_template}

Finally, add each of the employee content definitions to the <out> section at the bottom of the advanced.wmk file.

Creating an online catalog is a more complex example of using templates within templates. In addition to the catalog page layout being built from a template, each item shown on the page is built from a template.

First define a template to be used for each item in the catalog. In this example it is called catalogitem.txt. It generates a table row with columns for displaying a picture of a product, its name, description, and price.

The template definition for the catalog item is a little different than previous templates. Instead of using $[this.variable] to show the product information, you need to use the same construct as used in the breadcrumb trail templates: $[${name}.variable]

Next you need to define <content> items for each product you want to display and assign metadata values for product name, picture location, description, price, etc. In the advanced.wmk file these content items are named item1.txt and item2.txt.

Now define the content for the catalog itself. This is named catalog.txt in the advanced.wmk file. To show products using the catalog_item template you use the following call:

	${catalog_item.txt: name=product}

Here catalog_item is the name of the template you defined to control the item layout in the catalog. The name of each product is assigned to “name” to create the line for that particular product.

To show two items defined as product1.txt and product2.txt you would use these lines:

	${catalog_item.txt: name=product1.txt}
	${catalog_item.txt: name=product2.txt}

If you generate a site map, the catalog item definitions will appear, which probably isn’t what you want. However, if you set map=false on the catalog items then the catalog pages won’t generate properly. To get around this you can either not create a sitemap or set map to false on the catalog items, run WebMake to make the catalog, then set map to true and run WebMake again to create a valid site map. Another alternative is to not use the map values and just delete the offending lines from the site map by hand.

Ralph Krause is a Webmaster, Delphi programmer, and writer who lives in Michigan.