ez.no / exponential / documentation / building an exponential site / setting up the main layout / creating a bare-bone main template
These documentation pages are no longer maintained. Please visit the new documentation site.
Exponential uses templates as the fundamental unit of site design. A template is basically an extended HTML file that describes how some particular type of content should be visualized. The system will automatically look for a file called "pagelayout.tpl", which is the main template file. If it isn't found, Exponential will fallback to the default/standard "pagelayout.tpl" file (which resides under design/standard/templates/...).
Lets put some content into our own "pagelayout.tpl" file. At the minimum, it should contain the following lines:
{*?template charset=latin1?*} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="stylesheet" type="text/css" href={"stylesheets/core.css"|ezdesign} /> <link rel="stylesheet" type="text/css" href={"stylesheets/debug.css"|ezdesign} /> {* Include the standard "page_head.tpl" file. *} {include uri="design:page_head.tpl"} </head> <body> Hello world! </body> </html>
Clearly, this is simply a standard XHTML file with some additional Exponential code. All Exponential specific template code is inside the "{" and "}" brackets.
Copy & paste the lines from above into a text editor and save the file as "design/tscm/templates/pagelayout.tpl".
After adding this pagelayout, you must clear the overrides cache. (Because we override the default pagelayout.) To delete the cache you have to login to the administration interface. When you are logged in: click on the setup tab (top), click on "Cache Management" (left), and click on "Clear template caches" (right).
Try to surf the site ([...]/index.php/tscm). The browser should present you a page which contains the "Hello world!" string.
If the this page does not show this string, the permissions of the cache files may be incorrect. Therefore try to delete the directory: "/var/tscm/cache".
If you take a look at the document source (usually right click on the page and choose "View Document Source") you see the output that Exponential has generated so far. If everything works properly, you should be able to see a bunch of meta and link-rel tags.
The following text contains a comprehensive explanation of the Exponential specific code that we have put into our custom main template file. Feel free to skip to the next section (the following text is all about detail).
Template charset revelation
{*?template charset=latin1?*}
Reveals the charset of the template file to the template engine. If not specified, the engine will fallback to the default template charset, which is specified in the "site.ini" configuration file. It is possible to use special characters, for example UTF8 characters in a template. However, to be able to use the templates with an arbitrary charset, they should be written in plain ASCII.
Special inclusion of style sheets
{"stylesheets/core.css"|ezdesign} {"stylesheets/debug.css"|ezdesign}
What happens here is that the text strings within the quotes are being piped into an operator called "ezdesign". This operator prepends the current site-design directory to the inputted text. The result is a valid file location. The first line will return "/design/tscm/stylesheets/core.css", the second line returns "/design/tscm/stylesheets/debug.css". If the file does not exist, the operator will simply fallback to the standard design (/design/standard/stylesheets/...). Instead of specifying a hardcoded location, we use the "ezdesign" operator. This will allow us to change the design of the site in an easy way without having to modify the template file itself. The "core.css" file is used by some of the standard templates; the "debug.css" file is used to format the debug output.
Including the standard "page_head.tpl" file
{* Include the "page_head.tpl" file. *} {include uri="design:page_head.tpl"}
The first line is simply a template comment (comments are placed inside "{*" and "*}"). The second line tells the template engine to include the "page_head.tpl" file. The contents of the included file will be inserted at the exact position where the include function is called. Since we haven't got our custom "page_head.tpl", the system will use the standard "page_head.tpl" file (which is located here: "design/standard/templates/page_head.tpl"). This is an important template file that takes care of setting some Exponential specific variables, sets the HTML page title, generates meta information and so on. It should always be included.
Comments