Building Templates

In Solodev CMS 8, templates are used to layout a webpage or series of webpages that are reusable. In Solodev CMS 8 you will use the 'templates' object to define your templates and various 'page' objects will use these templates to render out web pages. Below is an example of defining a series of templates in your config.json file.

Within your config.json file, the templates property accepts the following keywords:

NameDescription
name The name of the template
from_path The location of the folder in the zip file
to_path Where the template is to be placed in the folder structure of your website
{
	"templates": [{
		"name": "blankTemplate",
		"from_path": "themes/business-theme",
		"to_path": "web files/themes/business-theme"
	}, {
		"name": "contentTemplate",
		"from_path": "themes/business-theme",
		"to_path": "web files/themes/business-theme"
	}, {
		"name": "contentTemplateSansLeftNav",
		"from_path": "themes/business-theme",
		"to_path": "web files/themes/business-theme"
	}, {
		"name": "homeTemplate",
		"from_path": "themes/business-theme",
		"to_path": "web files/themes/business-theme"
	}]
}

The above code will create four separate template files in Solodev. Within your package, the above templates specified in the "from_path" are XML files which, upon import, get turned into usable .tpl files.

Creating Templates with XML

It's important to understand how to assemble multiple files into a template so that it can be used in the creation of multiple web pages.

NameDescription
div id The location of the dynamic div where the referenced template will exist
tplname The name of the template being placed in the above mentioned dynamic div

Use the numbering of the dynamic Div's when creating XML files to build a template. For example, this file, contentTemplate.xml, creates contentTemplate.stml when imported into your site. It knows to place the baseTemplate first, the content header second, the content template third, etc. while also creating empty dynamic Divs for content placement.

contentTemplate.xml
<div id="dd.0">
    <tplname>baseTemplate.tpl</tplname>
    <div id="dd.0.0">
        <tplname>contentHeader.tpl</tplname>
    </div>
    <div id="dd.0.1">
        <tplname>contentTemplate.tpl</tplname>
        <div id="dd.0.1.0">
            <tplname>breadcrumb.tpl</tplname>
        </div>
        <div id="dd.0.1.1">
            <parentnav></parentnav>
        </div>
        <div id="dd.0.1.2"></div>
        <div id="dd.0.1.3"></div>
    </div>
    <div id="dd.0.2"></div>
    <div id="dd.0.3"></div>
    <div id="dd.0.4"></div>
</div>

Note: You will see various .tpl files referenced above. It is important to understand that your .xml template files assemble various .tpl files which, in turn, creates a functional template file that is ready for specific page content.

Using the four files referenced above containing HTML, JS, CSS, PHP, Images, Video and the specification of where the files should be located, a template is created in the config.json file using the "templates" object as shown below. 

Below is a screenshot of the above files referenced to create this page in the folder that will be compressed into a .zip once ready for import.

This is how templates are created via XML. The .xml extension is unnecessary in the config file which takes the .xml file above and turns it into a .tpl template to be used to build a web page. As such, you do not need to specify the extension in your config.json file as shown below:

"templates": [{
        "name": "contentTemplate",
        "from_path": "themes/business-theme",
        "to_path": "web files/themes/business-theme"
    },
]

Before content, the layout of the template appears as below:

This content template can now be used to create web pages such as the one below which contains all of the necessary template components referred to above as well as added content:

 

0 Comments

Please sign in to leave a comment.
Have more questions? Submit a request