Сегодня мы с вами сделаем еще один важный шаг на пути разработки сайта визитки – создадим шаблон и структуру внутренних страниц, которыми у нас являются: О нас, Услуги и прочие.
Проблема состоит в том, что тот шаблон, который я выбрал, не содержит в архиве готового варианта внутренней страницы, но ничего страшного, я сам сверстаю ее и предоставлю вам весь необходимый код.
Для начала давайте создадим новый шаблон. Для этого переходим в раздел «Элементы» — «Управление элементами» — Вкладка «Шаблоны». Нажимаем кнопку «Новый шаблон» и начинаем заполнять все поля, по аналогии как это мы делали для главной, кто не читал, то можно сделать это вот тут.
Вот как это сделал я.
В поле – «Код шаблона (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.
Возможно, для кого-то найдутся непонятные моменты, не стесняйтесь, спрашивайте в комментариях. Как видите, в шаблоне есть отдельные блоки, которые повторяются, и я сразу затрагиваю их, что потом не объяснять один и тот же материал дважды.
Кстати, не забудьте назначить этот шаблон для всех страниц, кроме главной!