Логотип

Документация по макросам и шаблонам UMI.CMS

Верстка шаблонов используемых модулей

После того, как мы обозначили, где в шаблонах дизайна мы собираемся выводить ленты новостей, нам необходимо определить то, каким образом мы будем отображать новости, — то есть оформить результаты работы макросов.

Лента новостей на главной странице сайта

Результатом работы макроса %news lastlist()%, в случае успешного завершения, является вывод блока lastlist_block заданного шаблона. Этот блок отвечает за отображение всего списка в целом, а вид отдельных элементов списка мы определим далее. Оформим этот блок в шаблоне в соответствии с нашими задачами:

файл ~/tpls/news/home.tpl

$FORMS['lastlist_block'] = <<<END

<div id="news" class="block">

 <h2>Новости и публикации</h2>
 
 
 
 <hr/>

 
 
 

</div>

END;

Список анонсов новостей

Для того, чтобы указать макросу, куда нужно вывести список новостей, используется локальный макрос %items%. Здесь этот макрос поочередно вставляет каждую новость, из списка последних новостей запрошенной ленты. Для оформления отдельной новости используется блок lastlist_item, в котором задается то, как будет выглядеть каждый отдельный элемент списка новостей. Поэтому мы модифицируем файл шаблона следующим образом — указываем макросом %items% место, где будет отображен список, и добавляем в шаблон оформление блока lastlist_item:

файл ~/tpls/news/home.tpl

$FORMS['lastlist_block'] = <<<END

<div id="news" class="block">

 <h2>Новости и публикации</h2>
 
 %items%
 
 <hr/>

 
 
 

</div>

END;

$FORMS['lastlist_item'] = <<<END

<div class="item">

  <span class="date">
    
  </span> | 
            
  <a href="#ссылка_на_ленту">
        
  </a>

  <a href="#ссылка_на_новость" class="title">
    
  </a>

    

  <div>
    
  </div>

  <div class="comments">
    <a href="#ссылка_на_все_комментарии" >
      
    </a> | 
    
    <a href="#ссылка_на_добавление_комментария">
      
    </a>
  </div>

</div>

END;

Рассмотрим поля блока lastlist_item по порядку:

  • Дата публикации новости. Для вывода этого поля воспользуемся макросом %publish_time%, который на этом уровне (в блоке lastlist_item) вернет значение соответствующего поля для конкретной новости. Этот макрос возвращает дату в формате UNIX TIMESTAMP, поэтому для конвертации нам понадобится системный макрос %system convertDate()%.

    Заменяем комментарий на %system convertDate(%publish_time%, 'd.m.Y')%

  • Название ленты и ссылка на всю ленту, содержащую данную новость. Воспользуемся локальными макросами модуля "Новости" — %lent_name% и %lent_link%, подставив их в соответствующие места кода:

    <a href="%lent_link%">%lent_name%</a>

  • Ссылка на полный текст новости и заголовок новости. Для получения ссылки на текущий объект, являющийся страницей (в данном случае это страница с полным текстом новости), воспользуемся макросом %link%. Аналогично, для получения заголовка объекта-страницы существует макрос %header%:

    <a href="%link%" class="title">%header%</a>

  • Html-код картинки анонса новости. Для того, чтобы картинки анонсов были одинаковых размеров, воспользуемся макросом %system makeThumbnail()%. Оформим для этого макроса свой собственный шаблон, так чтобы у нас была возможность указать нужные нам стили:

    файл ~/tpls/thumbs/news.anons.tpl

    <?php
    
    $FORMS = Array();
    
    $FORMS['image'] = <<<END
    
    <img src="%src%" width="%width%" height="%height%" style="border: #777 1px solid;" class="preview" />
    
    END;
    
    ?>

    Значения, которые будут подставлены вместо %src%, %width% и %height% мы передадим через параметры макроса %system makeThumbnail()%:

    %system makeThumbnail('path_to_anons_pic', '50', '50', 'news.anons')%

    Таким образом мы задаем ширину и высоту равную 50px, и нам осталось передать параметр path_to_anons_pic, указывающий путь к картинке анонса, для каждой конкретной новости из списка.

    Для получения этого параметра воспользуемся макросом %data getProperty()% модуля шаблоны данных. Передадим специальным макросом %id% id текущей новости и запросим значение интересующего поля с идентификатором anons_pic. Локальный макрос %filepath% (см. описание блока file макроса %data getProperty()%) позволяет получить путь к файлу картинки анонса. Поскольку у нас стоит задача передать этот путь макросу %system makeThumbnail()% — оформим нужным образом шаблон для макроса %data getProperty()%:

    файл ~/tpls/data/news.anons.home.tpl

    <?php
    
    $FORMS = Array();
    
    $FORMS['img_file'] = <<<END
    
    %system makeThumbnail('%filepath%', '50', '50', 'news.anons')%
    
    END;
    
    ?>

    В итоге, вызов макроса в шаблоне ~/tpls/news/home.tpl будет выглядеть следующим образом:

    %data getProperty(%id%, 'anons_pic', 'news.anons.home')%

  • Текст анонса новости. Макрос %anons% в этом блоке выведет нужное нам поле на странице. Подставляем в шаблон:

    <div>%anons%</div>

  • Комментарии, число комментариев и ссылка на добавление комментариев. Для отображения числа комментариев к текущей новости мы можем воспользоваться макросом %comments countComments()% модуля "Комментарии", которому мы передадим id текущей новости макросом %id%. Воспользуемся якорями для быстрого перемещения к списку комментариев и к полю добавления нового комментария на странице просмотра полного текста новости. Ссылку на полный текст новости мы получим макросом %link%, а якоря уже включены в шаблон ~/tpl/comments/default.tpl (см. описание блоков comments_block и comments_block_line шаблона модуля "Комментарии"). Нас интересуют следующие якоря: #comments и #add_comment.

    Оформим ссылку просмотра комментариев:

    <a href="%link%#comments">Комментарии (%comments countComments(%id%)%)</a> |

    И ссылку на добавление комментария:

    <a href="%link%#add_comment">Добавить комментарий</a>

Итак, если внести все замены в блоке lastlist_item в шаблон ~/tpls/news/home.tpl, то этот блок будет выглядеть следующим образом:

$FORMS['lastlist_item'] = <<<END

<div class="item">

 <span class="date">
   %system convertDate(%publish_time%, d.m.Y)%
 </span> | 

 <a href="%lent_link%">%lent_name%</a>
 <a href="%link%" class="title">%header%</a>

 %data getProperty(%id%, 'anons_pic', 'news.anons.home')%

 <div>
   %anons%
 </div>

 <div class="comments">
   <a href="%link%#comments" >Комментарии (%comments countComments(%id%)%)</a> | 
   <a href="%link%#add_comment">Добавить комментарий</a>
 </div>

</div>

END;

Ссылка на архив новостей

Для отображения этой ссылки существует локальный макрос %archive% модуля "Новости" — этот макрос выводит содержимое блока lastlist_archive. Подставим макрос в нужное место и оформим соответствующий блок в шаблоне ~/tpls/news/home.tpl:

$FORMS['lastlist_archive'] = <<<END

 <a id="archive" href="%archive_link%">Архив новостей</a>

END;

Ссылка на подписку по rss

Для подписки по rss существует одноименный метод модуля "Шаблоны данных". Вызов метода можно осуществить непосредственно из url, указав идентификатор ленты при помощи макроса %id%:

<a id="rss" href="/data/rss/%id%/">RSS</a>

Поле ввода адреса для подписки по e-mail

Для подписки по e-mail существует отдельный модуль "Рассылки", который для вывода формы подписки использует макрос %dispatches subscribe()%. Оформим нужным образом отдельный шаблон для отображения результатов работы этого макроса:

файл ~/tpls/dispatches/home.tpl:

<?php

$FORMS = Array();

$FORMS['subscribe_unregistred_user'] = <<<END

<form method="post" name="sbs_frm" enctype="multipart/form-data" action="%pre_lang%/dispatches/subscribe_do/">

 <label for="subscribe">
   <div>Подписка на новости:</div>
 </label>

 <input name="sbs_mail" id="subscribe" class="textinputs" type="text" value="Введите E-mail" onfocus="if (this.value == 'Введите E-mail') this.value=''" onblur="if (!this.value.length) this.value='Введите E-mail';" />
 <input type="submit" value="Ok"/>

</form>

END;


$FORMS['subscribe_registred_user'] = <<<END

<form method="post" name="sbs_frm" enctype="multipart/form-data" action="%pre_lang%/dispatches/subscribe_do/">

 <label for="subscribe">
  <div>Вы подписаны на рассылки:</div>
 </label>

 %subscriber_dispatches%
 
 <input type="submit" value="Ok"/>
</form>

END;


$FORMS['subscriber_dispatches'] = <<<END

<table border="0" cellpadding="0" cellspacing="2">

 %rows%

</table>

END;


$FORMS['subscriber_dispatch_row'] = <<<END

<tr>
 <td>

  <input type="checkbox" %checked% name="subscriber_dispatches[]" value="%disp_id%" /> 
 
  <span>
   %disp_name%
  </span>

 </td>
</tr>

END;

?>

Блок subscribe_unregistred_user отвечает за отображение формы для незарегистрированных пользователей, а subscribe_registred_user с двумя вложенными блоками subscriber_dispatches и subscriber_dispatch_row — за отображение формы и списка существующих подписок для текущего зарегистрированного пользователя. Подробнее с работой макроса %dispatches subscribe()% и его блоков можно ознакомиться в соответствующей главе этой документации.

Итоговый вариант шаблона ~/tpls/news/home.tpl

файл ~/tpls/news/home.tpl

<?php

$FORMS = Array();

$FORMS['lastlist_block'] = <<<END

<div id="news" class="block">

 <h2>Новости и публикации</h2>

 %items%

 <hr/>

 %archive%

 <a id="rss" href="/data/rss/%id%/">RSS</a>

 %dispatches subscribe('home')%

</div>

END;


$FORMS['lastlist_item'] = <<<END

<div class="item">

 <span class="date">
   %system convertDate(%publish_time%, d.m.Y)%
 </span> |

 <a href="%lent_link%">%lent_name%</a>
 <a href="%link%" class="title">%header%</a>

 %data getProperty(%id%, 'anons_pic', 'news.anons.home')%

 <div>
  %anons%
 </div>

 <div class="comments">
  <a href="%link%#comments" >Комментарии (%comments countComments(%id%)%)</a> | 
  <a href="%link%#add_comment">Добавить комментарий</a>
 </div>

</div>

END;


$FORMS['lastlist_archive'] = <<<END

<a id="archive" href="%archive_link%">Архив новостей</a>

END;


?>

Лента новостей на внутренних страницах сайта

Здесь, как и в предыдущем случае, мы используем макрос %news lastlist()%, но уже с другим шаблоном — для внутренних страниц ~/tpls/news/akcii_inner.tpl. Оформим нужным образом блоки этого шаблона.

файл ~/tpls/news/akcii_inner.tpl

<?php

$FORMS = Array();

$FORMS['lastlist_block'] = <<<END

<div id="promo" class="block">

  <h2>%h1%</h2>

  %items%

</div>

END;

$FORMS['lastlist_item'] = <<<END

<div class="description">

  <h3>%header%</h3>
  
  <p>%anons%</p>

</div>

END;

?>

lastlist_block — отвечает за вывод всей ленты новостей, поэтому макрос %h1% в данном случае выведет поле h1 для ленты (см. Рисунок 8.1, «Организация лент новостей»). Локальный макрос %items% отвечает за вывод отдельных новостей оформленных по блоку lastlist_item. В этом блоке макрос %header% выведет заголовок для отдельной новости, а макрос %anons% отобразит анонс новости.

Страница вывода всех новостей из ленты и страница полного текста новости

Как уже было сказано ранее, эти страницы являются обычными внутренним страницами сайта, для которых мы используем шаблон дизайна ~/tpls/content/inner.tpl. В этом шаблоне макрос %content% выводит результаты работы макроса %news lastlist()% для ленты и результаты работы макроса %news view()% — для страницы полного текста новости. И в том, и в другом случае макросы вызываются с шаблоном по умолчанию ~/tpls/news/default.tpl.

Лента новостей

Оформим для макроса %news lastlist()% блок вывода всей ленты и блок отдельной новости из списка. Для блока вывода всей ленты нам необходимо предусмотреть возможность разбиения списка по страницам — пейджинг. Оформление анонсов сделаем таким же, как и на главной странице (см. «Лента новостей на главной странице сайта»).

файл ~/tpls/news/default.tpl

<?php

$FORMS = Array();

$FORMS['lastlist_block'] = <<<END

<div>

  %items%

  

</div>

END;

$FORMS['lastlist_item'] = <<<END

  
 
END;

Локальный макрос %items%, как и в предыдущих примерах, указывает куда выводить список элементов, оформленных по блоку lastlist_item.

Для отображения списка страниц при постраничном выводе существует специальный макрос %system numpages()%, для вывода результатов которого мы создадим свой собственный шаблон:

файл ~/tpls/numpages/standart.tpl

<?php

$FORMS = Array();

$FORMS['pages_block'] = <<<END

 <div class="numpage" style="padding-left: 10px;">
  <div class="small">

   Страницы:&nbsp;&nbsp;%pages%
 
  </div>
 </div>

END;


$FORMS['pages_item'] = <<<END

 <a href="%link%">
  <b>%num%</b>
 </a>

 &nbsp;%quant%

END;

$FORMS['pages_item_a'] = <<<END

 <span class="active_num">%num%</span>
 &nbsp;%quant%

END;

$FORMS['pages_quant'] = <<<END
|
END;

$FORMS['pages_block_empty'] = <<<END

 <div class="numpage" style="padding-left: 10px;">

 </div>

END;

?>

Блок pages_block задает оформление всего списка страниц, где pages_item задает оформление номеров страниц, pages_item_a — оформление текущего номера страницы, pages_quant — разделитель списка номеров. Описание всех блоков шаблона для макроса %system numpages()% можно посмотреть в топике посвященному этому макросу.

Для правильной работы макроса %system numpages()% необходимо передать ему еще 2 параметра: общее количество новостей и количество новостей, выводимых на странице. Для получения общего количества новостей воспользуемся специальным макросом %total%. Для получения количества элементов, выводимых на странице, воспользуемся макросом %per_page%, который в данном случае вернет значение, указанное в настройках модуля "Новости".

В итоге вызов макроса должен выглядеть следующим образом:

%system numpages(%total%, %per_page%, 'standart')%

Страница полного текста новости

Для вывода полного текста новости макрос %news view()% использует блок view. Поэтому оформим его в шаблоне ~/tpls/news/default.tpl с учетом поставленных задач:

$FORMS['view'] = <<<END









END;

Рассмотрим поля блока view по порядку:

  • Стандартизованная картинка к новости. Аналогичная задача уже разбиралась подробно выше, когда мы оформляли вывод стандартизованной картинки для анонса (см. «Список анонсов новостей», вывод html-кода картинки анонса). Поэтому отметим лишь основные шаги.

    Воспользуемся макросом %system makeThumbnail()%, которому мы назначим свой собственный шаблон ~/tpls/thumbs/news.view.tpl:

    <?php
    
    $FORMS = Array();
    
    $FORMS['image'] = <<<END
    
     <img src="%src%" width="%width%" height="%height%" border="0" style="border: #777 1px solid;" class="news_photo" />
    
    END;
    
    ?>

    Для передачи параметров макросу %system makeThumbnail()% воспользуемся макросом %data getProperty()%, для которого оформим свой собственный шаблон ~/tpls/data/news.view.tpl:

    <?php
    
    $FORMS = Array();
    
    $FORMS['img_file'] = <<<END
    
     %system makeThumbnail(%filepath%, '200', 'auto', 'news.view')%
    
    END;
    
    ?>

    Локальный макрос %filepath% передает путь до картинки макросу %system makeThumbnail()%, ширину мы назначаем 200px, параметр auto указывает, что высота задается с сохранением пропорций, и мы указываем шаблон ~/tpl/thumbs/news.view.tpl

    В итоге для получения кода картинки мы вызываем в шаблоне ~/tpls/news/default.tpl следующее:

    %data getProperty(%id%, 'publish_pic', 'news.view')%

    где %id% укажет идентификатор данной новости, publish_pic — это запрос поля "картинка публикации" для данной новости, ~/tpls/data/news.view.tpl — шаблон с макросом %system makeThumbnail()%, обрабатывающим картинку.

  • Полный текст новости. Вывод осуществляется макросом %content%.

  • Блок со списком связанных новостей. Для вывода этого списка существует макрос %news related_links()%. Этот макрос по умолчанию также использует шаблон ~/tpl/news/default.tpl, с двумя собственными блоками related_block — для оформления списка целиком и related_line — для оформления отдельного элемента списка. Оформим нужным нам образом эти блоки в шаблоне:

    файл ~/tpl/news/default.tpl

    $FORMS['related_block'] = <<<END
    
    <div id="related_news" style="margin-top:150px">
     
     <p>Похожие новости:</p>
    
     <ul>
      %related_links%
     </ul>
    
    </div>
    
    END;
    
    $FORMS['related_line'] = <<<END
    
    <li>
    
     <a href="%link%">
    
       <b>%name%</b> 
      (%system convertDate(%publish_time%, 'Y-m-d')%)
    
     </a>
    
    </li>
    
    END;

    Локальный макрос %related_links% указывает куда выводить элементы списка, оформленные по блоку related_line. Макрос %link% выведет ссылку на связанную новость, а макрос %name% ее заголовок.

    Для указания даты публикации воспользуемся уже знакомой конструкцией: макрос %publish_time% отобразит дату публикации (в формате UNIX TIMESTAMP), а макрос%system convertDate()% приведет ее к нужному нам виду.

  • Добавление формы для ввода комментария. Для этого существует макрос модуля "Комментарии" %comments insert()%, которому надо передать %id% новости:

    %comments insert(%id%)%

Итоговый вариант шаблона ~/tpl/news/default.tpl

<?php

$FORMS = Array();

$FORMS['lastlist_block'] = <<<END

<div>

 %items%
 %system numpages(%total%, %per_page%, 'standart')%

</div>

END;

$FORMS['lastlist_item'] = <<<END

<div class="item">

 <span class="date">
   %system convertDate(%publish_time%, d.m.Y)%
 </span> |

 <a href="%lent_link%">%lent_name%</a>
 <a href="%link%" class="title">%header%</a>

 %data getProperty(%id%, 'anons_pic', 'news.anons.home')%

 <div>
  %anons%
 </div>

 <div class="comments">
  <a href="%link%#comments" >Комментарии (%comments countComments(%id%)%)</a> | 
  <a href="%link%#add_comment">Добавить комментарий</a>
 </div>

</div>

END;


$FORMS['view'] = <<<END

 %data getProperty(%id%, 'publish_pic', 'news.view')%

 %content%

 %news related_links(%id%)%

 %comments insert(%id%)%

END;

$FORMS['related_block'] = <<<END

<div id="related_news" style="margin-top:150px">

 <p>Похожие новости:</p>

 <ul>
  %related_links%
 </ul>

</div>

END;

$FORMS['related_line'] = <<<END

<li>

 <a href="%link%">

   <b>%name%</b> 
  (%system convertDate(%publish_time%, 'Y-m-d')%)

 </a>

</li>

END;

?>