Главная » MODx Evolution » Урок 2. Создаем продуманную структуру сайта на MODx

Урок 2. Создаем продуманную структуру сайта на MODx

Вторым шагом после того как вы подключили дизайн является составление структуры всего сайта. Структура шаблонов MODx позволяет строить шаблоны различной сложности. Основным инструментом для этого служат – чанки.

Что же это такое?

Чанки – это блоки html кода, с помощью которых можно компоновать шаблоны. Так в основном их используют для упрощения работы с различными шаблонами. Так главная страница имеет одни блоки, а внутренняя совсем другие, но у них могут быть общие элементы, такие как шапка сайта, футер, боковое меню и прочее. Суть чанков упростить работу вебмастера по правке всех этих блоков. Создав необходимый чанк, вы будете править элемент один раз, а не столько, сколько у вас шаблонов.

Конструкция, которая вызывает чанк выглядит следующим образом:

{{Название_чанка}}

Обратите внимание, что я использую MODx Evolution. При использовании версии Revolution скобки должны быть – [Название_чанка].

Давайте на практике, разделим наш шаблон на чанки. Для начала я представлю вам схему того как я вижу это разделение.

chank1

Итого получается, что мы будем иметь 6 чанков, 5 из них представлены на схеме и один – это служебные теги и стили.

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

Первый чанк будет носить название «HEAD» и в него будет включен весь код, который находиться между тегами <head></head>. Ниже я приведу этот код.

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />
	<title>Retina - Free CSS template by ChocoTemplates.com</title>
	<link rel="shortcut icon" type="image/x-icon" href="css/images/favicon.ico" />
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
	<link href='http://fonts.googleapis.com/css?family=Raleway:400,900,800,700,600,500,300,200,100' rel='stylesheet' type='text/css'>

	<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
	<!--[if lt IE 9]>
		<script src="js/modernizr.custom.js"></script>
	<![endif]-->
	<script src="js/jquery.carouFredSel-5.5.0-packed.js" type="text/javascript"></script>
	<script src="js/functions.js" type="text/javascript"></script>
</head>

Вырезаем его из этого шаблона, сохраняем шаблон и переходим по вкладку «Чанки». Тут нажимаем на кнопку новый чанк и вставляем в поле «Код чанка (HTML)» вырезанный кусок кода. После чего заполняем поля название и описание чанка. Жмем «Сохранить».

chank2

chank3

Теперь возвращаемся во вкладку «Шаблоны», переходим к редактированию «Главная» и на месте вырезанного кода вставляем конструкцию:

{{HEAD}}

Для проверки правильности проведенных действий идете на сайт и обновляете страницу. У вас ничего не должно изменится.

По аналогии работаем и с другими частями кода. Ниже я вставлю те части кода которые нужно вставить в оставшиеся чанки: SLIDER, MAIN, BOTTOM, FOOTER. Вы можете скачать архив и тренироваться создать все оставшиеся чанки самостоятельно.

Скачать архив с кодом для чанков

3 комментария

  1. В предыдущем уроке между тегами мы вставляли код , а в коде чанка его нет. И на этой странице в статье тоже. Почему?

  2. Кстати для MODx 2.3.1-pl конструкция, которая вызывает чанк [[$Название_чанка]]

  3. Спасибо за объяснения! По вашим урокам наконец то освоил modx, правда revo, но всё равно вы мне больше объяснили чем все другие рассказчики, хоть они как раз про рево и объясняли.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *