Инструкция по созданию сайта на MODx. Урок 5 — Настройка шаблона, разбиение на чанки

Пару слов для тех, кто только что подключился или случайно попал на эту страницу. Если вы являетесь рьяным приверженцем какой-нибудь другой CMS, для общего развития рекомендую все же присмотреться и к MODx. Пусть эта CMS еще не так популярна как хотелось бы, но она очень перспективна. Поговаривают даже, что на нее обратили внимание ребята из Microsoft, думаю, что это что-то значит. Запрыгивайте скорей в лодку, нас тут не так уж много и нет огромной конкуренции.

Теперь мы приступаем к следующему уроку из курса «Создание сайта на MODx c нуля». Если вы помните, мы уже интегрировали шаблон главной страницы в систему, теперь неплохо было бы его настроить и научиться управлять из системы нашим шаблоном.

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

1 Шапка сайта 

В нашем случае шапка сайта идет совместно с логотипом и главным меню навигации

Шапка сайта

2 jQuery галерея

 jQuery галерея на главной странице

Тут все просто, так как блок галереи располагается на всю ширину шаблона

3. Блок с анонсами или кратким содержанием статей, новостей и так далее

Блок с анонсами

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

4. Футер, или нижняя часть сайта

Футер сайта

В этот блок мы выделяем содержимое, которое находится внизу страницы, а именно блок с различной контактной информацией и блок с указанием авторских прав.

Ну вот, мы уже для себя решили, из каких кирпичиков состоит шаблон главной страницы. И прежде чем мы начнем на уровне разметки разбивать код шаблона на составные кусочки, приведу немножко терминологии. А именно, я познакомлю вас с термином, который запугивает новичков MODx неизвестным для многих названием, но в котором нет ничего сложного. Этот термин — «чанк». Вы часто будете встречаться с ним при работе с системой.

Чанк — это не что иное как простой кусок HTML кода. Например, у вас есть шаблон, в котором какая-то часть HTML кода повторяется более одного раза, но вы хотите вносить изменения сразу везде, где встречается этот повторяемый код. Для этого в системе управления создаете чанк с именем, например, «Повторяемая_часть», а в качестве содержимого чанка используете этот кусок повторяемого кода. После чего, в разметке шаблона вы можете вместо этих повторяемых блоков, вставить следующую конструкцию:

{{Повторяемая_часть}}

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

Обратите внимание, что вызов чанка осуществляется по его имени, помещенном в двойные фигурные скобки.

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

В нашем примере у сайта,  который мы с вами пытаемся сделать есть три вида шаблонов, о которых речь шла в 4 уроке (главная страница, страница с дополнительной навигацией и страница с одной колонкой на всю ширину). Пока мы разбираем с вами только шаблон главной страницы, но если отвлечься и посмотреть на все три варианта шаблона, то можно увидеть что у них есть общие части, такие как «Шапка сайта» и «Футер».

Шаблон главной страницыШаблон с дополнительной навигациейИзображение не кликабельно

Согласитесь, не очень удобно при изменении информации расположенной в футере сайта или при внесении изменений в шапку сайта, редактировать каждый шаблон по отдельности. Ведь их может быть гораздо больше трех, при этом помимо потраченного времени увеличивается вероятность того, что вы что-нибудь пропустите. Поэтому, мы с самого начала будем учиться правильно работать с шаблонами и для этого первое что мы делаем, это разбиваем HTML-код на чанки.

Для того, чтобы попасть на страницу редактирования шаблона главной страницы проследуем по следующим вкладкам: Элементы → Управление элементами → Шаблоны → Шаблон для главной страницы.

Для начала я хочу посоветовать вам вынести в отдельный чанк тег <head> со всеми служебными тегами внутри него и подключаемыми скриптами и стилями . Для этого находим в HTML коде шаблона этот тег и копируем его в буфер обмена (Ctrl+C).

<head profile="http://gmpg.org/xfn/11">
<base href="[(site_url)]" />
<title>PlusBusiness</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="/assets/templates/site/styles/layout.css" type="text/css" />
<script type="text/javascript" src="/assets/templates/site/scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/assets/templates/site/scripts/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="/assets/templates/site/scripts/jquery.jcarousel.setup.js"></script>
</head>

Затем идем по вкладкам Элементы → Управление элементами → Чанки и жмем на ссылку «Новый чанк» для того чтобы создать чанк для нашего тега <head>.

Закладка Чанки

На появившейся странице заполняем поля «Название чанка» и вписываем его описание, чтобы легче было ориентироваться, когда чанков будет много. Также можете вписать название категории, в которую поместите этот чанк. Это не обязательно, но тоже поможет вам не запутаться в большом количестве чанков. Назовите категорию, например, «Общий дизайн сайта».

При создании чанков я придерживаюсь одного правила. Если чанк содержит в себе часть общего шаблона, то я называю его заглавными буквами, как в этом случае — HEAD, если чанк сам по себе является полноценным шаблоном, допустим для какого-нибудь сниппета, то название его я пишу прописными буквами. Не заморачивайтесь, если пока не понимаете что такое шаблон для сниппета, я расскажу об этом позже.

Создание чанка HEAD

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

Затем вы опять возвращаетесь к редактированию шаблона: Элементы → Управление элементами → Шаблоны → Шаблон для главной страницы. И заменяете часть кода, которую вы вынесли в чанк на вызов чанка. Т.е. вместо тега <head> и всего что в нем было расположено, вы вставляете конструкцию:

{{HEAD}}

Я отметил красным восклицательным знаком на картинке, как это должно выглядеть.

Замена кода на вызов чанка

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

Я бы вам посоветовал вынести кусочки кода в следующие чанки:

{{HEADER}}, {{GALLERY}}, {{MAIN-CONTENT}} и {{FOOTER}}

В чанке {{HEADER}} будет храниться шапка вашего сайта c логотипом и меню навигации. Копируйте в этот чанк все содержимое контейнера <div class="wrapper col1">.

В чанке {{GALLERY}} будет HTML код галереи. Поместите сюда содержимое контейнера <div class="wrapper col2">

В чанк {{MAIN-CONTENT}} поместите контейнер <div class="wrapper col3">. Это будет содержимое главной страницы, пока добавляем статичный HTML код, но затем будем эту область генерировать динамически.

В чанк {{FOOTER}} помещаем контейнеры <div class="wrapper col4"> и <div class="wrapper col5"> это будет нижняя область нашего сайта.

После, того как вы закончите у вас  страница с чанками должна выглядеть так:

Страница с чанками

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

Если хотите посмотреть наглядно, что должно располагаться в каждом из чанков, я приведу ниже файлы с кодом для каждого из них. При желании, можете скопировать их.

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

Итоговый код шаблона

Файл с итоговым кодом шаблона:

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

Видео по разбиению шаблона на чанки

Вы можете посмотреть видео, в котором я проделываю все описанные выше действия.

Если у вас не самый шустрый интернет, рекомендую перед просмотром дождаться загрузки.

Смотреть видео урок по разбиению шаблона MODx на чанки

Размер: 4.3 мб. Длительность: 4 минуты.

Автор: Ефимов Виктор

Вы можете также посмотреть другие уроки по созданию сайта на MODx:

30.05.2010
top


blog comments powered by Disqus
Рубрики
3 месяца отличного хостинга бесплатно
Система Orphus