4 30, 2013 - Категория: Создание сайтов    Комментарии

Создание сайта на MODx. Урок 4 - дизайн

Интеграция дизайна в CMF MODx Evolution

Если у вас уже установлена и настроена система управления, то самое время подыскать симпатичный шаблончик и "натянуть" его на MODx.  О поиске шаблонов для модэкс скоро будет отдельная статья, а пока можете закачать любой интересный CSS шаблон. Его можно найти в поисковиках по запросам "бесплатные css шаблоны" или как-нибудь так.

Как мы договорились в одном из первых уроков, начинать изучение MODx мы будем на изготовлении сайта-визитки. Для этих целей я уже выбрал интересный шаблон в европейском стиле (то, что сейчас в интернетах принято называть "стандартом"). Скачать шаблон для MODx. В этом архиве находится 3 папки и 3 файла:

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

Логика хранения служебных файлов шаблона проста:

в папке scripts находятся скрипты, images хранит картинки шаблона, а директория styles - CSS-файлы.

HTML-файлы, которые также находятся в архиве, это наша разметка HTML, необходимая для корректного отображения каждой из трех видов страниц:

  • index.html (по-умолчанию)— главная страница,
  • style-demo.html — внутренняя страница из двух колонок с дополнительной навигацией,
  • full-width.html — страница с одной колонкой на всю ширину шаблона.

Теперь можно начать интеграцию дизайна.

Все шаблоны, необходимые для работы с модэкс, лучше всего хранить по адресу сайт.ру/assets/templates

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

После распаковки идем в админку сайта, авторизовываемся и двигаемся: Элементы → Управление элементами → Шаблоны

Тут мы и будем управлять нашими шаблонами и при необходимости создавать новые. Для удаления или редактирования необходимо нажать на ссылку с названием шаблона.

Для начала давайте реализуем главную страницу сайта. Жмем "новый шаблон" и заполняем:

  • имя шаблона (можно на русском языке)
  • описание (чтобы не запутаться, если шаблонов будет много)
  • код шаблона - html-код нужного шаблона.

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

Вот пример заполненного кода

интеграция шаблона в MODx

И если мы сейчас откроем сайт, то увидим вот такой вот ужас

натяжка дизайна в MODx EVO

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

  1. Прописываем базовый URL для сайта (чтобы не сбивались относительные пути). В теге <head></head> прописываем конструкцию  <base href="[(site_url)]" />
  2. Прописываем пути к шаблону (например, assets/templates/default-design). Прописывайте именно так, как называются папки на вашем хосте
  3. Надо исправить все пути в которых встречаются  styles, scripts и images

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

В принципе,  это все, с интеграцией дизайна в MODx мы справились. Я дольше это описывал, чем вы делали.

Как - все?, спросите вы. А внутренние страницы также переписывать, что ли?

С внедрением других страниц сайта пока не спешите - ведь множество раз переписывать участки кода не интересно. Немного позже (в следующем уроке) я расскажу о такой штуке как "чанки" - с ними интеграция шаблона пойдет еще быстрее.

Предыдущие уроки:

2 Комментарий

  • спасибо за интересные статьи. У меня к Вам вопрос, а где Вы взяли (откуда можно скопировать) заполненный код?

      • @ser1592:гуглим "бесплатные html шаблоны" или "css шаблоны " - что-нибудь в таком духе и ищем подходящий шаблон.

Есть что сказать? Добавьте комментарий!