Easy Template Engine of CMS

Easy and flexible web page template consists of web parts which can be manipulated by GUI, and be edited by Html code.

How the template parts consists of

The CMS template consists of following 3 type of parts.

Template for Web Page

The template for web page is the top part of web template. You can assign this template to the page content managed by CMS.

Top part of the template

This template can contain the div layer parts and Html5 based components. You can reuse the components and effectively manage the design.

More about the CMS template, please take a look at Architecture of Template Engine.

Div Layer parts

The div layer parts is used to implement two column layout. And when you use the responsive web design, make the Style Sheet suitable for mobile.

Div layer template

The div layer parts can contains Html5 components and other div layer. When you implements 3 columns layout, nest this parts.

About the more detail about Div Layer Parts, please take a look at Container Template's Design in the CMS manual section.

Html5 Components

Html5 and server program component

Html5 Components are most primitive ones. It is the final parts of the templates, it is consists of following parts.

  • Html code
  • Server side program
  • StyleSheet and Javascript
  • Images and other resources

The parts are Header, Footer, Bread List, Article, Relevant Topics, Navigation, and Social Bookmarks part in the picture above.

This part is programmable. In addition to customize the design, if you are programmer, you can create application part as plug in of this Content Management System.

Generated Html Code

You can arrange the layout of components by GUI based editor. It is very useful, but in order to make html code which is suitable to SEO, you have to edit codes a little.

Custom Html Code

You have to manage the Html code generated by template engine. In order to do that, you have to know how the Html code is generated by th engine.

Following Html code is the source of the template top part.

The $autoBody part is replaced into the code you arranged components by GUI editor.

And the components in the top parts has own JavaScript and StyleSheet codes. They are combined and inserted into the $autoHeader section.

This Html code contains header parts, therefore you can put meta tags for the template. For example, blog top and archive pages are noindex and nofollow, the codes are located in the templates of them.

Style Sheet and JavaScript

You can manage the template's main StyleSheet and Javascript on the template editor.

Javascript and styleshht

They are also located in the $autoHeader section.

Pagination support

Some template have to implement pagination. if the top part contains a component which needs pagination, it automatically generate code for pagination.

The Html5 components which paginate have to enable "is_paging" flag, and implement server code to return the number of pages.

Pagination implements

By this implementation, the template engine generate pages for the number it returns with the parameter it shows the page number.

And if you want to add robots meta tag whose values are "next" or "prev", add the tag to the basic Html of the template.

Html5 Components detail

After you understand the template engine's overview, let's learn the more detail about Html5 components.

When you build a new site with CMS, the first task to change design is edit the design of Header and Footer. Then this knowledge is necessary.

It is very easy to customize the component. Please take a look at Html5 based customizable template components, next.

Go to Top