Инструкция по созданию сайта на MODx. Урок 4 — Интеграция дизайна в систему управления

Ну что же, теперь мы постепенно переходим к более интересным вещам, а именно к интеграции дизайна в MODx CMS. У вас установлена и настроена система управления сайтом, и теперь самое время подыскать подходящий дизайн для будущего сайта. Для того, чтобы облегчить вам эту задачу, я сделал подборку ресурсов с бесплатными шаблонами, где вы обязательно сможете выбрать что-нибудь для себя.

Чтобы вы не тратили время на поиски готовых шаблонов для модэкс, я написал заметку 100 000 шаблонов для MODx, с которой вы тоже можете ознакомиться, если еще этого не сделали.

Как мы договаривались, начинать нашу работу в MODx мы будем с создания сайта визитки. Я подобрал подходящий шаблон, который подойдет нам для выполнения нашей задачи. Это будет шаблон от OS-templates.com. Довольно симпатичный, свежий шаблон в западном стиле. В нем уже организованы страницы разного вида:

  • главная страница с jQuery галереей
  • внутренняя страница из двух колонок с дополнительной навигацией
  • страница из одной колонки на всю ширину шаблона

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

В скачанном архиве лежит 3 папки и 3 HTML-файла.

Файлы шаблона для MODx

В папке «images» хранятся изображения, использованные для дизайна сайта, в папке «scripts» —скрипты, подключаемые для работы jQuery галереи на главной странице, а в папке «styles» хранятся CSS-файлы которые определяют внешний вид нашего шаблона.

HTML-файлы, которые лежат в архиве это ни что иное, как HTML разметка для каждой из трех видов страниц: index.html — главная страница, style-demo.html — внутренняя страница из двух колонок с дополнительной навигацией, full-width.html — страница с одной колонкой на всю ширину шаблона. Кто забыл посмотреть, как эти страницы выглядят, тот быстро идет на демонстрационную страницу шаблона и в верхнем меню сначала нажимает на пункт «Style-demo»,  затем кликает на пункт «Full-width».

Теперь можно начать интеграцию нашего дизайна в систему управления. Если вы все делаете  на локальном компьютере, то не забудьте запустить локальный сервер и если ваш сайт доступен для просмотра в браузере по адресу http://site, то двигаемся дальше.

Все файлы шаблонов, используемых системой управления, хранятся в папке: assets/templates. На локальном хостинге полный путь к этой папке у меня такой: z:\home\site\www\assets\templates. Там уже есть три папки, вам не нужно трогать только папку «manager», в которой хранятся системные шаблоны. Остальные можете удалять. И создайте папку для нашего будущего шаблона, например — «site», в которую распакуйте содержимое скачанного архива с шаблоном.

Папка с шаблонами MODx

После того, как все файлы оказались в положенном им месте, мы авторизуемся в системе управления http://site/manager, для дальнейшей настройки дизайна.

В администраторской панели следуем по вкладкам: Элементы → Управление элементами → Шаблоны. Вот тут мы и будем создавать новые или настраивать уже созданные шаблоны. Вы увидите, что два шаблона уже создано. Демонстрационный шаблон «MODxhost» можете удалить, чтобы не мозолил глаза, а мы займемся изменением шаблона «Minimal Template», который, как вы помните из урока по настройке системы, у нас установлен шаблоном по умолчанию.

Создание/редактирование шаблона в администраторской панели

Для удаления или редактирования необходимо нажать на ссылку с названием шаблона. После удаления демонстрационного шаблона приступаем к редактированию «Minimal Template».

Давайте сперва будем создавать шаблон для главной страницы нашего сайта с jQuery галереей. Для этого при редактировании шаблона в поле «Имя шаблона» впишите название шаблона, а в поле «Описание» — краткое описание, чтобы не запутаться, если шаблонов будет много. В область «Код шаблона (HTML)» нужно вставить HTML-разметку нашей главной страницы, у нас эта разметка указана в файле index.html, который мы совсем недавно положили в папку assets/templates/site. Поэтому мы просто копируем в эту область все содержимое файла index.html предварительно удалив все, что там было до этого. На рисунке ниже вы можете посмотреть, как я заполнил эти поля, вы можете сделать точно так же. После заполнения нажмите на кнопку «Сохранить» вверху страницы.

Редактирование шаблона Minimal Template

Сейчас вы можете посмотреть, что получилось, открыв главную страницу в браузере: http://site.

Вид шаблона без CSS и изображений

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

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

Вначале пропишем базовый URL для нашего сайта, чтобы предостеречься от неправильного распознавания относительных путей. Для этого внутри тега <head> прописываем следующее:

<base href="[(site_url)]" />

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

/assets/templates/site/

Добавляйте аккуратно, ничего не пропустите, чтобы не возвращаться к этому снова и снова, нужно изменить все пути в которых встречаются  styles, scripts и images.

Для примера, вот как выглядит путь подключения CSS стилей в оригинале:

<link rel="stylesheet" href="styles/layout.css" type="text/css" />

А вот так уже после изменения:

<link rel="stylesheet" href="/assets/templates/site/styles/layout.css" type="text/css" />

Если файлы шаблона у вас лежат в папке с другим названием, то вместо «site», вставьте свое название при изменении путей. После того как вы скрупулезно просмотрите весь код шаблона или найдете все места, где нужно вносить изменения путем поиска слов images, styles, scripts на странице (для поиска по странице нажмите Ctrl+F) можете смело сохранять ваш шаблон и опять следовать на главную страницу, чтобы посмотреть что получилось. Для этого следуйте по вкладкам Сайт → Просмотр или наберите в браузере URL  вашего сайта, в моем случае http://site. И что мы видим? Если вы ничего не пропустили, вы должны увидеть отличный шаблон без ошибок, прям как на демонстрационной странице, только вместо изображений пока стоят изображения-заглушки с цифрами.

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

Отлично, с задачей мы справились превосходно. Если у вас что-то не получилось, можете скачать измененный мною файл и скопировать его содержимое в область «Код шаблона(HTML)» при редактировании шаблона главной страницы.

На этом интеграция дизайна главной страницы закончена, осталась только дополнительная настройка. Скажите, знаете ли вы какую-нибудь систему управления, в которую дизайн встраивается так быстро? Я такие CMS еще не встречал.

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

Видео по интеграции дизайна в MODx

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

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

Смотреть видеоурок по интеграции дизайна MODx

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

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

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

20.05.2010
top


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