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



Урок 3 - Натягиваем шаблон

Мы уже настроили MODx и теперь настало время двигаться дальше.

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

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

Скачайте архив с шаблоном и распакуйте его, в архиве будет 3 папки и файлы:modx шаблоны

В папке images находятся типовые изображения для шаблона. В папке scripts находятся JQuery скрипты, а в папке styles файлы с CSS стилями. В корневой папке находятся файлы с HTML разметкой. Файл index.html – это сверстанный шаблон главной страницы, full-width.html – внутренняя страница и style-demo.html – это типовая страница, которая показывает, как отображаются отдельные элементы страницы (заголовки, таблицы, комментарии, списки и так далее). Скопируйте содержимое архива на локальный сервер в папку Z:/home/site/www/assets/templates/ваш_сайт, создайте директорию для файлов «ваш_сайт».

Теперь мы можем приступить к созданию шаблона сайта, для этого авторизуемся в административной панели сайта (набираем в браузере http://«имя сайта»/manager), вводим логин и пароль.

Переходим по следующим вкладкам: Элементы-Управление элементами-Шаблоны. На этой вкладке мы будем работать с нашими шаблонами. Если вы обратили внимание, то у нас уже есть 2 шаблона: MODxHost и Minimal Template. Вы можете удалить шаблон MODxHost, он нам не нужен, шаблон Minimal Template установлен в наших настройках по умолчанию. Его мы и будем редактировать.

Чтобы удалить шаблон, кликните на шаблон, а затем нажмите на кнопку «удалить».

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

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

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

Для начала откроем шаблон для редактирования и изменим следующие поля:настройка шаблона modx

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

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

Скопируйте содержимое файла, открой те шаблон Minimal Template в режиме редактирования, и замените код шаблона. Введите в пути браузера http://site, вы увидите, что ваш сайт уже изменился, но не так как бы мы хотели. Это произошло, потому что наши пути в шаблоне не соответствуют реальным.

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

Вначале пропишем базовый URL для нашего сайта, для этого между тегами head и /head, ипрописываем следующую строку:

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

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

Для примера, сейчас у нас прописаны следующие пути:

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

Нам нужно изменить на:

<link rel="stylesheet" href="assets/templates/site/css/style.css" type="text/css" media="all" />

Тоже самое касается скриптов:

<script type="text/javascript" src="assets/templates/site/js/jquery-1.4.2.min.js"></script>

А также изображений:

<img src="assets/templates/site/images/demo/100x100.gif" alt="" />

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

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

Вы должны увидеть сайт, как в демо версии шаблона.

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

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


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


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


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

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


FastStoneImageViewer
Постов: 2
Comment
SUBJ1
Добавлен #1 на : Ср. Август 10, 2016, 23:45:08
Для удаления или редактирования необходимо нажать на ссылку с названием шаблона. После удаления демонстрационного шаблона приступаем к редактированию Minimal Template .
Nikerav
Постов: 2
Comment
SUBJ1
Добавлен #2 на : Вс. Ноябрь 20, 2016, 00:46:18
Так как вложенность папок изменилась при интеграции дизайна в систему управления, то для всех путей нам необходимо добавить следующую конструкцию.

Будь в курсе!

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

Digital Newsletter

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