Perfecto CMS - Система управления контентом
  • Русский язык
  • English version
Вход на сайт
Регистрация
Online документация
Online документация
Вы можете найти лучшие практичные процедуры по настройки, которые помогут вам лучше спланировать свои сайты.

Интеграция дизайна

4,655 просмотров / 18 Янв 2015 обновлено
Вёрстка web страниц – это разработка веб страницы в редакторе (пример: Adobe Dreamviewer, Coda 2 или в другом) с помощью нарезки имеющегося дизайна в графическом формате (пример: *.psd – Adobe Photoshop)

Сайты, созданные исключительно на HTML, исчезли еще в начале 21 века. На текущий день верстка еще не совсем сайт. Для этого используются CMS или же самописный код, на который делается насадка верстки. Мы будем рассматривать насадку на Perfecto CMS.

Структура шаблона

Итак, у вас уже имеется заранее сверстанный макет для вашего будущего сайта. Для интеграции данного дизайна в Perfecto CMS, достаточно иметь навыки верстальщика. Для примера рассмотрим стандартный шаблон системы, который находится в директории: ./templates/frontend/default/

Данная директория содержит следующие файлы:
Во всех релизаих Perfecto CMS
index.tpl - Основной шаблон
header.tpl - Шаблон шапки сайта
footer.tpl - Шаблон подвала сайта
news.tpl - Шаблон модуля новостей
static.tpl - Шаблон модуля статических страниц
search.tpl - Шаблон модуля поиск
errors.tpl - Шаблон страницы HTTP ошибок
feedback.tpl - Шаблон формы обратной связи
news.block.tpl - Шаблон последних новостей
tags.block.tpl - Шаблон вспомогательных тегов
Только в релизах «Basic» и «Maxi»
account.tpl - Шаблон аккаунта пользователя
account.block.tpl - Шаблон блока для авторизации
forgot.tpl - Шаблон страницы восстановления пароля
payment.tpl - Шаблон модуля оплаты
Только в релизах «Maxi»
comments.tpl - Шаблон комментариев
reviews.tpl - Шаблон модуля отзывов
votes.block.tpl - Шаблон модуля голосования
Дополнительные папки и файлы
/css/ - Папка с файлами стилей
/js/ - Папка с JavaScript
/images/ - Папка с картинками дизайна
/fonts/ - Папка с шрифтами


index.tpl - Это основной шаблон системы. Данный шаблон интегрирует шапку, подвал и другие модули
header.tpl - Это шаблон шапки сайта, который содержит подключения к стилям, скриптам а также содержит информацию о meta тегах
footer.tpl - Это шаблон подвала сайта
news.tpl, static.tpl, errors.tpl, feedback.tpl, search.tpl... - Другие файлы шаблоны модулей и разных блоков системы

Пример: index.tpl

	{#mod_global.header}

<^^^div class="middle">
<^^^div class="container">
<^^^main class="content">
{#mod.news}
{#mod.static}
{#mod.feedback}
{#mod.search}
{#mod.errors}
<^^^/main>
<^^^/div>

<^^^aside class="left-sidebar">

<^^^!-- IFDEF^^^: homepage -->
{#mod_global.votes.block}
<^^^!-- EL^^^SE -->
{#mod_global.mymodule.block}
<^^^!-- END^^^IF -->

<^^^/aside>
<^^^/div>

{#mod_global.footer}
{#mod_global.header} - Данный код подключает файл header.tpl в основной шаблон сайта
{#mod_global.footer} - Данный код подключает файл footer.tpl в основной шаблон сайта
{#mod.news} - Данный код подключает модуль «Новости» (news.tpl, news.php), в то время как модуль будет доступен только на своей странице
{#mod_global.votes.block} и {#mod_global.mymodule.block} - Данные коды интегрируют модули глобально, они доступы с любой части сайта
IFDЕF, ЕLSE, ЕNDIF - Это стандартные конструкции if/else которые работают в шаблонизаторе. Используйте их с HTML тегами, как указано выше.
Обратите внимание!
Любой шаблон можно подключить двумя методами: {#mod.MODULE_NAME} или {#mod_global.MODULE_NAME}
#mod - подключение модуля, который будет интерпретирован только на своей странице
#mod_global - подключение модуля глобально

Пример: header.tpl

	<^^^!DOCTYPE html>
<^^^html>
<^^^head>
<^^^meta charset="utf-8" />
<^^^title>{page_title}<^^^/title>
<^^^meta name="description" content="{page_descriptions}" />
<^^^meta name="keywords" content="{page_keywords}" />
<^^^base href="{global.base_dir}" />
<^^^link rel="stylesheet" href="templates/frontend/{global.frontend_tpl}/css/style.css" />
<^^^link rel="stylesheet" href="templates/frontend/{global.frontend_tpl}/css/fonts.min.css" />
<^^^link rel="stylesheet" href="templates/frontend/{global.frontend_tpl}/css/core.min.css" />
<^^^script type="text/javascript" src="templates/frontend/{global.frontend_tpl}/js/jquery-1.11.1.min.js"><^^^/script>
<^^^script type="text/javascript" src="templates/frontend/{global.frontend_tpl}/js/core.min.js"><^^^/script>
<^^^/head>

<^^^body>
<^^^div class="wrapper">
<^^^header class="header">
...тут ваша верстка...
<^^^/header>
{global.frontend_tpl} - Переменная шаблона, который после интерпретации заменяется названием текущего шаблона
{global.base_dir} - Переменная директории установки системы
{page_title}, {page_descriptions}, {page_keywords} - Переменные мета тегов для поисковых систем. Они генерируются автоматически и их можно менять через админ-панель

Пример: footer.tpl

			<^^^footer class="footer">
...тут ваша верстка...
<^^^/footer>

<^^^/div>

<^^^/body>
<^^^/html>

Оператор присваивания

Обработчик /modules/frontend/news/module.php
	/*
«assign» используется для назначения переменных в шаблоне
Использование переменных в шаблоне позволяет отделять логику сайта от шаблонов
Данный пример приведен на модуле «Новости», подробная инструкция актуальна для любого модуля
*/
$tpl->assign('name', 'Дэвид Билд');
$tpl->assign('bithday', '11 Января 1990');
Шаблон /templates/frontend/default/news.tpl
	Значение переменной name было установлено как {name}
{name} родился {bithday}
Ваш шаблон будет выводить:
Значение переменной name было установлено как Дэвид Билд
Дэвид Билд родился 11 Января 1990

Динамический блок

Обработчик /modules/frontend/news/module.php
	/*
«define_dynamic» используется для создания динамических блоков на сайте
Объявление динамического блока очень просто и легко
Данный пример приведен на модуле «Новости», подробная инструкция актуальна для любого модуля
*/

$data = array(
1 => array('name'=>'Джон Смит', 'bithday' => '22 Августа 1990'),
2 => array('name'=>'Дэвид Билд', 'bithday' => '11 Января 1990'),
3 => array('name'=>'Нака Саййа', 'bithday' => '07 Ноября 1987')
);

# people_list - название динамического блока
# news - название текущего шаблона
$tpl->define_dynamic("people_list","news");
foreach ($data as $id => $value) {
$tpl->assign("id", $id);
$tpl->assign("name", $value['name']);
$tpl->assign("bithday", $value['bithday']);

# parse - присвоение данных после каждого цикла
$tpl->parse('PEOPLE_LIST', '.people_list');
}
Шаблон /templates/frontend/default/news.tpl
	<^^^!-- BEGIN DYNAMIC BLOCK: people_list -->
{id}: {name} родился {bithday}
<^^^!-- END DYNAMIC BLOCK: people_list -->
Ваш шаблон будет выводить:
1: Джон Смит родился 22 Августа 1990
2: Дэвид Билд родился 11 Января 1990
3: Нака Саййа родился 07 Ноября 1987

Динамический блок внутри другого динамического блока

Обработчик /modules/frontend/news/module.php
	/*
«define_dynamic» используется для создания динамических блоков на сайте
Объявление динамического блока очень просто и легко
Данный пример приведен на модуле «Новости», подробная инструкция актуальна для любого модуля
*/

$cats = array(1 => 'Животные', 2 => 'Авто', 3 => 'Гаджеты');
$subcats = array(
1 => array('name'=>'Кошки', 'category' => 1),
2 => array('name'=>'Собаки', 'category' => 1),
3 => array('name'=>'Кони', 'category' => 1),
4 => array('name'=>'BMW', 'category' => 2),
5 => array('name'=>'Mercedes', 'category' => 2),
6 => array('name'=>'Ford', 'category' => 2),
7 => array('name'=>'Apple', 'category' => 3),
8 => array('name'=>'Samsung', 'category' => 3),
9 => array('name'=>'Lenovo', 'category' => 3)
);

# category_list, subcategory_list - названия динамических блоков
# news - название текущего шаблона
$tpl->define_dynamic("category_list","news");
$tpl->define_dynamic("subcategory_list","news");
foreach ($cats as $cat => $cat_id) {

$tpl->assign('category_name', $cat);

foreach ($subcats as $subcat => $subcat_id) {
if ($cat_id == $subcat['category']) {
$tpl->assign('subcategory_name', $subcat['name']);
$tpl->parse('SUBCATEGORY_LIST', '.subcategory_list');
}
}
# clear - очистка данных под-категории для одного цикла
$tpl->clear("SUBCATEGORY_LIST");

# parse - присвоение данных после каждого цикла (включая данные под-категорий)
$tpl->parse('CATEGORY_LIST', '.category_list');
}
Шаблон /templates/frontend/default/news.tpl
	<^^^!-- BEGIN DYNAMIC BLOCK: category_list -->

<^^^b>{category_name}<^^^/b>

<^^^!-- BEGIN DYNAMIC BLOCK: subcategory_list -->
- {subcategory_name}
<^^^!-- END DYNAMIC BLOCK: subcategory_list -->

<^^^!-- END DYNAMIC BLOCK: category_list -->
Ваш шаблон будет выводить:
Животные
- Кошки
- Собаки
- Кони
Авто
- BMW
- Mercedes
- Ford
Гаджеты
- Apple
- Samsung
- Lenovo

Языковые переменные

Файл языковых переменных /language/ru/frontend/news.lng
	<^^^?php
# все языковые файлы должны содержать ассоциативный массив с именем $lang
$lang = array (
'news_title' => "Свежие новости",
'hello' => "Привет мир! Это моя первая языковая переменная"
");
?>
Обработчик /modules/frontend/news/module.php
	# подключаем необходимый языковый файл
# по умолчанию, во всех модулях подключен языковый файл default.lng
$core->language("news");

/*
$lang_const['news']['news_title'] - $lang_const глобальная переменная, объявленная ранее системой
news - название модуля
news_title - название ключа языкового массива
*/
$tpl->assign('news_title', $lang_const['news']['news_title']);
$tpl->assign('hello', $lang_const['news']['hello']);
Шаблон /templates/frontend/default/news.tpl
	{#lng_news_news_title}
{#lng_news_hello}
Ваш шаблон будет выводить:
Свежие новости
Привет мир! Это моя первая языковая переменная
Заказ дизайна
Уникальное предложение для клиентов Perfecto CMS. Если вы хотите оригинальный дизайн дайте нам знать и мы с вами свяжемся для обсуждения деталей.
Для минимизации времени на обсуждение и разработку, рекомендуем скачать бланк, заполнить его и отправить нам на электронный адрес: Our email
Приметная оценка проекта
600 USD

Ваш браузер устарел!

Пожалуйста, скачайте последнюю версию Internet Explorer
Кстати, мы рекомендуем использовать другой браузер ;)