Inside V5: Templates

Today I'm going to write about our new templating system. This system will give you full control over the HTML code for your forum. This blog entry is mostly intended for those who make codes for ProBoards forums. If you are familiar with HTML and JavaScript, you should be able to follow this post fairly well.

Currently many ProBoards coders spend a lot of time making codes that simply re-arrange where information is displayed on the page itself and re-working the HTML. Needing to use JavaScript codes to accomplish this will be a thing of the past in Version 5.

In each template there will be three important elements:

• HTML code
  
• Variables - These store information that can be automatically inserted into your template, anything from the title of a page to the currently logged in user's name. Each template will have it's own set of variables that you can choose to insert.
  
• Conditional Statements - These allow your templates to display, or not display, information based on a set of conditions. Examples of conditionals:
  
  • <guest>This code is only displayed for guests</guest>
    
  • <member>This code is only displayed for logged in members</member>
    

Let's give a basic example. On many pages on the ProBoards message boards you use, there are tables which are very similar to each other. For example, the table that you see when you go to the Admin area of your forum is the same table that you see when you go to login, create a board, modify a board, update your censored words list, etc. Literally dozens of pages use the same table, except that the title of the table changes from page to page as does the content of the table.

Here is a basic table structure we could use for that table:

<table width="80%">
  <tr>
   <td>
   Title Here
   </td>
  </tr>
  <tr>
    <td>
    Main content here
    </td>
  </tr>
</table>

Your have your HTML code, which makes the table.

You have your title for the table (in this example "Title Here"), which you want to change with each table to be an appropriate title.

You have the section where you want the main content to be displayed (labelled "Main content here").

There are no conditionals in this table yet.

We're not done with this table yet. How do we make it so that the templating system changes the title depending on the page it is on? How does it know where to insert the main content into the table?

This is accomplished by the inserting of variable tags. The tags we have chosen to use will look like [pb variable] where variable is the name of what is to be displayed. Each template will have a list of variables that you will be allowed to put in. For this basic example, let's say that the title for the table is stored in a variable called title, and therefore we would insert the code [pb title] where we wanted the title for the table to be.

Now, we need a second variable to tell the template where to insert the main content of the table. We call this the action variable, or [pb action].

What if we want to display something in this table if the user is logged in, and a different message if the user is a guest?

We use conditionals. Anything placed between the <guest> and </guest> tags is only displayed to guests. Likewise, anything placed between the <member> and </member> tags is only displayed to users who are logged in.

This would be the new code that will accomplish:

• Automatically updating the title for the table
  
• Place the main content of the table in the correct position automatically
  
• Add two conditionals, one for guests and one for members
  

<table width="80%">
  <tr>
   <td>
   [pb title]
   </td>
  </tr>
  <tr>
    <td>
    <guest>Welcome, guest!  Please login</guest>
    <member>Welcome back!</member>
    <br />
    [pb action]
    </td>
  </tr>
</table>

I have bolded the two parts that have changed.

Now with this new code put in, any page that uses this table will have the correct title automatically inserted, it will display a different message for guests and members, and it will insert the main content of the table automatically.

Each Skin is Version 5 will have it's own templates that you can modify. There are dozens of conditionals and hundreds of variables which will be fully documented and released before Version 5 exits beta. Each template will have a list of the specific variables that related to it as well as the conditionals that you can use.

I hope this gives you a good idea of the basics of the V5 templating system.