First Steps

The key feature of all template languages is called "substitution".  This is the process whereby the template engine replaces special "tags" throughout a given template with actual data.  The tags are like pointers that refer to parts of the data sent to the template.  This data can be an array, an object, or any other data type.  In XT, there are specific data objects we'll be using.  Having the full list of these can help in keeping your requisite knowledge of XT a finite amount.

Let's look at the most basic substitution in XT:

<xt:tpl>
    <xt:var name="title" />
</xt:tpl>

If you make this your entire main XT template (named html.default.tpl in your inc/html/essentials folder), and you go to http://www.yourWebSite.com/index, you will see the title of the index page displayed alone on the screen.  Not very exciting yet, but give it time.

Next, we're going to look at other names you can use to refer to the same data value.  You can call these aliases -- or perhaps the one we just made is actually an alias of one of the ones just ahead, and it's the real one.

Add the following highlighted lines to your template, save it, and refresh your browser window.

<xt:tpl>
    <xt:var name="title" /><br />
    <xt:var name="object/title" /><br />
    <xt:var name="path: object/title" /><br />
    <xt:var name="php: object.title" /><br />
</xt:tpl>

You should now see your index page title displayed four times in a row.  This illustrates a few aspects of XTE, the XT Expression language, right off the bat.  First is that you can access properties of the default object, named "object", without having to specify the object explicitly.  Second is that XTE has at least two modes of interpretation (three in total actually), being "path" and "php", the default of which obviously being "path".  Third is that in the php mode, it's not actually syntactically correct PHP code you're writing.  This php syntax is called PHP Shorthand, which allows you to get away with leaving out the dollar signs, property/method arrows, quotes, and operator symbols, leaving you with a more readable code-like syntax.  This helps avoid the need to refer to objects like this: $object->someValue.  The literal "greater than" entity is enough to give me nightmares at least.

Next, let's look at a few more ways of substituting values.

<xt:tpl>
    <span xt:replace="title">This is a fake title</span>
</xt:tpl>

Rendering this template in Sitellite will show you the same thing as the first example we did, but if you look at it, there's new text in place that must be there for some reason.  Try viewing our template in the browser directly, by going to the following link:

http://www.yourWebSite.com/inc/html/essentials/html.default.tpl

You should see the string "This is a fake title" where you were seeing the index page title moments ago.  View the source of the template, just to see that it in fact hasn't been rendered.  This is how Sitellite enables previewability during the design process.

Next up: Substitution (Part 2)

Page 1: Introduction
Page 2: First Steps
Page 3: Substitutions (Part 2)
Page 4: Conditions
Page 5: Loops
Page 6: Includes
Page 7: Boxes
Page 8: I18n
Page 9: XT Object Reference

All Tutorials