Урок 1. Подтягиваем дизайн сайта на CMS MODx. Установка modx шаблона
Как установить шаблон на MODx. Детальная инструкция.
Наверняка, те, кто уже работал с этой системой, знают, что на данный движок можно установить практически любой шаблон.
Отличительной особенностью является то, что для MODx используются самые обыкновенные html шаблоны, а их в интернете десятки тысяч экземпляров, да к тому же, большинство из них совершенно бесплатны. Так что если вы выбрали данный движок для своего проекта, то проблем с дизайном возникнуть не должно.
Так как эта серия уроков посвящена созданию сайта визитки на MODx, то шаблон я старался подбирать более современный, который был бы универсальный и легко затачивался под компании различных направлений.
Мы с вами будем разрабатывать сайт на основе шаблона Retina — Free Template от производителя – chocotemplates. Скачать его можно по этой ссылке – ссылка на шаблон.
Я выбрал бесплатную версию этого шаблона, но для ее использования нужно оставлять копирайт производителя. Но нам это не так важно. Главная задача – научится работать с шаблонами.
Архив включает в себя следующие файлы.
Index.html – этот файл нам не нужен, разработчики сделали его, чтобы демонстрировать работу шаблона на различных устройствах.
А папка «defaul» в свою очередь имеет вложение директории.
В папке «css» — хранятся стили и изображения, используемые в данной теме (папка «images»).
В папке «js» — содержатся файлы библиотеки jquery, а также скрипты подключения слайдера на главной странице сайта.
Файл home.html – основной файл html шаблона именно его мы и будем использовать.
Как вы видите, здесь нет готовых внутренних страниц, но я обязательно покажу вам как их добавить, в следующих уроках. А пока давайте разбираться с главной.
Непосредственная работа с движком MODx
После того, как вы разберетесь со структурой шаблона, можно приступать к работе с системой. Все шаблоны для MODx хранятся в папке /assets/templates/, именно туда нам и нужно залить папку с шаблоном. Директорию я назову «Retina». В эту папку заливаем все файлы которые находятся в директории «default». У вас должно получится следующее.
Теперь переходим в административную панель сайта в раздел и авторизуемся. Сделать это можно по адресу http://вашсайт.com/manager.
После авторизации вам нужно перейти в раздел «Элементы» – «Управление элементами» – Вкладка «Шаблоны».
Сейчас там есть шаблон с демо данными, его мы трогать не будем, а чуть ниже размещен шаблон под именем – «Minimal Template». Именно его мы и будет начинать править.
Нажимаем на ссылку этого шаблона и переходим в раздел его редактирования. Этот шаблон мы назовем «Главная», так как в следующих уроках мы будем делать и несколько внутренних страниц с различной структурой.
Заполняем два поля:
- имя шаблона;
- описание.
Чуть ниже, в поле – «Код шаблона HTML», нужно вставить код страницы index.html, которая размещена у вас на сервере по адресу — /assets/templates/retina/home.html.
Вот как это сделал я.
После чего в верхнем правом углу жмем кнопку «Сохранить». И идем на сайт смотреть, что у нас получилось.
Как видите, структура сайта подключилась, стили и скрипты не подключены. Дело в том, что у нас поменялся путь ко всем этим файлам. Сейчас мы это исправим.
Для этого опять переходим в админ панель в раздел «Элементы» – «Управление элементами» – Вкладка «Шаблоны» и нажимаем редактировать шаблон «Главная».
Для начала между тегами <head></head>, прописываем базовый путь для шаблона, делается это с помощью этого кода:
<base href="[(site_url)]" />Также необходимо подправить все имеющиеся в коде пути к файлам: стилей, скриптов, изображений. Нужно внимательно проверит все элементы, для того чтобы шаблон подключился.
Маленькое отступление – на CMS MODx, придется много работать с кодом, поэтому советую вам поставить редактор Notepad++, он отлично подойдет для правки шаблонов.
Итак, для примера, если изображение в оригинальном шаблоне подключается вот таким образом.
<img src="css/images/mac-img.png" alt="" />То в MODx нужно изменить его на вот такую конструкцию.
<img src="/assets/templates/retina/css/images/mac-img.png" alt="" />То есть во всех путях добавляем приставку:
/assets/templates/retina/Если вы называли папку шаблона по другому, то «retina» нужно изменить на ваше название.
Для облегчения работы можете использовать в редакторе Notepad++ поиск по слову «src». Так вы сможете проверить, все ли элементы подключены.
После проделанной работы сохраняем наш шаблон «Главная» и идем на сайт смотреть на результат. Если вы сделали все правильно, вы должны увидеть следующую картину.
На этом сегодня все, дизайн подключен, а вот все остальные элементы дизайна мы будем подтягивать в следующих уроках.
Подписывайтесь на обновления, чтобы ничего не пропустить.
Установка шаблона на MODx | Создание поддержка продвижение сайта на Modx
Также готовые шаблоны (бесплатные и платные) помогают и самим разработчикам, так как некоторые шаблоны могут сильно походить на ТЗ заказчика, при этом у шаблона достаточно изменить только цвет ссылок или шапку.
В интернете существует множество порталов, где можно найти и скачать шаблоны на MODx бесплатно или купить отличную тему. Такими площадками могут стать, например, Themeforest, Template Monster и др.
Исходные данные шаблона MODx для установки
В шаблон для MODx входит определенный набор файлов:
файл CSS, который содержит стили;
файл(-ы) JavaScript, но как правило, они не всегда имеются;
файл, в котором содержится код шаблона;
файл (папка), в которой находятся изображения шаблона;
иные файлы, необходимые для корректной работы шаблона;
Этапы установки MODx-шаблона
В директории сайта assets/templates/ создается новая директория, например, rg_template/. Затем в данную папку копируются файлы со стилями CSS, а также папка с изображениями.
Внимание. Нельзя изменять пути к файлам в коде шаблона и таблице стилей CSS.
Далее переходим к административной панели MODx. Здесь нужно зайти в раздел Новый шаблон (Элементы — Управление элементами). Появится форма для заполнения:
Имя шаблона — введите название шаблона, например, rg.
Код шаблона — вставьте скачанный код шаблона сайта. Как правило, он хранится в отдельном файле в формате txt.
Далее нажмите на кнопку «Сохранить».
Основные ошибки и проблемы
Плагины Шаблон сам по себе может выглядеть замечательно и эффектно, однако после установки некоторые элементы могут не сработать. Для этого необходимо установить соответствующие плагины.
Меню От устанавливаемого шаблона MODx зависит структура меню сайта. Для того чтобы меню выглядело именно таким, как в шаблоне, необходимо внести некоторые изменения в стилях CSS и настройках сниппета (Wayfinder).
Битые ссылки В виду того, что в фале стилей CSS все пути к стилям являются абсолютными, тогда после установки шаблона на сайт ссылки могут быть «битыми». Обратите на это внимание и лучше перепишите ссылки на относительные.
modx-profi.ru
web master | Установка шаблона для главной страницы MODx Evo
Главная » MODx- профессиональный инструмент для разработки сайтов » Установка шаблона для главной страницы MODx EvoНа данный движок можно установить практически любой шаблон.
Мы с вами будем разрабатывать сайт на основе шаблона Agency Template — от производителя – templatemo. Скачать его можно по этой ссылке – ссылка на шаблон.
Добавляем шаблон в MODx
Разархивируем скачанный архив и помещаем папку с шаблоном в папку нашего сайта: C:/xampp/htdocs/site/www/assets/templates/. В этой папке уже находятся три папки и файл index. Папки help и modxhost нам больше не нужны, удаляем их. В этой папке должно остаться следующее:
Заходим в папку нашего шаблона:
В папке images находятся изображения, используемые в дизайне сайта, css-файлы определяют внешний вид шаблона;
index.html - является шаблоном для главной страницы сайта;
servises.html, portfolio.html, contact.html, blog.html - шаблоны для внутренних страниц.
Теперь можно приступить к интеграции нашего дизайна в систему управления. Не забудьте запустить локальный сервер, если вы все делаете на локальном компьютере.
Все файлы шаблонов, используемых системой управления, хранятся в папке: /assets/templates. На локальном хостинге полный путь к этой папке будет выглядеть так: z:\home\ваш-сайт\www\assets\templates. Создаем папку для нашего шаблона, например - modxmoc, после чего распакуйте в нее содержимое скачанного архива с шаблоном.
После того, как файлы размещены в положенном им месте, мы можем приступить к созданию шаблона сайта, для этого авторизуемся в административной панели сайта (набираем в браузере http://«имя сайта»/manager), вводим логин и пароль.
В панели управления следуем по вкладкам: Элементы - Управление элементами - Шаблоны. Вот тут мы с вами и будем создавать новые и настраивать уже существующие шаблоны. Как вы заметили, один шаблон уже существуют. После интегрирования нашего шаблона, мы его удалим, а пока, не обращайте на него внимание.
Для создания своего шаблона, нажимаем "Новый шаблон". Теперь, в поле "Имя шаблона" впишите название вашего шаблона, в поле "Описание" - краткое описание, чтобы не возникало путаницы, если шаблонов будет много. В область "Код шаблона (HTML)" нужно вставить HTML разметку нашей страницы, если вы используете мой шаблон, то эта разметка находится в файле index.html, который мы совсем недавно положили в папку assets/templates/modxmoc. Просто берите и копируйте содержимое файла index.html в эту область. Ниже вы можете увидеть, как эти поля заполнил я, вы можете сделать точно так же. После заполнения нажмите на кнопку "Сохранить" вверху страницы.
Пришло время назначить новосозданный шаблон, нашей главной странице. Для этого в древе документов (левая часть страницы), нажмите правой кнопкой мыши на документе, и выберите пункт "Редактировать". Теперь, следует указать наш новосозданный шаблон, вирайте его из выпадающего списка и сохраняйте документ.
Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!
profwebsit.ru
