G-Cows: Scripting Language for Web Content Management
Prev Chapter 4 A Real Site Next

4.6 Site Template

Now that we have a layout, we have to generalize it and turn it into a template. Remember the example about guitar amplifiers? We started from a data sheet referring to a specific amplifier and turned it into a generic template. Now we are going to turn a specific HTML page into a generic template.

Sources described in this section and next ones can be found under directory site-01 in the examples archive downloadable from http://www.g-cows.org.

First, we need an empty directory to work: create it and move inside

$ mkdir site-01
$ cd site-01

Now, create a subdirectory called lib/ to place our template scripts; these scripts are intended to be included from other scripts, and no HTML files will be created directly from them. In the previous tutorial section (Chapter 3) we used the __NO_OUTPUT__ directive. There is another way to achieve the same result: creating a single file called nooutput (no matter what the content is, can also be an empty file) inside a directory gives the same result as adding the __NO_OUTPUT__ directive in each of its files.

So, let's follow this new approach:

$ mkdir lib
$ touch lib/nooutput

Now, the template. In the first section we created two scripts (lib/header.cws and lib/footer.cws) included before and after page content respectively.

Now, we're going to follow a slightly different approach: a single file will store the whole template. This is good for complex layouts: since the template is not split into two different files you can easily modify it. Moreover, if you create HTML with a WYSIWYG editor, you won't need to split it into pieces everytime you edit it.

File: lib/template.cws

<cows>

type:\
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<link rel="stylesheet" type="text/css" href="../css/style.css">
<title>Title</title>
</head>

<body>

<div id="header">
  Logo
</div>

<div id="menu">
  <!-- Begin Main Menu -->
  Main menu
  <!-- End Main Menu -->
</div>

<div id="submenu">
  <!-- Begin Submenu -->
  Submenu
  <!-- End Submenu -->
  <p>
  @@ pg.quote @@
  --@@ pg.author @@
  </p>
</div>

<div id="content">

  <p id="stack">
  History Stack
  </p>

  <h1>Title</h1>

  @@ pg.content @@
  <p id="revision">
  Revision date
  </p>

</div>

<div id="footer">
  This is a sample site created with <a href="http://www.g-cows.org" 
  target="_blank" class="menuactive">G-Cows</a>.
</div>

</body>
</html>
endtype;

</cows>

A new feature has just been introduced: the Type Mode (Chapter 22). It allows to insert plain HTML code within your scripts and get a verbatim copy in output file while still accessing a limited set of Cows' features.

Everything between type: and endtype; statements is copied verbatim to output with an exception: everything enclosed between @@ characters will be treated as an expression and its value will be echoed. In other words, writing @@ expression @@ inside Type Mode corresponds to writing echo (expression); outside Type Mode.

This feature is very useful when you have to display large amounts of HTML code, and you want to avoid using lots of print () or echo () functions, or switching in and out Cows-tags.

As you can easily see, this script simply displays the first HTML file, with three elements replaced by variables:

Every page will define these variables and include this script.

Prev Home Next
Writing HTML Up Creating Pages

This manual can be downloaded from http://www.g-cows.org/.