{$title}

====== Анализ исходных макетов и их интеграция ====== Под исходными макетами здесь будем понимать сверстанные макеты страниц будущего сайта. Особых требований к верстке макетов под Astra.CMS - нет. Для успешной интеграции исходного макета в шаблоны Astra.CMS, необходимо иметь представление: - О языке шаблонов [[:smarty|Smarty]]. - О [[integration:globaldata|глобальных переменных]], доступных во всех шаблонах страниц или блоков. - О переменных, доступных в шаблонах конкретного [[:modules|модуля]] или [[:blocks|блока]]. ===== Пример исходного макета ===== На [[:admin:index|этапе конструирования]], был рассмотрен пример простого макета с сайта www.styleshout.com. Теперь {{:integration:underground_html.zip|скачаем}} его сверстанный исходник и интегрируем в шаблоны полученного ранее сайта. Сразу копируем папку images с графикой и стилями в /templates/[mysiteid]/. Остается один index.html файл, который будем анализировать, и внедрять фрагментами в [[:smarty|smarty шаблоны]]. ===== Шапка и подвал ===== После беглого просмотра исходного HTML кода замечаем, что область %%

…

%% содержит центральную контентную часть. Соответственно то, что выше нее, выделим как фрагмент в файле **_header.tpl**, а то, что ниже в **_footer.tpl**. Сразу проанализируем эти области на предмет нахождения фрагментов, которые имеет смысл выделить в управляемые блоки. Это верхнее меню, форма поиска, а так же ряд левых блоков, которые мы заменим соответствующими [[:smarty:smarty6|smarty функциями]]. Сразу подставим [[:integration:globaldata|глобальные переменные]] для тегов заголовка страницы. ==== _header.tpl ====




    
        
        
        
        
        {$title}	
        {$jscripts}



            								
                Этот сайт собран на Astra.CMS.			
                {block id="upmenu"} {* Блок верхнего меню. *}
            

            						
                MobileCompany				
                {block id="search"} {* Блок формы поиска. *}				
            
            
                {leftblocks} {* Вывод всех блоков с левым расположением. *}

==== _footer.tpl ====


        
            	
                © 2008 My Company   	 
                Design by: styleshout | 
                  	 
                Engine by: Astra.CMS | 
                      
                Главная |  	
                Карта сайта | {*Ссылка на раздел "Карта сайта". *}
                RSS Новости {* Ссылка на RSS канал. *}

===== Главная страница ===== Еще на этапе создания и настройки раздела "Страницы", для главной страницы сайта был назначен шаблон pages_main.tpl. Ищем его в /templates/[mysiteid]/ и редактируем.


{include file="_header.tpl"}

Добро пожаловать
{$page.content} {* Текст приветствия. *}

{block id="favorites"} {* Блок избранных товаров. *}
{block id="articles"} {* Блок последних статей. *}

{include file="_footer.tpl"}

===== Обрамления блоков ===== Для левых блоков можно выделить общий способ представления контейнера. Выделим его в шаблон обрамления /templates/[mysiteid]/frames/leftblocks.tpl. Таким образом все левые блоки будут иметь общий вид обрамления.


{$title} {* Заголовок блока. *}

    {$content} {* Содержимое блока. *}

===== Блок ссылок на категории каталога ===== Имеет тип блока [[:blocks:categories|"Список ссылок на категории раздела"]] и назначенный шаблон categories.tpl. Ищем его в /templates/[mysiteid]/blocks/ и редактируем.



    {section name=i loop=$categories} {* Циклический обход массива ссылок. *}
        {$categories[i].name}
    {/section}

===== Блок свежих новостей ===== Имеет тип блока [[:blocks:catalog|"Список материалов"]] и назначенный шаблон news.tpl.


{section name=i loop=$items} {* Циклический обход массива записей. *}
    {$items[i].description}
    {$items[i].date|date_format}
{/section}
Все новости

===== Блок верхнего меню ===== Имеет тип блока [[:blocks:links|"Список произвольных ссылок"]] и назначенный шаблон upmenu.tpl.



    {section name=i loop=$links} {* Циклический обход массива ссылок. *}
         {* Если ссылка активная (выделена). *}
            {$links[i].name}
        
    {/section}

===== Блок формы поиска ===== Имеет тип блока [[:blocks:search|"Форма поиска"]] и назначенный шаблон search.tpl.

===== Блок избранных товаров на главной ===== Имеет тип блока [[:blocks:catalog|"Список материалов"]] и назначенный шаблон favorites.tpl.


Популярные модели.
{section name=i loop=$items} {* Обход массива записей *}
    {$items[i].name} {* Название модели. *}
    
        {image id=$items[i].idimg class="float-left" height="100"}
        {$items[i].description} {* Краткая аннотация. *}
        

            Цена: {$items[i].price} $
        
    
    
{/section}

===== Блок свежих статей на главной ===== Имеет тот же тип блока [[:blocks:catalog|"Список материалов"]] и назначенный шаблон articles.tpl.


Последние статьи.
{section name=i loop=$items} {* Обход массива записей *}
    {$items[i].name} {* Название статьи. *}
    
        {image id=$items[i].idimg class="float-left"}
        {$items[i].description} {* Краткая аннотация. *}
    
    
        Читать : 
        Комментариев ({$items[i].comments}) : 
        {$items[i].date|date_format}
    
    
{/section}

===== Итоги и дальнейшие действия ===== Как сейчас выглядит главная страница сайта. {{ :integration:examplediz.jpg }} Дальнейшая работа в этом примере будет заключаться в формировании шаблонов каждого из типов страниц для используемых [[:modules|модулей]]. Читайте далее, про [[:integration:objects|особенности интеграции дизайна для некоторых объектов сайта]].