пятница, 6 сентября 2013 г.

MODX Revolution 2.2.9-pl (traditional) - Создаем шаблон

Установка: site.su/setup
Админка: site.su/manager

Для установки включить модули: pdo, pdo_mysql, hash, curl

Выбор русского языка:
System/System Settings
В фильтре выбрать Lexicon and Language
Language: ru
Manager Language: ru

Путь к шаблону: MODX/assets/templates/technokert/

Есть верстка (html, css, js):
index.html


<!doctype html>
<html lang="ru">
<head>
<!--META's BEGIN-->
<meta charset="utf-8">
<!--META's END-->
<title>HTML5</title>
<!--CSS BEGIN-->
<link rel="stylesheet" href="./css/style.css" />
<link rel="icon" type="image/x-icon" href="./favicon.ico" />
<!--CSS END-->
<!--Javascript BEGIN-->
<script src="./js/jquery-2.0.2.js"></script>
<script src="./js/script.js"></script>
<!--Javascript END-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" href="./css/style-ie.css" />
<![endif]-->
<!--[if IE 6]>
<script src="./js/DD_belatedPNG-Fix/DD_belatedPNG_0.0.8a-min.js"></script>
<script>DD_belatedPNG.fix('div, ul, li, span, a, u, s, i, header, footer, strike, .myclass, #myid');</script>
<![endif]-->
</head>
<body>
<!--Header BEGIN-->
<header>
<i></i>
<div class="widthController">
<a href="" id="logo"></a>
<span>
<a href="" class="phone" style="margin-left:0;"></a>
<p class="font-large">8 (901) 500-67-50</p>
<a href="" class="skype"></a>
<a href="" class="vk" style="margin-right:0;"></a>
</span>
<div class="clear"></div>
</div>
<div class="clear"></div>
</header>
<!--Header END-->
<!-- Menu BEGIN -->
<div class="widthController">
<ul id="MainMenu" class="font-normal">
<li><a href="">О компании</a></li>
<li><a href="">Фотоальбом</a></li>
<li><a href="">Контакты</a></li>
</ul>
</div>
<!-- Menu END -->
<!-- Promo BEGIN -->
<div class="widthController">
<div id="Promo">
<span></span>
<section>
<h2 class="font-large">Мебель для кухни на заказ</h2>
<p>Уже давно прошли и забыты те времена, когда все у всех было одинаковое. Люди стремятся к индивидуальности, желают получить лучшее, ищут идеальные решения для кухни своей мечты. Вкусы и требования у всех разные, и это лишний раз доказывает, что создать идеальный проект кухни невозможно, но дать клиенту все инструменты для заказа стильной кухни – это норма обслуживания в нашей сети.</p>
<p>Кухонный гарнитур должен быть индивидуален, эргономичен, красив, а о его надежности позаботятся наши специалисты.</p>
</section>
</div>
</div>
<!-- Promo END -->
<!--TableWraper BEGIN-->
<div id="TableWraper" class="widthController">
<table>
<tr>
<td style="width:357px">
<article>
<h1 class="font-large">Корпусная мебель<br> на заказ из Белоруссии</h1>
<ul>
<li>Прихожие столовые;</li>
<li>Гостиные спальни;</li>
<li>Раздвижные двери;</li>
<li>Детские, матрасы; </li>
<li>Замеры, проекты;</li>
<li>Столы, стулья;</li>
<li>Шкафы-купе; </li>
<li>Кухни.</li>
</ul>
<p>Вся мебель по индивидуальным проектам.Великолепное качество, выполнение заказа в установленные сроки. </p>
<p>Изготовление корпусной мебели на заказ, материалы любого уровня. дизайнерская мебель.Выезд замерщика на адрес, проектирование, профессиональная сборка и установка.Обращайтесь воплотим Ваши идеи и поможем своими.</p>
<p>Всю дополнительную информацию Вы можете узнать, связавшись с нашим менеджером по тел,skype,vk.</p>
</article>
</td>
<td>
<div id="LeftCol">
<section>
<a href="#" class="button ieWidthButton1"><span>Фотоальбом мебели</span></a>
<p>Мебель Белоруссии в Москве – это выбор практичных людей, знающих толк в хорошей мебели.</p>
</section>
</div>
<div id="RightCol">
<section>
<a href="#" class="button ieWidthButton2"><span>Контакты</span></a>
<p><strong>Адрес:</strong><br> г.Пушкино ул Чехова д 40/7 (ТЦ "Статус" цокольный этаж)</p>
</section>
</div>
</td>
</tr>
</table>
</div>
<!--TableWraper END-->
<!--Footer BEGIN-->
<footer class="widthController font-small">
<div>
<a href="mailto:info@abm-jmc.ru" target="_blank">Продвижение, создание<br> и поддержка сайтов,<br> ЗАО «АБМ».</a>
<div class="clear"></div>
</div>
</footer>
<!--Footer END-->
</body>
</html>
view raw gistfile1.html hosted with ❤ by GitHub
Устанавливаем пакеты:

Список установленных пакетов:
CodeMirror - подсветка кода в админке
getPage - это сниппет MODx Revolution, который позволяет вам добавлять пагинацию к элементам сайта, которые могут быть разбиты постранично.
getResources - это сниппет MODX Revolution, который извлекает содержимое полей из других ресурсов и выводит его в любом удобном для вас виде.
phpThumbOf - позволяет модифицировать изображения средствами различных графических библиотек «на лету».
Wayfinder - служит для организации меню. Позволяет организовать простые,многоуровневые, а также выпадающие меню.

Создаем свой шаблон в MODX

Первым делом создаем header в Chunks (Чанки):

<!doctype html>
<html lang="ru">
<head>
<!--META's BEGIN-->
<meta charset="[[++modx_charset]]">
<!--META's END-->
<base href="[[++site_url]]" />
<title>[[++site_name]]</title>
<!--CSS BEGIN-->
<link rel="stylesheet" href="assets/templates/technokert/css/style.css" />
<link rel="icon" type="image/x-icon" href="assets/templates/technokert/favicon.ico" />
<!--CSS END-->
<!--Javascript BEGIN-->
<script src="assets/templates/technokert/js/jquery-2.0.2.js"></script>
<script src="assets/templates/technokert/js/script.js"></script>
<!--Javascript END-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" href="assets/templates/technokert/css/style-ie.css" />
<![endif]-->
<!--[if IE 6]>
<script src="assets/templates/technokert/js/DD_belatedPNG-Fix/DD_belatedPNG_0.0.8a-min.js"></script>
<script>DD_belatedPNG.fix('div, ul, li, span, a, u, s, i, header, footer, strike, .myclass, #myid');</script>
<![endif]-->
</head>
<body>
<!--Header BEGIN-->
<header>
<i></i>
<div class="widthController">
<a href="" id="logo"></a>
<span>
<a href="" class="phone" style="margin-left:0;"></a>
<p class="font-large">8 (901) 500-67-50</p>
<a href="" class="skype"></a>
<a href="" class="vk" style="margin-right:0;"></a>
</span>
<div class="clear"></div>
</div>
<div class="clear"></div>
</header>
<!--Header END-->
<!-- Menu BEGIN -->
<div class="widthController">
<ul id="MainMenu" class="font-normal">
<li><a href="">О компании</a></li>
<li><a href="">Фотоальбом</a></li>
<li><a href="">Контакты</a></li>
</ul>
</div>
<!-- Menu END -->
view raw gistfile1.html hosted with ❤ by GitHub

Создаем footer в Chunks (Чанки):

<!--Footer BEGIN-->
<footer class="widthController font-small">
<div>
<a href="mailto:info@abm-jmc.ru" target="_blank">Продвижение, создание<br> и поддержка сайтов,<br> ЗАО «АБМ».</a>
<div class="clear"></div>
</div>
</footer>
<!--Footer END-->
</body>
</html>
view raw gistfile1.html hosted with ❤ by GitHub

Создаем центральный блок Content в пункте Templates (Шаблоны). Добавляем вначале чанк header, а в конце чанк footer

[[$header]]
<!-- Promo BEGIN -->
<div class="widthController">
<div id="Promo">
<span></span>
<section>
<h2 class="font-large">Мебель для кухни на заказ</h2>
<p>Уже давно прошли и забыты те времена, когда все у всех было одинаковое. Люди стремятся к индивидуальности, желают получить лучшее, ищут идеальные решения для кухни своей мечты. Вкусы и требования у всех разные, и это лишний раз доказывает, что создать идеальный проект кухни невозможно, но дать клиенту все инструменты для заказа стильной кухни – это норма обслуживания в нашей сети.</p>
<p>Кухонный гарнитур должен быть индивидуален, эргономичен, красив, а о его надежности позаботятся наши специалисты.</p>
</section>
</div>
</div>
<!-- Promo END -->
<!--TableWraper BEGIN-->
<div id="TableWraper" class="widthController">
<table>
<tr>
<td style="width:357px">
<article>
<h1 class="font-large">Корпусная мебель<br> на заказ из Белоруссии</h1>
<ul>
<li>Прихожие столовые;</li>
<li>Гостиные спальни;</li>
<li>Раздвижные двери;</li>
<li>Детские, матрасы; </li>
<li>Замеры, проекты;</li>
<li>Столы, стулья;</li>
<li>Шкафы-купе; </li>
<li>Кухни.</li>
</ul>
<p>Вся мебель по индивидуальным проектам.Великолепное качество, выполнение заказа в установленные сроки. </p>
<p>Изготовление корпусной мебели на заказ, материалы любого уровня. дизайнерская мебель.Выезд замерщика на адрес, проектирование, профессиональная сборка и установка.Обращайтесь воплотим Ваши идеи и поможем своими.</p>
<p>Всю дополнительную информацию Вы можете узнать, связавшись с нашим менеджером по тел,skype,vk.</p>
</article>
</td>
<td>
<div id="LeftCol">
<section>
<a href="#" class="button ieWidthButton1"><span>Фотоальбом мебели</span></a>
<p>Мебель Белоруссии в Москве – это выбор практичных людей, знающих толк в хорошей мебели.</p>
</section>
</div>
<div id="RightCol">
<section>
<a href="#" class="button ieWidthButton2"><span>Контакты</span></a>
<p><strong>Адрес:</strong><br> г.Пушкино ул Чехова д 40/7 (ТЦ "Статус" цокольный этаж)</p>
</section>
</div>
</td>
</tr>
</table>
</div>
<!--TableWraper END-->
[[$footer]]
view raw gistfile1.html hosted with ❤ by GitHub

Применяем наш шаблон по умолчанию:



Получаем:
Создаем контент. Он будет выводиться вместо статического сюда:

Вкладка Resources (Ресурсы) -> Create (Создать) -> Create a Document Here (Дочерний документ)
Теперь нужно заменить статический текст в Templates (Шаблоны) на теги:
для заголовка [[*pagetitle]]
для контента [[*content]]
Сохраняем и проверяем. Все работает.

Теперь заменим статический текст в левой и правой колонках:
Для этого в Template Variables (TV) или по русски "Дополнительные поля" создаем TV с названиями LeftCol и RightCol:
Тут же вкладка
Тут же другая вкладка
Тоже самое проделываем с правой колонкой, назовем ее RightCol.

Заходим в Resources (Ресурсы) и выбираем наш документ "Корпусная мебель на заказ из Белоруссии". Если перейти на вкладку Template Variables (Дополнительные поля), то увидим, что появились 2 дополнительных поля с названиями LeftCol и RightCol. Заполняем их контентом.

Переходим снова в основной шаблон и заменяем статический текст в колонках на теги:
[[*LeftCol]] и [[*RightCol]] соответственно.
Заменяем статическое меню:
Для начала переименуем категорию technokert в technokert-site, т.к. у нас появится еще одна категория.
Для меню нам понадобиться еще одна категория, назовем ее technokert-menu.
За вывод меню отвечает сниппет Wayfinder.
Создадим чанк outerTpl (родительский ul) с содержимым:
<ul id="MainMenu" [[+wf.classes]]>[[+wf.wrapper]]</ul>
view raw gistfile1.html hosted with ❤ by GitHub

Создадим чанк rowTpl (родительский li) с содержимым:
<li [[+wf.classes]]>
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>
view raw gistfile1.html hosted with ❤ by GitHub

Создадим чанки для вложенного списка ul и li.
innerTpl (дочерний ul):
<ul>[[+wf.wrapper]]</ul>
view raw gistfile1.html hosted with ❤ by GitHub

innerRowTpl (дочерний li):
<li [[+wf.classes]]>
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>
view raw gistfile1.html hosted with ❤ by GitHub

Для активного пункта меню шаблон будет называться hereTpl:
<li [[+wf.classes]]><span>[[+wf.linktext]]</span>[[+wf.wrapper]]</li>
view raw gistfile1.html hosted with ❤ by GitHub

Теперь открываем наш чанк header и вместо нашего меню
<!-- Menu BEGIN -->
<div class="widthController">
<ul id="MainMenu" class="font-normal">
<li><a href="">О компании</a></li>
<li><a href="">Фотоальбом</a></li>
<li><a href="">Контакты</a></li>
</ul>
</div>
<!-- Menu END -->
view raw gistfile1.html hosted with ❤ by GitHub

вставляем
<!-- Menu BEGIN -->
<div class="widthController">
[[!Wayfinder?
&startId=`0`
&outerTpl=`outerTpl`
&outerClass=`font-normal`
&rowTpl=`rowTpl`
&innerTpl=`innerTpl`
&innerRowTpl=`innerRowTpl`
&hereTpl=`hereTpl`
&hereClass=``
&firstClass=``
&lastClass =``]]
</div>
<!-- Menu END -->
view raw gistfile1.html hosted with ❤ by GitHub

1
Автор: на
Ярлыки: , ,

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)