• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

XenForo Template Syntax

Robbo

Well-known member
[WIP] - will finish when I get time

Note: the following is a simple overview of how XenForo syntax is compiled into PHP aimed at developers so that they have a better understanding of how it works and therefore avoid problems that may occur from the black box. Which brings me to the next line...

If you just want reference to the syntax scroll down and skip this first post.

Simple Overview
XenForo uses simple yet powerful templating syntax. There are 3 different additions to the HTML and CSS. Firstly a 'xen' namespace that has a list of tags you can use to do various things. Secondly functions with the syntax {xen:functionName [arguments seperated by commas]}. And thirdly, for styling you can access style properties by using the @ character followed by the style property.

XenForo will also compile {$varName} to a variable available to the current template.

XenForo compiles this stuff into PHP and stores the compiled templates in the database. There is also an option to copy the compiled templates into files and use them instead to take advantage of OPCaches.

Tags
Tags are the same as using HTML. You simply specify the tag and add its attributes and values. When run through the compiler tags take into account all the attributes and children (if any) to produce PHP to be appended to the templates compiled source.

The following is an example of how <xen:set> works. Firstly the use of <xen:set> is to create a new variable to use within templates. So <xen:set var="$foo">1</xen:set>. When the compiler runs it picks up this tag and firstly looks to make sure the attribute var is set. If it is it simply creates a new variable which is the name of whatever var is, so in this case $foo. Then the compiler calls a method which takes all the children of <xen:set> and processors it into the variable that was already created. Although this only works with scalar values when using <xen:set>. So in our case it would simply do $foo = '1'; . This then goes through a couple methods to place it properly in the compiled template.

Functions
XenForo can't do everything with XML tags. For this they have functions. Functions follow the syntax of {xen:functionName arg1, arg2 ... }. Think of this the same as PHP functions, functionName(arg1, arg2 ...). When compiled they are done in much the same way as tags except instead of attributes you have arguments and there are no children to a function. Because of this I don't see the need for another example, the <xen:set> example above describes how compiling works well enough for this little tutorial (article?).

Style Properties
I'm not going to go into much detail here as there isn't much to go into. These are simply things like @imagePath which when compiled are turned into a static method call to get the value of a style property. For @imagePath the compiled template will contain XenForo_Template_Helper_Core::styleProperty('imagePath').
 
Tags
* marks required attributes.

Avatar - display a users avatar
HTML:
<xen:avatar *user="array"  size="string"  img="bool" forcetype="mixed" canonical="bool" class="string" text="string" href="string" />
Note: Any attributes not specified will also be added to the compiled result.

Attributes
user (array) (required)
An array that contains the keys user_id and username. Used for selecting the avatar image and linking to the user.
size (string) (optional)
One of three sizes. Large (192px), medium (96px) or small (48px). The values for these are l, m or s. Defaults to m.
img (bool) (optional)
If this attribute is set <img /> will be used instead of <span />.
forcetype (string) (optional)
This is used to force avatar type. Possible values are..
default: will show the default gender avatar, the user attribute will have to have the key gender specified for it to work properly​
custom: will show the custom avatar that was uploaded instead of a gravatar or the default avatar​
canonical (bool) (optional)
If true the avatar link will be absolute.
class (string) (optional)
Simply appends any classes to the anchors class attribute.
text (string) (optional)
A string that will be used within the span element if avatar is not set to img.
href (string) (optional)
If set will link the avatar to the specified href instead of the user.

-----------------------

Container - change the value of container variables
HTML:
<xen:container *var="string”>children</xen:container>

Attributes
var (string) (required)
This should be a variable that is used in the container template. For example $head.openGraph.

Children (scalar) (required)
The children is generally just more HTML or a bool to be used in the container template. For example to set meta data in the <head>.

-----------------------

Datetime - handles converting a time stamp into readable time
HTML:
<xen:datetime time="int” … >int</xen:datetime>
Note: Any attributes not specified will also be added to the compiled result.

Attributes
time (int) (optional)
Timestamp convert to readable. If this is not set then the children must equate to an int to use instead.

Children (int) (optional)
This is the same as the time attribute and must be set if time is missing.

-----------------------

Description - used to add a description under the page title
HTML:
<xen:description>string</xen:description>

Children (string) (optional)
A string used to describe the page you are on. Generally just a phrase

-----------------------

EditHint - for use when editing templates to show related templates
HTML:
<xen:edithint *template="string" />

Attributes
template (string) (required)
This is a template to show in another tab in the ACP template editor.

-----------------------

Follow - creates a link to follow or unfollow a user
HTML:
<xen:follow *user="int" title="string" class="string" tag="string" />

Attributes
user (int) (required)
The user to follow or unfollow.
title (string) (optional)
Normal HTML title attribute.
class (string) (optional)
Normal HTML class attribute.
tag (string) (optional)
Specify a tag to surround the follow link.
 
Note on <xen:set>: You can only set a scalar (string, integer etc.); complex variables (arrays etc.) can't be set in this way.
 
Note on <xen:set>: You can only set a scalar (string, integer etc.); complex variables (arrays etc.) can't be set in this way.
Cheers, updated it. I'm tired and not that good with words so it is probably fairly rough.

Seems like I am going to run out of room giving reference to everything in that style :/
 
I will look into it tomorrow and give you an answer, insterested to know the best way to do it myself.
 
Yeah whenever I get spare time I will update it. Going to try add a new tag every day. Then the same with functions after that.
 
Top Bottom