Блог на MODX Revolution: интеграция дизайна и шаблон одиночных веб-страниц

Сегодня мы с вами подберем подходящий дизайн в виде готовой HTML-верстки для реализовываемого проекта. А также настроим вывод содержимого одиночных веб-страниц.

Немного о выборе верстки

Итак, в качестве исходного материала для создания шаблонов страниц Модэкса я выбрал верстку под названием «simplemagazine-01″ от TemplatesDock:

HTML-шаблон для сайта -SimpleMagazine

Как видите выше структура «simple magazine»  полностью соответствует классическому блогу: две колонки, сверху главное меню, справа рубрики и иные вспомогательные элементы. Кроме того веб-дизайнер с HTML-верстальщиком проработали также и шаблон внутренней страницы, не обделив вниманием основные элементы типографики:

SimpleMagazine

Фактически это то, что нам нужно для старта.

Скачать

Интеграция дизайна в MODX Revolution: шаблон одиночной страницы

Подготовка файлов

1. После авторизации на вашем сайте посредством встроенного файлового менеджера (см. вкладку Файлы дерева элементов справа) создайте новый каталог под названием templates в папке «assets», затем в этом новом ещё один, — назовите его «simplemagazine»:

Панель - MODX Revolution

2. В контекстном меню созданного каталога templates выберите пункт «Загрузить файлы», если предпочтете загружать файлы встроенными средствами…

Панель - MODX Revolution - Загрузить файлы

Ну а я в целях экономии собственного времени просто загружу папки design, javascript и css в /assets/templates/simplemagazine. Отлично, необходимые файлы для будущих шаблонов страниц успешно разложены по своим местам. Далее приступим к собственно самому процессу интеграции.

Структура каталога

Создание шаблона одиночной страницы

1. Перейдите на вкладку Ресурсы дерева элементов. Введите имя шаблона и его описание, в поле код вставьте полное содержимое файла «subpage.html», — делайте всё, как показано на снимке экрана, расположенном ниже:

Шаблон - Page -  MODX Revolution

2. Между тегов <HEAD>… </HEAD> добавьте базовую ссылку. Это необходимо для того, чтобы можно было посредством относительных ссылок переопределить пути до стилей и клиентских скриптов.

<base href="[[++site_url]]" />

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

<link rel="stylesheet" media="screen,projection" type="text/css" href="css/main.css" />

Стало:

<link rel="stylesheet" media="screen,projection" type="text/css" href="assets/templates/simplemagazine/css/main.css" />

Принцип надеюсь понятен. Но если и этот пример для читателя пустой звук(!), тогда в срочном порядке рекомендую прочесть htmlbook.ru — статья о способах добавления стилей к странице. Тоже самое выполняете с включениями JavaScript.

Итоги

К сожалению на сегодня это пока всё. Далее я продолжу своё повествование о создании шаблона одиночной страницы для Модэкса.

Опубликовано 24-11-2012 в 14:24


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

Ваш 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 »

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