Creating a Static Web-site, Layout Themes

For a static site development you will need just the following modules: Pages, Blocks and Menu (please find details on each of the modules in the corresponding documentation chapters).

Everything is quite simple. Create a new site structure in the ‘Pages’ section (create pages, place blocks).

Next, in the ‘Menu’ section, you’ll need to add a menu containing links to the pages.

Upon creating a menu, in the ‘Blocks’ section, create a block to display it. These might be ‘Upper Menu’ and ‘Lower Menu’ blocks, for instance.

Then you will be able to add these menu-blocks on the pages.

The front end allows for using various themes for pages ’layouts and blocks’ mapping.

Page theme is to be set individually for each page in the ‘Pages’ section.

To create a new theme, create a corresponding folder in the following directory: www/templates/public/[your theme name]. It is highly recommended to use only Latin letters and figures when creating a name for your theme.

Your theme should contain at least two files:

layout.php – the main template containing HTML. The page’s layout may be divided into several parts, like Header, Content, Footer etc. So, you can create the corresponding files in the theme’s folder and connect the necessary elements using the Template class;
layout_cfg.php (blocks mapping) – an array resembling the HTML coding for a table. It is the main parameter to be set for an element of the map (the detailed review of the structure is below):

'myContainer'=>array(
                    isElContainer= > true
                    ...
)

In this case, a block may be placed in this container in the Page editor.

Upon creating a theme, it can be assigned to a page in the corresponding section, while the blocks mapping becomes automatically available in the ‘Blocks Map’ tab for you to place blocks.

To show blocks in the template, run a request to the block manager by the element key, which you have defined as container, e.g.:

<?php echo $this->blockManager->getBlocksHtml('myContainer');?>

It is necessary to remember that nested templates should contain a link to the block manager.

To begin with, try to create a theme by the analogy with the already existing one, modifying block maps and templates.

Parameters to be specified in the block map:

‘columns’ – the number of columns (an integer figure);
‘items’ – an array listing elements and accessed through the block manager by the element key (Latin letters and figures should be used).

An element may have the following properties:

colspan – an integer figure standing for the number of used horizontal cells;
rowspan – an integer figure standing for the number of used vertical cells;
isEIContainer (true/false) – allows/prohibits positioning a block in a cell;
width – an integer figure standing for the width of a cell;
height – an integer figure standing for the height of a cell;
html – any html or text for a not nested element.

The number of lines is calculated automatically.

These attributes are used in the administrative panel for displaying the blocks map and do not influence your template html coding.

Exemplary configuration file:


return array(
  'columns'=>3,
  'items'=>array(
    'b1'=>array(
      'colspan'=>3,
      'container'=>false,
      'width'=>600,
      'height'=>80,
      'html'=>'Header'
    ),
    'leftblock'=>array(
      'container'=>true,
      'width'=>150,
      'height'=>300
    ),
    'b3'=>array(
      'container'=>false,
      'dataArea'=>true,
      'width'=>300,
      'height'=>300,
      'html'=>'Main content'
    ),
    'rightblock'=>array(
      'container'=>true,
      'width'=>150,
      'height'=>300
    ),
    'b5'=>array(
      'colspan'=>3,
      'container'=>false,
      'width'=>600,
      'height'=>80,
      'html'=>'footer'
    )
  );