1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. 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

Discussion in 'Development Tutorials [Archive]' started by Robbo, Nov 15, 2011.

  1. Robbo

    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').
     
    guiltar, Marcus and Floris like this.
  2. Robbo

    Robbo Well-Known Member

    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
    -----------------------

    Container - change the value of container variables
    HTML:
    <xen:container *var="string”>children</xen:container>
    Attributes
    Children (scalar) (required)
    -----------------------

    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
    Children (int) (optional)
    -----------------------

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

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

    Follow - creates a link to follow or unfollow a user
    HTML:
    <xen:follow *user="int" title="string" class="string" tag="string" />
    Attributes
     
    Adam K M and Marcus like this.
  3. Robbo

    Robbo Well-Known Member

    Functions

    list of functions to come
     
  4. Kier

    Kier XenForo Developer Staff Member

    Note on <xen:set>: You can only set a scalar (string, integer etc.); complex variables (arrays etc.) can't be set in this way.
     
  5. Robbo

    Robbo Well-Known Member

    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 :/
     
  6. Despair

    Despair Active Member

  7. Robbo

    Robbo Well-Known Member

    I will look into it tomorrow and give you an answer, insterested to know the best way to do it myself.
     
  8. Fuhrmann

    Fuhrmann Well-Known Member

    Will you update with the other tags? There is so many others.
     
  9. Robbo

    Robbo Well-Known Member

    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.
     

Share This Page