Сегодня мы с вами сделаем еще один важный шаг на пути разработки сайта визитки – создадим шаблон и структуру внутренних страниц, которыми у нас являются: О нас, Услуги и прочие.
Проблема состоит в том, что тот шаблон, который я выбрал, не содержит в архиве готового варианта внутренней страницы, но ничего страшного, я сам сверстаю ее и предоставлю вам весь необходимый код.
Для начала давайте создадим новый шаблон. Для этого переходим в раздел «Элементы» — «Управление элементами» — Вкладка «Шаблоны». Нажимаем кнопку «Новый шаблон» и начинаем заполнять все поля, по аналогии как это мы делали для главной, кто не читал, то можно сделать это вот тут.
Вот как это сделал я.
В поле – «Код шаблона (HTML)» нужно вставить следующий код:
<!DOCTYPE html> <html lang="en"> {{HEAD}} <body> <!-- wrapper --> <div id="wrapper"> <!-- shell --> <div class="shell"> <!-- container --> <div class="container"> {{HEADER}} <!-- main --> <div class="main"> <div id="breadcrumb"> <ul> <li class="first">You Are Here</li> <li>»</li> <li><a href="#">Home</a></li> <li>»</li> <li><a href="#">Grand Parent</a></li> <li>»</li> <li><a href="#">Parent</a></li> <li>»</li> <li class="current"><a href="#">Child</a></li> </ul> </div> <div id="content"> </div> <div id="column"> <div class="subnav"> <h2>Secondary Navigation</h2> <ul> <li><a href="#">Open Source Templates</a></li> <li><a href="#">Free CSS Templates</a> <ul> <li><a href="#">Free XHTML Templates</a></li> <li><a href="#">Free Website Templates</a></li> </ul> </li> <li><a href="#">Open Source Layouts</a> <ul> <li><a href="#">Open Source Software</a></li> <li><a href="#">Open Source Webdesign</a> <ul> <li><a href="#">Open Source Downloads</a></li> <li><a href="#">Open Source Website</a></li> </ul> </li> </ul> </li> <li><a href="#">Open Source Themes</a></li> </ul> </div> </div> <div style="clear:both;"></div> {{BOTTOM}} </div> <!-- end of main --> <div class="cl"> </div> {{FOOTER}} </div> <!-- end of container --> </div> <!-- end of shell --> </div> <!-- end of wrapper --> </body> </html>
Давайте разберемся, что тут к чему.
Как вы видите, мы здесь зразу применили созданные нами ранее чанки, вот собственно наглядный пример удобности их использования.
У нас в структуре добавился новый HTML код, который нужно для удобства также разбить на чанки.
Во-первых, в отдельный чанк можно вынести хлебные крошки. Как создавать и редактировать чанки я рассказывал вот здесь.
Выделяем следующий участок кода и выносим его в отдельный чанк – «BREADCRUMB».
<div id="breadcrumb"> <ul> <li class="first">You Are Here</li> <li>»</li> <li><a href="#">Home</a></li> <li>»</li> <li><a href="#">Grand Parent</a></li> <li>»</li> <li><a href="#">Parent</a></li> <li>»</li> <li class="current"><a href="#">Child</a></li> </ul> </div>
На его место в шаблон ставим — {{BREADCRUMB}}.
Во-вторых, нужно создать чанк для вывода основного контента и дополнительного меню в сайдбаре. Назовем его «MAINCONTENT» и вставим туда следующий код:
<div id="content"> </div> <div id="column"> <div class="subnav"> <h2>Secondary Navigation</h2> <ul> <li><a href="#">Open Source Templates</a></li> <li><a href="#">Free CSS Templates</a> <ul> <li><a href="#">Free XHTML Templates</a></li> <li><a href="#">Free Website Templates</a></li> </ul> </li> <li><a href="#">Open Source Layouts</a> <ul> <li><a href="#">Open Source Software</a></li> <li><a href="#">Open Source Webdesign</a> <ul> <li><a href="#">Open Source Downloads</a></li> <li><a href="#">Open Source Website</a></li> </ul> </li> </ul> </li> <li><a href="#">Open Source Themes</a></li> </ul> </div> </div> <div style="clear:both;"></div>
На его место в шаблоне ставим — {{MAINCONTENT}}.
Все, все остальное оставляем как есть. У вас должна получиться следующая картина.
В css файл, который находится в папке /assets/templates/retina/css/style.css прописываем следующий код.
#content{ display:block; float:left; width:600px; padding-bottom:20px; } #column{ display:block; float:right; width:300px; } #column .holder{ display:block; width:300px; margin-bottom:20px; } #column .holder p{ line-height:1.6em; } #column .holder h2.title{ display:block; width:100%; height:65px; margin:0; padding:15px 0 0 0; font-size:20px; line-height:normal; } #column .holder h2.title img{ float:left; margin:-15px 8px 0 0; padding:5px; border:1px solid #666666; } #column .holder p.readmore{ display:block; width:100%; font-weight:bold; text-align:right; line-height:normal; } #column div.imgholder{ display:block; width:290px; margin:0 0 10px 0; padding:4px; color:#666666; background-color:#F7F7F7; border:1px solid #CCCCCC; } #breadcrumb{ padding:20px 0; } #breadcrumb ul{ margin:0; padding:0; list-style:none; } #breadcrumb ul li{display:inline;} #breadcrumb ul li.current a{text-decoration:underline;} table{ width:100%; border-collapse:collapse; table-layout:auto; vertical-align:top; margin-bottom:15px; border:1px solid #CCCCCC; } table thead th{ color:#FFFFFF; background-color:#666666; border:1px solid #CCCCCC; border-collapse:collapse; text-align:center; table-layout:auto; vertical-align:middle; } table tbody td{ vertical-align:top; border-collapse:collapse; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; } table thead th, table tbody td{ padding:5px; border-collapse:collapse; } table tbody tr.light{ color:#666666; background-color:#F7F7F7; } table tbody tr.dark{ color:#666666; background-color:#E8E8E8; } #column .subnav{display:block; width:250px; padding:25px; background-color:#F9F9F9; margin-bottom:30px;} #column .subnav h2{ margin:0 0 20px 0; padding:0 0 14px 0; font-size:20px; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; color:#666666; background-color:#F9F9F9; line-height:normal; border-bottom:1px dotted #666666; } #column .subnav ul{ margin:0; padding:0; list-style:none; } #column .subnav li{ margin:0 0 3px 0; padding:0; } #column .subnav ul ul, #column .subnav ul ul ul, #column .subnav ul ul ul ul, #column .subnav ul ul ul ul ul{border-top:none; padding-top:0;} #column .subnav a{ display:block; margin:0; padding:5px 10px 5px 20px; color:#777777; background:url(images/black_file.gif) no-repeat 10px center #F9F9F9; text-decoration:none; border-bottom:1px dotted #666666; } #column .subnav a:hover{color:#00acef; background-color:#F9F9F9;} #column .subnav ul ul a, #column .subnav ul ul ul a, #column .subnav ul ul ul ul a, #column .subnav ul ul ul ul ul a{background:url(images/black_file.gif) no-repeat #F9F9F9;} #column .subnav ul ul a{padding-left:40px; background-position:30px center;} #column .subnav ul ul ul a{padding-left:50px; background-position:40px center;} #column .subnav ul ul ul ul a{padding-left:60px; background-position:50px center;} #column .subnav ul ul ul ul ul a{padding-left:70px; background-position:60px center;}
В этом же файле для класса — .main .entries убираем параметр — position:relative.
Теперь вставим переменную, которая обеспечит вывод контента из созданной в админке статьи.
Для этого в чанке «MAINCONTENT», вместо всего содержимого, между <div id=»content»></div>.
Вставляем:
[*content*]
У вас должно выйти следующее.
Все, с левой частью внутренней страницы разобрались, теперь нужно создать соответствующее меню услуг и подключить его как в этом шаблоне, так и в шаблоне главной страницы.
Кто пропустил урок по созданию меню, рекомендую ознакомиться – вот по этой ссылке.
Логичнее всего, при создании конкретных типов услуг привязываться к меню «Услуги». Я создал дополнительные материалы, и у меня получилось вот такое дерево документов.
Если мы посмотрим на сайт сейчас, то увидим, что верстка основного меню съехала. Все из-за того, что там не предусмотрен выпадающий список.
Сейчас я дам вам инструменты, которые позволят убрать этот недочет.
&level — ограничение вывода по уровнях вложенности меню.
&hideSubMenus — этот инструмент позволяет скрыть подменю, а также выводить дочерние пункты при активном родительском пункте меню.
Мы в данной ситуации применим параметр — &level. В чанках «HEADER» и «FOOTER» немного подправляем код вывода меню:
[!Wayfinder? &startId=`0` &level=`1`!]
Вот что должно получиться.
Если проверите сайт, то верстка снова станет на место.
Теперь переходим к боковому меню на внутренней странице.
Там мы будем использовать уже знакомую нам конструкцию:
[!Wayfinder? &startId=`3`!]
Только изменим id на то число, которое присвоено для меню услуг. В моем случае это «3».
Нужный нам чанк – «MAINCONTENT». Выделяем вот этот код:
<ul> <li><a href="#">Open Source Templates</a></li> <li><a href="#">Free CSS Templates</a> <ul> <li><a href="#">Free XHTML Templates</a></li> <li><a href="#">Free Website Templates</a></li> </ul> </li> <li><a href="#">Open Source Layouts</a> <ul> <li><a href="#">Open Source Software</a></li> <li><a href="#">Open Source Webdesign</a> <ul> <li><a href="#">Open Source Downloads</a></li> <li><a href="#">Open Source Website</a></li> </ul> </li> </ul> </li> <li><a href="#">Open Source Themes</a></li> </ul>
И вместо него вставляем, приведенный выше код. Вот что должно получиться.
Результат нашей работы. Как видите ничего сложного.
В чанке «MAIN», нужно найти код:
<ul> <li><a href="#">Lorem ipsum dolor sit amet</a></li> <li><a href="#">Sit atmet, consectetur lorem </a></li> <li><a href="#">Consectetur adispicing dolor</a></li> <li><a href="#">Lipsuim dolor amet adpispicing</a></li> <li><a href="#">Lipsuim dolor amet adpispicing</a></li> </ul>
И вставляем точно такую же конструкцию.
Вот мы с вами и разобрали, как создать и настроить внутреннюю страницу для сайта визитки на MODx.
Возможно, для кого-то найдутся непонятные моменты, не стесняйтесь, спрашивайте в комментариях. Как видите, в шаблоне есть отдельные блоки, которые повторяются, и я сразу затрагиваю их, что потом не объяснять один и тот же материал дважды.
Кстати, не забудьте назначить этот шаблон для всех страниц, кроме главной!