Контакты | E-mail: info@modx-evo.ru | Заказать обратный звонок



Урок 7 - Шаблоны страниц

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

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

Перейдем в «Элементы»-«Управление элементами»-«Шаблоны» и нажимаем на кнопку «Новый шаблон». Далее работаем по уже знакомой схеме из урока 3 и урока 4. Открываем файл full-width.html из скаченного архива в Notepad ++, копируем содержимое и вставляем в код шаблона.

Заполняем всю информацию о шаблоне: Имя шаблона, Описание, Категория. Сохраняем наш вновь созданный шаблон.

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

Давайте исправлять. Открываем наш шаблон и вместо тега head вместе с содержимым прописываем вызов чанка { {HEAD}}, вместо шапки сайта пропишем вызов чанка { {HEADER}}, удаляем код подвала сайта и вызываем на его месте чанк { {FOOTER}}. Теперь перейдем на сайт и проверим, что у нас получилось, если вы все сделали верно, то у вас должно все отображаться корректно.

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

сайт на modx

И пропишите следующую информацию вместо содержимого: [ *content*]

Обновите страницу сайта в браузере и если вы все верно сделали, то у вас должно получиться что-то вроде этого, за исключением стилей (стили я уже подправил для себя):

шаблоны modx

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

Вывод содержимого ресурса

Теперь вернемся к интересной конструкции [ *content*], что она означает?

Конструкция вида [ * name*] это специальный тег modx, который используется для вывода определенной информации о ресурсе. В нашем случае, тэг выведет содержимое ресурса:

сайт на modx

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

В рамках данного урока мы не будем углубляться во все теги ресурсов modx, для этого я выделю отдельный урок.

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

Скачать файлы урока.


Просмотров: 3622


Статьи по теме:


Написать комментарий

Поля помеченные * обязательны для заполнения.



Будь в курсе!

Введите Ваш Email и имя.

Digital Newsletter

Чтобы отписаться нажмите сюда ».