Уроки MODx Revolution

Скачать материалы к учебному курсу - папка distr_MODx.zip

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

Будем создавать сайт на основе шаблона plusbusiness. Шаблон можно найти в папке distr_MODx.

Рисунок 2.1

В шаблон сайта входят:

– главная страница с jQuery галереей (файл index.html)

– внутренняя страница из двух колонок с дополнительной навигацией (файл style-demo.html)

– страница из одной колонки на всю ширину шаблона (full-width.html)

В архиве plusbusiness.zip лежит 3 папки и 3 html-файла.

Рисунок 2.2

1. Зайдите в файловый менеджер панели управления хостингом и в папку assets загрузите архив plusbusiness.zip и разархивируйте. Сам архив можно удалить после распаковки. Должно получиться вот так.

Рисунок 2.3

Рисунок 2.4

2. Вернитесь в панель администратора сайта.

3. Откройте вкладку: Элементы – Шаблоны. Здесь один шаблон уже создан. Будем менять шаблон Начальный шаблон, который является шаблоном по умолчанию.

Рисунок 2.5

Сначала создадим шаблон для главной страницы с jQuery галереей. Для этого:

4. Откройте шаблон Начальный шабон.

5. В поле Имя впишите название шаблона Главная страница, а в поле Описание – краткое описание (Главная страница с jQuery галереей). Нажмите Сохранить на верхней панели.

6. В разделе Категории в левом меню

Рисунок 2.6

Нажмите и в открывшемся окне введите название Общий дизайн сайта.

Рисунок 2.7

7. Нажмите Сохранить.

8. В разделе Категория справа выберите Общий дизайн сайта (если категории нет, обновите админпанель в браузере).

Рисунок 2.8

9. Из области Код шаблона (HTML) удалите все, что там есть, и скопируйте html-разметку главной страницы из файла index.html из папки assets/ plusbusiness (копировать можно и с локального компьютера, если так удобней, чтобы не заходить в файловый менеджер).

10. После заполнения нажмите на кнопку Сохранить вверху страницы.

Рисунок 2.9

Чтобы синтаксис html-кода подсвечивался в поле Код шаблона (HTML) необходимо установить дополнение подсветки синтаксиса Ace.

11. Перейдите в Пакеты – Установщик. Далее Загрузить пакеты, выберите Ace и сначала загрузите, а затем установите уже по знакомому Вам алгоритму.

12. Вернитесь в шаблон Главная страница. Синтаксис html-кода теперь подсвечивается.

Рисунок 2.10

13. Просмотрите сайт в браузере, набрав имя Вашего сайта.

Рисунок 2.11

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

14. Перейдите к странице редактирования шаблона Главная страница.

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

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

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

/assets/plusbusiness/

Нужно изменить все пути, в которых встречаются styles, scripts и images.

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

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

17. Измените все пути к файлам стилей, скриптов и изображений (styles, scripts и images). После изменения всех путей должно получиться следующее. Галерея при нажатии на стрелки справа и слева должна переключаться.

Рисунок 2.12

Разбиение шаблона на чанки

Чанк – повторяемая часть HTML кода.

[[$Повторяемая_часть]]

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

Шапка сайта – шапка сайта идет совместно с логотипом и главным меню навигации.

Рисунок 2.13

jQuery галерея

Рисунок 2.14

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

Рисунок 2.15

Футер, или нижняя часть сайта

Рисунок 2.16

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

Если посмотреть на все три варианта шаблона, то можно увидеть, что у них есть общие части, такие как Шапка сайта и Футер.

Рисунок 2.17

Далее, разбиваем html-код на чанки.

18. Перейдите в шаблон Главная страница.

Для начала вынесем в отдельный чанк тег <head> со всеми служебными тегами внутри него с подключаемыми скриптами и стилями.

19. Для этого найдите в html-коде шаблона тег <head> и скопируйте его в буфер обмена (Ctrl+C).

<head>
<meta charset="UTF-8">
<base href="[[++site_url]]" />
<title>PlusBusiness</title>
<link rel="stylesheet" href="/assets/plusbusiness/styles/layout.css" type="text/css" />
<script type="text/javascript" src="/assets/plusbusiness/scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/assets/plusbusiness/scripts/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="/assets/plusbusiness/scripts/jquery.jcarousel.setup.js"></script>
</head>

20. Затем перейдите на вкладку Элементы – Чанки и нажмите на кнопку Новый чанк в виде кнопки со знаком + для того, чтобы создать чанк для нашего тега <head>

Рисунок 2.18

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

Рисунок 2.19

22. Сохраните чанк.

23. Затем опять вернитесь к редактированию шаблона: Элементы – Шаблоны – Главная страница. И замените часть кода, которую вы вынесли в чанк, на вызов чанка. Т.е. вместо тега <head> и всего что в нем было расположено, Вы вставляете конструкцию: [[$HEAD]]

Сохраните чанк. Код чанка в строке 3.

Рисунок 2.20

24. Обновите главную страницу в браузере, ничего не должно измениться. Если вдруг макет «поехал», значит Вы неверно заменили часть кода на чанк. Придется все сделать заново или исправить.

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

25. Вынесите кусочки кода в следующие чанки (все в категорию «Общий дизайн сайта»:

[[$HEADER]] [[$GALLERY]] [[$MAIN-CONTENT]] [[$FOOTER]]

В чанке [[$HEADER]] будет храниться шапка вашего сайта c логотипом и меню навигации. Копируйте в этот чанк все содержимое контейнера <div class="wrapper col1">

В чанке [[$GALLERY]] будет html-код галереи. Поместите сюда содержимое контейнера <div class="wrapper col2">

В чанк [[$MAIN-CONTENT]] поместите контейнер <div class="wrapper col3">. Это будет содержимое главной страницы, пока добавляем статичный html-код, но затем будем эту область генерировать динамически.

В чанк [[$FOOTER]] помещаем контейнеры <div class="wrapper col4"> и <div class="wrapper col5"> это будет нижняя область нашего сайта.

После, того как вы все сделаете, у Вас раздел с чанками должен выглядеть так (цифры в скобках могут быть другими):

Рисунок 2.21

Число в скобочках – это ID чанка, у Вас эти номера могут быть другими.

20. При этом сам код шаблона главной страницы, если вы все сделали правильно, должен будет выглядеть вот так:

Рисунок 2.22