Magic Smoke Template Design

logo
The web user interface is constructed with templates with just a few dynamic values filled in. Thos templates are found in the www/template/* directories. These templates are normal HTML (actually: you chose the version of HTML that is used) with some special constructs to fill in the blanks.

In order to create your own templates copy one of the template directories and start to modify the files in there. Usually it should be enough to change the layout.html template. If you use relative links inside your templates they will be interpreted as relative to the index.php script.

Syntax

The most important element of templates are variables. Variables can be set by the template itself, or by the script. Wherever the value of a variable needs to be inserted it is simply placed between two "@" characters, eg. "Variable XYZ contains @XYZ@". These value replacements can occur anywhere in the text, whereas all other syntactical elements must appear on a line of their own.

Variables can be set and unset using the special #set and #unset commands:

#set:VARIABLE=value
#set:LONGVARIABLE:
some values containing anything
#endset
The first version of the set-syntax just assigns everything behind the "=" to the variable named before it. The second version of the set-syntax assigns everything between the #set and #unset lines without replacing any values or interpreting any syntax.

Conditional parts of the template text can be put between #if and #endif:

#if:VARIABLE==value
text that only appears if VARIABLE contains value
#endif
All comparisons are made as string comparisons (this eg. means "2" is greater than "100") with both the variable and the comparison value trimmed. Possible operators are:
==matches if the variable contains exactly this value
<matches if the variable is smaller than this value
>matches if the variable is greater than this value
<=matches if the variable is smaller or equal to this value
>=matches if the variable is greater or equal to this value
!= or <>matches if the variable does not contain this value

Template Files

layout.html

This is the main template that contains the static parts of all pages displayed by Magic Smoke.

The only variable inside it is @PAGE@ which is replaced by the context created using one of the other templates.