Как сделать сайт на MODX Evolution. Часть 3. Интеграция макета главной страницы.

Продолжение 3 этапа нашей работы, связанного с натяжкой дизайна главной страницы в MODX Evolution.

1. После того, как вы обзавелись HTML версткой, поместите последнюю в каталог assets/templates так, как показано на вот этом скриншоте:

Шаблон для MODX Evolution

P.S. Полагаю вы уже знакомы с CSS/HTML/JavaScript, иначе бы не читали сейчас эту статью? Тогда вы можете самостоятельно отчистить приведенный макет от лишних вспомогательных файлов, например license.txt.

2. Войдите в админку MODX Evolution. Путь Элементы->Управление элементами->Чанки. Нажмите на кнопку Новый чанк.

Напоминаю, что чанки — это структурные кусочки HTML кода.

Назовем элемент словом header, как нетрудно догадаться там у нас будет содержать весь заголовок веб-страницы + главное меню в довесок. Хватаем отрезок от начала разметки с <!DOCTYPE html... до </div> из документа index.html темплейта openhouse.

Чанк header - создание сайта на MODX Evolution

Просмотреть

3. По той же схеме создаем второй чанк — footer, который будет содержать конец веб-документа + блочный элемент с идентификатором footer.

Чанк footer - создание сайта на MODX Evolution

Просмотреть

4. Пора создать наш первый шаблон, — заготовку шаблона главной страницы. Перейдите по пути Элементы->Управление элементами->Чанки. Назову я его просто — index, чтобы было сразу понятно, что это. Туда помещаем все содержимое из index.html, но участки, которые уже есть у нас в чанках, заменяем на {{header}} и {{footer}}.

Шаблон index для MODX Evolution

Просмотреть

5. Чтобы проверить, что же у нас сейчас получилось попробуйте назначить наш шаблон index какому-нибудь документу а-ля материалу на сайте. Затем нажмите на кнопочку Просмотр. Вы увидите, что подгрузилась только разметка на HTML, но не стили CSS / скрипты JavaScript. Это необходимо исправить.

Назначаем шаблон index для главной страницы в MODX Evolution

Давайте снова откроем чанк header и исправим сиё недоразумение. Дополнительно удалим из HTML условный комментарий для IE6, а также увесистый копирайт от FREECSSTEMPLATES.ORG.

Итак, пропишем базовую ссылку + относительные пути до стилей следующим образом:

...
<base href="[(site_url)]"></base>
...
<link href="assets/templates/openhouse/default.css" rel="stylesheet" type="text/css" media="all" />
...
Просмотреть

Пока всё.

Опубликовано 16-12-2013 в 14:31


Комментариев к записи: 2

  1. Написал как здесь все сказано, вывожу просмотр страницы, а Картинки не отображаются. Выводит только текст на страницу. В чем проблема?

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты