В этой статье я буду рассказывать только о том как натянуть обычную вёрстку на html на движок модэкса. Если вы знаете язык гипертекстовой разметки хоть немного, то у вас не будет никаких проблем с оформлением сайта на MODX, и сейчас мы разберем это детально.
Для начала нам понадобится сам шаблон с его изображениями, файлами стилей, скриптов, шрифтов и т.д.
Куда загружать шаблон
Тут возникает первая неопределенность, поскольку загружать файлы шаблона можно куда угодно, главное указать правильный путь к файлам изображений, css, js и т.д.
Из основных советов, которые я могу дать по этому поводу:
1) Не делайте слишком длинные пути к файлам. Нет нужды создавать 100 папок, вложенных друг в друга. Более того, иногда гугл может считать слишком длинный путь к файлам за ошибку. Вы столкнетесь с этим когда будете анализировать сайт через Page Speed. Да, это не критическая проблема, но все же. Бессмысленно плодить ошибки там, где можно их не делать. Я обычно кладу данные шаблона в папку /assets/ (привык так делать ради экономии времени при переносе сайта и чтобы делать однотипный robots.txt), но иногда могу и просто в корень сайта забросить. Несколько раз копировал структуру файлов других популярных cms систем и сайт успешно работал. Делал это больше из любопытства, однако оказалось, что это несколько помогает в защите сайта от не слишком опытных взломщиков.
2) Называйте вещи своими именами. Не нужно включать конспиролога и придумывать странные названия каждой отдельной папке. Если у вас захотят украсть дизайн, то его украдут с любыми названиями папок.
3) Не кидайте все в одну кучу. Постарайтесь рассортировать все по типу содержимого.
4) Не закидывайте шаблон в "технические" папки модэкса за исключением случаев, когда вы указали их при сохранении файлов шаблона в админке.
Внедрение верстки в шаблон
В этом уроке я буду использовать готовый шаблон на HTML под названием... Файлы стилей, скриптов и изображений я загружу через программу FileZilla.
Далее мне понадобится непосредственно сам код для вставки в шаблон. Но перед этим, давайте немного разберемся с терминами, которые будем использовать в дальнейшем.
Термины
- Ресурс — страница сайта, которая создаётся в админке и выводится пользователям.
- Элементы — группа служебных сущностей, необходимых для гибкой работы сайта: шаблоны, чанки, сниппеты и ТВ параметры.
- Шаблон — html оформление страница сайта, то есть ресурсов. Может включать в себя теги MODX.
- Теги MODX — любые слова, заключенные в квадратные скобочки .
Натягивание кода
Итак, я загрузил файлы, теперь необходимо взять непосредственно код HTML и добавить его в шаблон сайта. Переходим на вкладку элементы - шаблоны.
По умолчанию у нас есть 1 созданный шаблон. Мы можем его отредактировать, заменив имеющийся код на наш, который взяли из шаблона.
Предупреждение. В коде изначального шаблона нам необходо взять 1 выражение: . Оно понадобится нам в дальнейшем для работы сайта. Переносим данную строчку в новый шаблон между тегами <head> </head>
Правим все адреса файлов. Изначально адрес был без папки /assets/. Добавляем его для всех файлов .css .js. Аналогично поступаем для шрифтов (если они подключены непосредственно в шаблоне), анимаций, видео и изображений. На последних остановлюсь подробнее: часто в шаблоне идут "заглушки", которые потом нужно поменять на нормальные изображения. Для тренировки советую вам поставить адреса на них. В дальнейшем можно просто не обращать внимание на это и вызывать необходимое по дизайну загруженное изображение.
Сохраняем. Переходим на сайт и видим, что шаблон установлен корректно.
Собственно на этом урок подходит к завершению. Вы создали 1 шаблон и можете использовать его для сайта. Сейчас он содержит один и тот же код для всех страниц, которые будут его использовать. В следующем уроке мы разберем как наполнять его своей информацией, уникальной для каждой страницы. Если вы сейчас создавали например шаблон, который будет использоваться одной единственной страницей (главной например), вы будете сами поддерживать этот сайт и вам нравится все решать через код, то теоретически на этом можно остановиться. В противно случае - добавляем различные теги модэкса, максимально используем чанки и сниппеты.
Можно создавать столько шаблонов, сколько вы считаете необходимым. Чтобы создать ещё один шаблон, просто нажмите на иконку плюса рядом со словом шаблоны.
Несколько ошибок от которых хочется предостеречь.
Не используйте отдельный шаблон для каждой отдельной страницы.
Как минимум это странно. А ещё неудобно для дальнейшего администрирования. Чтобы внести какое-то незначительное изменение, придется перелопатить большое количество кода и потратить больше времени.
