Promodo CMS

Шаблон сайта

Шаблон сайта представляет собой набор папок и файлов, которые отвечают за вывод страниц, модулей, компонентов системы на сайт и содержит в себе графическое оформление сайта.

Шаблон для сайта расположен в папке /public/templates/default/.

Рассмотрим структуру шаблона «default»:

  • папка «authentication» – содержит файлы вывода модуля авторизации пользователя;
  • папка «breadcrumb» – содержит файлы вывода компонента «Хлебные крошки»
  • папка «catalog» – содержит файлы вывода модуля «Каталог»
  • папка «category» – содержит файлы вывода категорий на сайт
  • папка «content» – содержит файлы вывода блока контента
  • папка «contentLinking» – содержит файлы вывода блоков блочной перелинковки
  • папка «css» – содержит css файлы
  • папка «default» – содержит файлы вывода ошибки 404
  • папка «images» – содержит изображения
  • папка «simpleHtml» – содержит файлы вывода модуля «Произвольный HTML код»
  • папка «sitemap» – содержит файлы вывода карт сайта
  • папка «menu» – содержит файлы вывода всех видов меню на сайте
  • папка «feedback» – содержит файлы вывода формы обратной связи
  • файл «layout.phtml» – html шаблон сайта;
  • файл «paging.phtml» – файл, отвечающий за пагинацию на сайте
  • файл «layout.xml» – файл визуальной разметки страницы

Содержимое *.phtml файлов представляет из себя каркас страницы со всеми основными тегами. Это HTML код с конструкциями Smarty.

Важно!
Для вставки в каркас *.phtml страницы (или в любой другой визуальный модуль) JavaScript кода необходимо использовать тег Smarty {literal}, который отключает интерпретацию внутреннего содержимого тега как Smarty-разметку.

Основной файл шаблона – layout.phtml. Именно он является основой всех страниц сайта.

Для шаблона «default» он имеет следующий вид:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <base href="{$this->serverUrl()}/" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <meta name="title" content="{$this->escape($this->pageTitle)}" />
        <meta name="keywords" content="{$this->escape($this->metaKeywords)}" />
        <meta name="description" content="{$this->escape($this->metaDescription)}" />
        <meta name="author" content="{$this->escape($this->metaAuthor)}" />
        <meta name="robots" content="{$this->escape($this->metaRobots)}" />
        <link rel="stylesheet" type="text/css" href="{$smarty.const.PATHES_PREFIX}/templates/default/css/all.css" />
        <title>{$this->escape($this->pageTitle)}</title>
        {$this->headStyle()}
        {$this->headMeta()}
    </head>
    <body>
        <div id="page-box">
            <a href="#nav" class="skip-nav">перейти к навигации</a>
            <!-- container start -->
            <div id="wrap">
                <!-- container start -->
                <div id="container">
                    <!-- content start -->
                    <div id="content">
                        {$this->placeholder("Content")}
                        {$this->placeholder("Paging")}
                    </div>
                    <!-- content end -->
                    <!-- sidebar start -->
                    <div id="sidebar">
                        {$this->placeholder("Right")}
                    </div>
                    <!-- sidebar end -->
                </div>
                <!-- container end -->
                <!-- sub navigation end -->
                {$this->placeholder("Left")}
                <!-- sub navigation end -->
            </div>
            <!-- header start -->
            <div id="header">
                <!-- logo start -->
                <a href="./" id="logo"><img src="{$smarty.const.PATHES_PREFIX}/templates/default/images/logo.gif" alt="logo" /></a>
                <!-- logo end -->
                <!-- navigation start -->
                {$this->placeholder("Top")}
                <!-- navigation end -->
                <!-- add start -->
                <a href="/" class="add"><img src="{$smarty.const.PATHES_PREFIX}/templates/default/images/img-01.gif" alt="promodo cms" /></a>
                <!-- add end -->
            </div>
            <!-- header end -->
            <!-- footer start -->
            <div id="footer">
                <span>{$this->siteSettings->SITENAME}</span>
                {$this->placeholder("Bottom")}
            </div>
            <!-- footer end -->
        </div>
        {$this->placeholder("BodyEnd")}
    </body>
</html>

Используемые переменные:

(не забудьте ниже убрать фигурные скобки переменных)

  • {$this->serverUrl()} – выводит URL-адрес сайта;
  • {$this->escape($this->pageTitle)} – выводит значение мета-тега title;
  • {$this->escape($this->metaKeywords)} – выводит значение мета-тега keywords;
  • {$this->escape($this->metaDescription)} – выводит значение мета-тега description;
  • {$this->escape($this->metaAuthor)} – выводит значение мета-тега author;
  • {$this->escape($this->metaRobots)} – выводит значение мета-тега robots;
  • {$this->siteSettings->NAME} – выводит значение переменной (в примере NAME), значение которой определяется в панели администратора в разделе «Основные» ;
  • $this->placeholder("Content")} – выводит содержимое блока «Content» (для других блоков аналогично), названия блоков определены в файле layout.xml;
  • {$this->headStyle()} – выводит все подключенные стили на сайте;
  • {$this->headMeta()} – выводит все подключенные мета-теги на сайте.

Вывод визуального шаблона управления модулями на страницах сайта регламентируется файлом layout.xml, который находится в папке /public/templates/название шаблона/.

Важно!
Сетка макета зависит только от настроек файла layout.xml. Она создана для визуального представления разметки и не имеет прямой связи с основным файлом шаблона сайта layout.phtml.

design_sm

Пример файла layout.xml:

<?xml version="1.0" encoding="UTF-8"?>
<template>
    <!-- Имя блока -->
    <name>admin-blocks</name>
    <!-- Настройки блоков -->
    <settings>
        <!-- Фон сайта -->
        <bgimage></bgimage>
        <!-- Изображение для сетки -->
        <gridimage>url('../images/bg-page-schema.gif')</gridimage>
        <!--Размер 1 клетки в пикселях -->
        <celsize>30</celsize>
        <!-- Цвет фона блоков по умолчанию -->
        <bgcolor>#FFFFFF</bgcolor>
        <!-- Количество условных блоков в сетке по ширине -->
        <blockswidth>21</blockswidth>
        <!-- Количество условных блоков в сетке по высоте -->
        <blocksheight>18</blocksheight>
    </settings>
    <!-- Блоки -->
    <blocks>
        <block>
            <!-- Имя блока -->
            <name>Top</name>
            <!-- Отступ слева-->
            <left>0</left>
            <!-- Отступ сверху-->
            <top>0</top>
            <!-- Ширина блока-->
            <width>21</width>
            <!-- Высота блока-->
            <height>2</height>
            <!-- Цвет фона блока перекрывает тот, что по умолчанию -->
            <bgcolor>#FF737A</bgcolor>
            <!-- Цвет фона блока при наведении курсора -->
            <hovercolor>#FE9399</hovercolor>
        </block>
        <block>
            <name>Left</name>
            <left>0</left>
            <top>2</top>
            <width>4</width>
            <height>10</height>
            <bgcolor>#B1DD75</bgcolor>
            <hovercolor>#C8FA84</hovercolor>
        </block>
        <block>
            <active>0</active>
            <name>Content</name>
            <left>4</left>
            <top>2</top>
            <width>13</width>
            <height>10</height>
            <bgcolor>#FFFFFF</bgcolor>
        </block>
        <block>
            <name>Right</name>
            <left>17</left>
            <top>2</top>
            <width>4</width>
            <height>10</height>
            <bgcolor>#8CA9D3</bgcolor>
            <hovercolor>#A4C7F8</hovercolor>
        </block>
        <block>
            <name>Paging</name>
            <left>0</left>
            <top>12</top>
            <width>21</width>
            <height>2</height>
            <bgcolor>#C7A298</bgcolor>
            <hovercolor>#E7B7A9</hovercolor>
        </block>
        <block>
            <name>Bottom</name>
            <left>0</left>
            <top>14</top>
            <width>21</width>
            <height>2</height>
            <bgcolor>#1FD9AA</bgcolor>
            <hovercolor>#25F5C1</hovercolor>
        </block>
        <block>
            <name>BodyEnd</name>
            <left>0</left>
            <top>16</top>
            <width>21</width>
            <height>2</height>
            <bgcolor>#FF9E53</bgcolor>
            <hovercolor>#FBB37B</hovercolor>
        </block>
    </blocks>
</template>

Важно!
Блок «Content» является обязательным. Это основная центральная зона для вывода содержимого страницы.

Основные настройки:

  • bgcolor – отвечает за цвет фона блока в визуальном шаблоне;
  • bgimage – отвечает за фоновое изображение визуального шаблона;
  • celsize – размер одного деления (одной клетки в сетке) в пикселях;
  • blockswidth и blocksheight –отвечают за количество делений в визуальном макете (количество клеток в сетке) дизайна по ширине и высоте. Для более сложных шаблонов может понадобиться увеличение количества блоков и уменьшение размера клетки (celsize) для более точной визуализации шаблона;
  • block – зона для макета.

Для каждой зоны необходимо указать:

  • name – имя, выводимое на макете;
  • left, top – отвечают за координаты расположения зоны в общей сетке макета путем выставления количества делений (клеток) для отступа. top – это количество делений от верхней части макета, после которых начинается текущая зона. left – количество блоков от левого края макета, после которых начинается текущая зона;
  • width, height – ширина и высота зоны в делениях (клетках);.
  • bgcolor – цвет зоны;
  • hovercolor – цвет зоны при наведении на нее мышью.