Как создать шаблон для внутренних страниц сайта на MODx

Сегодня мы с вами сделаем еще один важный шаг на пути разработки сайта визитки – создадим шаблон и структуру внутренних страниц, которыми у нас являются: О нас, Услуги и прочие.

Проблема состоит в том, что тот шаблон, который я выбрал, не содержит в архиве готового варианта внутренней страницы, но ничего страшного, я сам сверстаю ее и предоставлю вам весь необходимый код.

Для начала давайте создадим новый шаблон. Для этого переходим в раздел «Элементы» — «Управление элементами» — Вкладка «Шаблоны». Нажимаем кнопку «Новый шаблон» и начинаем заполнять все поля, по аналогии как это мы делали для главной, кто не читал, то можно сделать это вот тут.

Вот как это сделал я.

В поле – «Код шаблона (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>&#187;</li>
<li><a href="#">Home</a></li>
<li>&#187;</li>
<li><a href="#">Grand Parent</a></li>
<li>&#187;</li>
<li><a href="#">Parent</a></li>
<li>&#187;</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">&nbsp;</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>&#187;</li>
<li><a href="#">Home</a></li>
<li>&#187;</li>
<li><a href="#">Grand Parent</a></li>
<li>&#187;</li>
<li><a href="#">Parent</a></li>
<li>&#187;</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.

Возможно, для кого-то найдутся непонятные моменты, не стесняйтесь, спрашивайте в комментариях. Как видите, в шаблоне есть отдельные блоки, которые повторяются, и я сразу затрагиваю их, что потом не объяснять один и тот же материал дважды.

Кстати, не забудьте назначить этот шаблон для всех страниц, кроме главной!

Урок 5. Внутренние страницы сайта на MODx

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