Variables, and Custom Ones
Schrodinger's text
The comment metadata at the start of each In page is where you define the page's variables. Variables are strings of text that AutoSite substitutes the placeholder text in the template for.
Variables really shine when you have a bit of text that always appears, but is different on each page. Titles are a good example of what you'd use variables for. Same with descriptions, or thumbnails. The template used for that particular In page is set as a variable.
Defining a variable
As an example, let's say we have a folder of animal pictures. Each page has a different picture from this folder, and they're all in JPG format. This is an ideal use for variables.
To define a variable, set it in the comment metadata on the In page.
<!-- attrib animal: otter -->
This sets the animal variable on that page to otter.
Variables in templates
Now, to make that text appear, you'll have to slip in a placeholder with the variable name into one of your templates. You already know of a few placeholders, notably [#content#], which is where AutoSite merges the In page into the template.
In our case, we want the filename of the picture to be replaced with the value of the animal variable. In the template, we'd use the placeholder [#animal#] placeholder.
<img src="[#root#]images/animals/[#animal#].jpg" alt="[#animal#]">
When the page is built with the AutoSite script, any instances of [#animal#]will get replaced by the value of the animal variable—in this case, otter. (This works on both the template and the In page; you can set the title of the In page and then reference [#title#] later in the In page, and it'll still work.)
<img src="images/animals/otter.jpg" alt="otter">
If, on another page, we wanted a picture of a moth, we'd set animal to moth:
<!-- attrib animal: moth -->
On that page, the rendered image markup would look like this instead:
<img src="images/animals/moth.jpg" alt="moth">
The root variable
There's one special variable I used in my example: the root variable. Unlike other variables, you don't set this yourself, because it actually refers to the root folder of the site.
Where the root variable comes in handy is when you're using the same template in multiple folders. Relative links break if they don't lead to the right spot. With [#root#], AutoSite keeps track of all this for you. It will point the relative link in the right direction, no matter what.
If our otter.html page is in the root of the site, the link to otter.jpg renders like this:
<img src="images/animals/otter.jpg" alt="otter">
If otter.html is in animals/mammals/, however, AutoSite will render the link like this:
<img src="../../images/animals/otter.jpg" alt="otter">