Как создать шаблон для внутренних страниц сайта на 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}}.

Статья по теме: Урок 8. Раздел «Новости» (Блог) на MODx

Все, все остальное оставляем как есть. У вас должна получиться следующая картина.

В 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*]

У вас должно выйти следующее.

Все, с левой частью внутренней страницы разобрались, теперь нужно создать соответствующее меню услуг и подключить его как в этом шаблоне, так и в шаблоне главной страницы.

Статья по теме: Устанавливаем MODx Evo на локальный сервер или собственный хостинг

Кто пропустил урок по созданию меню, рекомендую ознакомиться – вот по этой ссылке.

Логичнее всего, при создании конкретных типов услуг привязываться к меню «Услуги». Я создал дополнительные материалы, и у меня получилось вот такое дерево документов.

Если мы посмотрим на сайт сейчас, то увидим, что верстка основного меню съехала. Все из-за того, что там не предусмотрен выпадающий список.

Сейчас я дам вам инструменты, которые позволят убрать этот недочет.

&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

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