Мы уже настроили MODx и теперь настало время двигаться дальше.
В рамках данных уроков мы будем создавать сайт-визитку, для этого нам необходимо будет подобрать определенный шаблон сайта. Как я говорил ранее, MODx учень удобная система в плане интеграции дизайна и для нее подходит любой HTML и CSS шаблон.
Я для себя уже нашел шаблон, скачать его можно здесь, он вам понадобится для уроков. Хотя вы можете выбрать любой другой, я думаю разобраться после уроков, труда не составит. По той же ссылке вы сможете выбрать любой другой, по мне там весьма привлекательные шаблоны и довольно качественные. В дальнейшем, я наверняка сделаю качественную подборку шаблонов для MODx.
Скачайте архив с шаблоном и распакуйте его, в архиве будет 3 папки и файлы:
В папке 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 установлен в наших настройках по умолчанию. Его мы и будем редактировать.
Чтобы удалить шаблон, кликните на шаблон, а затем нажмите на кнопку «удалить».
Для редактирования шаблона, также кликаем на название шаблона, мы переходим в режим редактирования.
Не обращайте внимания на список моих шаблонов, я их уже подготовил заранее. Мы с вами пройдем весь путь с самого начала.
Для начала откроем шаблон для редактирования и изменим следующие поля:
Сохраним изменения, это необходимо для удобства, чтобы знать, где у нас какой шаблон.
Я писал ранее, что для работы нам понадобится текстовый редактор, если вы его не установили, то откройте файл index.html нашего шаблона в обычном блокноте. То, что вы увидите это HTML разметка нашей главной страницы.
Скопируйте содержимое файла, открой те шаблон 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.
Скачать файл из урока.
Постов: 2
Добавлен #1 на : Ср августа 10, 2016, 23:45:08