Creating page template tutorial
This is a step-by-step tutorial which will give you an overview about creating a page template in Saurus 4. Page template usually defines the heading, footer and menu system of web pages. To follow the tutorial you must have an access to a Saurus CMS installation and a text editor. The Saurus CMS license could be any available, including Saurus CMS Free.
Creating a template file
First let’s create a template file we are going to work with.
- Go to your site administration view (also referred here as Admin) by adding /admin at the end of the site address.
- Go to Templates > Page templates and click New.
- A popup window will open. Fill in the template name with „My page template” for example.
- The checkbox „Visible in section editor” defines whether content editor can choose this template when creating new sections. Just leave it checked.
- Finally, type some text such as „asdf” to the text area where the HTML code with Saurus API tags normally would go. We will get to the code in a moment.
- Click Save.
Setting the master template
Although you could create a new section in editor’s environment and choose this new template now, let’s make it a default page template so that all sections which do not have a local value set would use it.
- Go to Admin > Templates > Master templates and choose your new page template „My page template” for the language you are working on (English is default for new installations). Click Save. Note that you can set different templates for each site language, also there is an option to define default content templates.
- Go to site public view and refresh if needed. You should see the output of your template now. „Asdf” in our case.
Editing the template
You can continue editing the template code from Admin > Templates > Page templates, but the HTML area in that popup window is really not a best option for that. Once registered via this page, the template file can be modified from file system directly. We recommend to use text editors such as EditPlus or Notepad++ for working with templates.
So where is your template? All templates created via Admin > Templates are stored in the following folder in your site root:
/classes/smarty/templates
Find your file my_page_template.html (all special characters in the template name were replaced by underscores automatically) and open it in the text editor program. You can now save any changes and refresh your page in browser to see the output changing. If you do not have access to the file system, you can work with the popup window in site Admin to continue with the tutorial.
Basic HTML code
Let’s change the current „asdf” with some HTML. Copy-paste the following code to your template:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:editor="http://www.saurus.info/">
<head>
<title>{$title}</title>
<meta http-equiv="Content-Type" content="text/html; charset={$encoding}">
<script language="javascript" type="text/javascript" src="{$wwwroot}/js/yld.js"></script>
<link rel="stylesheet" type="text/css" href="{$wwwroot}/styles.php">
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
Everything between brackets {} is treated as Smarty / Saurus API (SAPI) code in templates. $ refers to a variable. In our example you can see the following SAPI tags and functions:
- {$title} returns the page HTML TITLE which can be set in Admin > Properties > Meta-info.
- {$encoding} is the codepage of current site language set on Admin > Languages > Languages.
- {$wwwroot} refers to site root folder and is wise to include in the code since you may want to move your site around for example from sitename.com/development to just sitename.com.
For other suitable variables for HTML HEAD such as meta-description and meta-keywords, check out the SAPI Global variables page.
xmlns:editor="http://www.saurus.info/" extends the HTML with couple of Saurus internal tags and is essentially needed for v-shaped buttons to work in editor’s environment.
The JavaScript /js/yld.js and dynamic CSS /styles.php calls are needed for the editor’s environment to work.
Creating a menu system
1st level menu
So we now have a basic HTML page which outputs „Hello world” and sets HTML TITLE and encoding but we need something more dynamic. Copy-paste the following code between the HTML BODY tags in your template and find out how it works in your site editor’s environment:
<ul>
{init_section name="section_list_1" level="1"}
{foreach from=$section_list_1 item="section_1"}
<li>{$section_1->buttons}<a href="{$section_1->href}">{$section_1->title}</a></li>
{foreachelse}
{if $in_editor}<li>{$section_list_1_newbutton}</li>{/if}
{/foreach}
</ul>
You should be able to see and edit 1st level menu items of your website. Here’s how the code works:
- {init_section} is SAPI function which opens a query of sections from Saurus CMS database. The parameter name defines a variable where the query results are stored while parameter level filters out 1st level sections in our example.
- {foreach}..{/foreach} is Smarty syntax for cycling through the array given by from parameter. Note that here we point to the variable $section_list_1 defined by {init_section} in previous row. The item defines a new variable which points to each cycled item.
- {$section_1->buttons} attribute displays the v-shaped hotspot buttons for current item. It only outputs buttons when the editor has logged in and has permissions to modify the section.
- {$section_1->href} and {$section_1->title} refer to corresponding parameters for current item.
- {foreachelse} is executed when {init_section} did not return any values and there is nothing to loop. We display a v-button to add first section item with {$section_list_1_newbutton}. Note that since in this case we do not have a loop item we can not use the variable $section_1 but have to point to the query results itself by using $section_list_1 instead.
2nd level menu
Creating 2nd level menu goes the same way, you just have to use different variable names and open the {init_section} with different level parameter. Here’s our next example, replace the previous code between HTML BODY tags with this:
<ul>
{init_section name="section_list_1" level="1"}
{foreach from=$section_list_1 item="section_1"}
<li>
{$section_1->buttons}<a href="{$section_1->href}">{$section_1->title}</a>
{if $section_1->is_selected}
<ul>
{init_section name="section_list_2" level="2" parent=$section_1->id}
{foreach from=$section_list_2 item="section_2"}
<li>{$section_2->buttons}<a href="{$section_2->href}">{$section_2->title}</a></li>
{foreachelse}
{if $in_editor}<li>{$section_list_2_newbutton}</li>{/if}
{/foreach}
</ul>
{/if}
</li>
{foreachelse}
{if $in_editor}<li>{$section_list_1_newbutton}</li>{/if}
{/foreach}
</ul>
The new code compared to the previous example is:
- {if}..{/if} is Smarty syntax and should be self explanatory. The $section_1->is_selected returns true value if the current 1st level section is active. This makes our 2nd level menu only appear when the 1st level menu is clicked.
- We added parent parameter to second level {init_section} tag to get only the sub-items of current 1st level section.
Adding links to menus
If you wish to add link objects to your menus, try adding the following parameter to {init_section} tags: classes=”section,link”. When you click now on New button in site editor’s environment, you will be asked whether to add new section or link to menu.
Find out more parameters you can use to query sections from database and the attributes returned from SAPI Sections page.
Displaying content
Finally, to display the web content, add the following tag where you wish the content template’s output to be rendered:
{print_content}
In our example the suitable place would be just before the HTML ending /BODY tag.
Load the full example template code for all tutorials in this section.
RSS