Сообщество
Если вы хотите поделиться собственным дизайном Большой Улицы, сделайте это здесь.
И вам реклама и нам пригодится =)
Шаблоны в BigStreet CMS
Как сверстать под BigStreet. Пособие для верстальщиков.
В CMS используется система шаблонов Smarty, выбранная создателем движка redhummer`ом. Если имеется опыт работы с шаблонизаторами, то проблем со Smarty возникнуть не должно. Более подробное описание принципов работы, синтаксиса Smarty и шаблонизаторов в целом здесь:
- в Википедии
- Официальное руководство
Вступление
MVC-архитектура, используемая в движке(в движке нет модели, но это неважно в контексте), подразумевает отделение логики от представления. То есть программист, имея минимальные знания о вёрстке, делает своё дело, и в итоге: сначала выполняется основная логика приложения (Controller), предоставляя данные для последующего их оформления верстальщиком в "представлении" (View).
Но полного разделения не происходит (причины - не важны в данной статье), и верстальщику нужно знать, что такое операторы условия (IF - ELSEIF - ELSE, или краткая запись УСЛОВИЕ : TRUE ? FALSE), циклы (WHILE-DO, FOR, FOREACH), и понимать, зачем они нужны.
Вот пример - вывод списка тегов:
<div class="tags_cloud"> {foreach item=tag name=tags_cloud from=$aTagsCloud} <a class="tag" style="white-space: nowrap; color: {$tag->getColor()}; font-size: {$tag->getSize()}" href="{$oRouter->getPathWeb()}/blog/tag/{$tag->getTitle()|urlencode}/">{$tag->getTitle()|htmlspecialchars}</a> {/foreach} </div>
"Controller" предолставил для "View" массив с тегами.
В шаблоне используется проход по массиву, то есть для каждого элемента массива используется это:
<a class="tag" style="white-space: nowrap; color: {$tag->getColor()}; font-size: {$tag->getSize()}" href="{$oRouter->getPathWeb()}/blog/tag/{$tag->getTitle()|urlencode}/">{$tag->getTitle()|htmlspecialchars}</a>
Архитектура
В движке базовой единицей является модуль. То есть, вызывая страницу http://bigstreet.ru/blog/last/, мы вызываем сначала пре-контроллер модуля "Блог" (./modules/blog/controller.php), а затем его подмодуль (Action) "Все блоги" (./modules/blog/last.action.php). Если Action не указан в адресной строке, то обычно используется стандартный index.action.php. Для каждого "Action" существует свой Smarty-шаблон. Находятся они(за редким исключением, которое я опишу ниже *) в папке templates, лежащей в папке модуля. Итак, в нашем случае это папка ./modules/blog/templates.
Нашему action`у соответствует шаблон ./modules/blog/templates/last.tpl.
Рассмотрим его содержимое:
{include file="$path_root/themes/$site_theme/templates/sample.header.tpl"} {if $aTopics} {if $allpage > 1 } <div class="pager" style="padding: 5px 0 15px 2px"> {sliding_pager baseurl=$baseurl url_append="" pagecount=$allpage curpage=$curpage txt_first = '1' txt_prev = '←' separator = '' txt_next = '→' txt_last = $allpage txt_skip = ' ... ' } </div> {/if} <div style="padding-top: 5px">{include file="$path_root/themes/$site_theme/templates/sample.topics.tpl"}</div> {if $allpage > 1 } <div class="pager" style="padding: 0 0 0 2px"> {sliding_pager baseurl=$baseurl url_append="" pagecount=$allpage curpage=$curpage txt_first = '1' txt_prev = '←' separator = '' txt_next = '→' txt_last = $allpage txt_skip = ' ... ' } </div> {/if} {/if} {include file="$path_root/themes/$site_theme/templates/sample.footer.tpl"}
и разжуём, что к чему:
{include file="$path_root/themes/$site_theme/templates/sample.header.tpl"}
- подключаем шапку движка. Она лежит в папке с шаблонами, которые используются всеми модулями (в данном случае - ./themes/default/templates.
- далее проверяем, не пустой ли массив, переданный нам controller`ом. Если не пустой, то:
{if $allpage > 1 } <div class="pager" style="padding: 5px 0 15px 2px"> {sliding_pager baseurl=$baseurl url_append="" pagecount=$allpage curpage=$curpage txt_first = '1' txt_prev = '←' separator = '' txt_next = '→' txt_last = $allpage txt_skip = ' ... ' } </div> {/if}
- добавляем постраничную навигацию (pagination). Не вдаюсь в подробности(в тему статьи это не входит), просто эта часть кода отвечает за навигацию.
<div style="padding-top: 5px">{include file="$path_root/themes/$site_theme/templates/sample.topics.tpl"}</div>
- подключаем файл с выводом списка записей. Этот файл универсален, используется во многих action`ах, поэтому находится среди шаблонов, используемых во всём движке, а не отдельно в каждом модуле (напомню, эта папка в данном случае ./themes/default/templates). Этому файлу нужна лишь определённая переменная с массивом, в котором находится информация из БД о постах. В данном примере эта переменная - $aTopics.
{if $allpage > 1 } <div class="pager" style="padding: 0 0 0 2px"> {sliding_pager baseurl=$baseurl url_append="" pagecount=$allpage curpage=$curpage txt_first = '1' txt_prev = '←' separator = '' txt_next = '→' txt_last = $allpage txt_skip = ' ... ' } </div> {/if} {/if} {include file="$path_root/themes/$site_theme/templates/sample.footer.tpl"}
- затем ещё раз подключаем навигацию (для удобства, чтобы она имелась и после списка топиков), и подключаем подвал (footer) страницы.
* - движок проверяет нахождение шаблона для action`а сначала в папке ./modules/%MODULE%/templates/%ACTION%.tpl, и если не находит, то обращается в папку с шаблонами для всего движка ./themes/default/templates/%ACTION%.tpl
Таким образом, мы рассмотрели основы использования шаблонов в движке BigStreet.
Позже в статью добавлю назначение всех файлов в папке ./themes/default/templates, которые мы подключаем в шаблоны модулей.
| Alphard |
25 января 2010 12:31 |
комментариев: 3 |
 |
5,03 |
 |
|
просмотров: 1979 |
Комментарии:
Только зарегистрированные пользователи могут оставлять комментарии.
|
|
Жаль что я недостаточно осведомлен в этой области…
говори, поделюсь ресурсами )
Написать комментарий