Скачать заготовку для создания шаблонов
Статья предназначена для веб-мастеров начинающих свое знакомство с Moguta.CMS и желающих изучть устройство шаблонов. По результатам инструкции изложенной в этом материале, будет получена заготовка для дальнейшей разработки шаблона с нуля.
Цель статьи заключается в демонстрации процесса переноса "каркаса" подготовленной HTML верстки сайта. Есть и более простой способ: создание шаблона на основе дефолтного.
Если вы хотите как можно быстрее начать работать, то эта статья для вас. Мы представим вам краткое руководство по созданию и подключению своего шаблона.
<html>
<head>
<?php mgMeta(); ?>
</head>
<body>
<div id="container">
<div id="header"><h1>Шапка сайта</h1></div>
<div id="wrapper">
<div id="content">
<h1>Содержимое страницы созданное движком</h1>
<?php layout('content'); ?>
</div>
</div>
<div id="navigation">
<p><strong>Левое меню</strong> тут будет выведено левое меню тут будет выведено левое меню тут будет выведено левое меню тут будет выведено левое меню тут будет выведено левое меню тут будет выведено левое меню тут будет выведено левое меню</p>
</div>
<div id="extra">
<p><strong>Место под левым меню </strong> тут может быть выведены блоки с акциями, новостями, опросами и другой любой другой информацией </p>
</div>
<div id="footer"><p>Подвал сайта</p></div>
</div>
</body>
</html>
Обратите внимание в верстке встречается две обязательные вставки , связывающие шаблон с логикой движка.
<?php mgMeta(); ?> - подключает стили шаблона и движка
<?php layout('content'); ?> - выводит содержание страниц сайта формируемых движком.
Копируем CSS стили и вставляем в файл mg-templates/css/style.css
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#container{width:700px;margin:0 auto}
div#content{float:right;width:480px; padding:10px;}
div#navigation{float:left;width:200px}
div#extra{float:left;clear:left;width:200px}
div#footer{clear:both;width:100%}
Всё, шаблон готов, перейдите в настройки магазина и выберите из выпадающего списка новый шаблон mytempl. Конечно, назвать получившееся в полной мере шаблоном сложно, но как каркас и для дальнейшей работы данная заготовка вполне подойдет.
Далее в тело шаблона template.php необходимо вставить теги со ссылками на внутренние страницы движка и прописать для них стили в style.css