Как установить шаблон modx

Как установить шаблон 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, а также установили пакеты, которые будут необходимы для создания сайта. Сегодня урок о переносе обычного HTML/CSS/JS дизайна в MODX Revo. Где можно достать дизайн я писал в статье: MODX шаблоны – что это, где их достать (скачать, заказать, купить). Для своего сайта я выбрал готовый платный адаптивный bootstrap шаблон на themeforest за 17$ под названием brightbox (кликните по названию, чтобы посмотреть его демо и описание). Можете использовать абсолютно любой, их полно и бесплатных — так скорее всего лучше поймете весь принцип натяжки.

Структура HTML тем

Практически каждая тема имеет в себе html, css, js и файлы картинок + у многих еще есть php файлы — обработчики форм.

В моем случае в папке assets находятся css и js файлы (в соответствующих директориях), в папке images — изображения и красные файлы (у вас могут быть не красными — все зависит от установленного по умолчанию браузера) — это html файлы.

Перенос шаблона в Modx

Самый простой способ — это просто закинуть все файлы с папками (кроме html) в корень веб-сайта. Но я пойду более сложным путем. Так как modx у меня закален и директории assets у меня нет, я залью содержимое из assets (подпапки css и js) в корень сайта и images тоже в корень.

Раньше я создавал директорию template и закидывал в нее все файлы — можете поступить так же.

Редактирование базового шаблона

В дереве слева, переходим во вкладку «Элементы» и открываем начальный шаблон (можно просто щелкнуть лкм или пкм и выбрать редактировать).

Читайте также:  Добавление русского текста на фото

Увидите следующий код.

Удаляем его и заменяем на код из index.html (которые мы не закинули в корень сайта).

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

Сохраняем и переходим на главную страницу сайта.

Главная страница сейчас выглядит криво.

Это произошло потому-что, пути к скриптам и css изменились.

Правка путей

Пути сейчас выглядят так.

К стати немного странная тема, обычно путь идет через слэш /, а , поправим это.

Если вы уже установили пакет ace, то можно легко и просто сделать поиск с заменой, для этого щелкните в код и затем нажмите сочетание клавиш Ctrl+H (работает на Linux и windows), в верхнее поле вводим , а в нижнее / и нажимаем all.

Точно также удаляем из путей assets (у нас такой папки нет, и все лежит в корне).

Внимание! Я не буду использовать тег base, поэтому я оставил впереди пути / — сделал абсолютный путь, в случае традиционного использования тега base слэш в начале не нужен.

Сохраняем, если все пути поменяли корректно, то откроется нормальная страница (как в оригинале шаблона), если этого не произошло, то попробуйте обновить кэш браузера CTRL+F5 — не помогает и это тогда перепроверяйте пути (иногда нужно менять пути внутри файлов css и даже в js).

Добро пожаловать на 4 урок MODX Revolution для новичков. На последнем занятии мы сделали некоторые настройки конфигурации сайта и посмотрели как выставлять некоторые глобальные установки. Также мы исследовали как устанавливать дополнения из репозитория MODX с помощью менеджера пакетов. В этой записи мы рассмотрим как работать с шаблонами в MODX Revolution. Мы собираемся начать со статичного HTML/CSS шаблона и через несколько уроков переделаем его в полноценный MODX Revolution шаблон.

Что такое MODX шаблоны?

MODX шаблоны это простые HTML/CSS шаблоны с тегами MODX внутри для динамичной функциональности. Это очень упрощенное определение, но в моей голове сложилось именно такое определения для MODX шаблона. Если вы знаете как программировать HTML/CSS или можете разобраться в таком коде, то остальное для вас не будет проблемой. Вот что делает MODX очень удобным для дизайнера.

Для этого урока я решил использовать тему студии Themeforest для своего сайта. Если вы хотите следовать точно моим шагам, то можете взять этот же шаблон или же взять другой шаблон, вашу собственную разработку либо скачанный с другого ресурса (в Google поищите ‘бесплатные css шаблоны’). Порядок действий для разработки шаблона будет аналогичным.

В этом уроке я буду использовать 7 in 1 Business Success Site шаблон потому что он имеет отличный вид и в то же время достаточно сложный, чтобы его было интересно портировать в сайт MODX . В комплекте 7 различных цветовых стиля, я буду использовать синий, а вы выбирайте какой вам нравится. Ну что ж начнем!

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

1. Загрузка файлов шаблона

Любой шаблон содержит в себе много файлов – css файлов, яваскрипт, рисунков, флеш файлов… Все это нужно где-то хранить на вашем сервере, чтобы ваш шаблон имел к этим файлам доступ. Я предпочитаю хранить все файлы, которые относятся к шаблону в середине директории assets. Вы можете положить куда угодно и установить соответствующие пути в вашем шаблоне.

Читайте также:  Как узнать работает ли звуковая карта

Распакованные файлы шаблона имеют приблизительно вот такую файловую структуру:

Таким образом 1 шагом в нашей разработке шаблона является копирование трех папок с файлами шаблона на сервер, это папки sample-data/, scripts/ и styles/. Я создал папку в середине assets и назвал ее templates, а также я создал папку 7in1, в которую поместил вышеназванные папки с файлами шаблона. Если вы запутались, то посмотрите на картинку и все станет понятно:

Теперь эти файлы доступны для любого шаблона, который вы будете делать.

2. Создание шаблона

После загрузки папок с файлами мы можем начать создание нашего MODX шаблона. В админке нажмите на вкладку Elements слева, откроется панель с различными элементами сайта — шаблонами, чанками, переменными шаблона и другими. Нажмем на templates и увидим, что уже есть в наличии один базовый шаблон с названием Base Template. Если вы на него нажмете, то вы можете увидеть код данного шаблона. Видим HTML код с тегами &#91&#91++site_name&#93&#93, &#91&#91*pagetitle&#93&#93.

Эти тэги трансформируют статичный HTML/CSS код в динамичный MODX шаблон и мы собираемся узнать как его сделать и приложить к этому свои руки.

Давайте продолжим и сделаем наш шаблон. Для создания нового MODX Revolution шаблона нажмите правой кнопкой мышки Templates, а далее New Template.

Можете также нажать на иконке New Template:

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

Для создания категории, нажмите правой кнопкой мыши на Categories в закладке Elements.

Ну вот можно добавить код в наш новый шаблон. Начнем мы с создания шаблона для главной страницы. Сейчас я могу сказать, что дизайн главной страницы будет отличаться от дизайна внутренних страниц, поэтому я назову этот шаблон каким-то своим именем, например «7in1 Home». Код домашней страницы находится в файле index.html в папке с шаблонами, которую мы загрузили с Themeforest, поэтому открываем этот файл в редакторе (я использую Notepad++) и копируем его содержимое в наш новосозданный шаблон в MODX. Можно (и это на мой взгляд даже более удобнее) отредактировать вначале код вне MODX Revolution и только потом перенести отредактированный код исправленного шаблона, но исходя из целей данного урока, все эти действия проведём внутри редактора MODX.

3. Отредактируйте пути

Поменяем в нашем коде пути к папкам шаблона. Мы скопировали наш шаблон в папку assets/templates/7in1. Поэтому нам нужно изменить пути ссылок к css файлам, js файлам, изображениям и др. на корректные пути на нашем сервере. Этот элемент вашей работы для ускорения можно сделать до того как копировать код шаблона в редактор MODX. Сейчас просто посмотрев на код, я могу сказать, что мне нужно искать папку styles/ и заменить ее на assets/templates/7in1/styles/, и так далее. Заменим все необходимые пути и сохраним наш шаблон. Вы можете обнаружить, что что-то упустили и есть ошибка в выводе страницы, поэтому возвращайтесь и снова откорректируйте пути.

4. Назначение шаблона

Итак мы закончили портирование шаблона, давайте назначим шаблон страницы и посмотрим, что же мы наделали. Для определения шаблона для страницы нам необходимо перейти на вкладку Resource и открыть ресурс для которого мы хотим определить шаблон (в нашем случае это страница Home). Если вы нажмете на поле Uses Template, то в выпадающем списке можно будет выбрать новый только что созданный нами шаблон.

Читайте также:  Как отправлять картинки в одноклассниках в сообщениях

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

После сохранение, мы можем просмотреть страницу и увидеть как она теперь выглядит. Вот снимок экрана, на котором видна верхняя часть страницы:

Вот нижняя часть:

Как вы видите, наш сайт приобретает нужный вид, а мы всего лишь изменили пути к файлам. В то же время, контент, тег названия страницы, навигация и остальное — остались статичными, поэтому дальше мы начнем вставлять теги и использовать инструментарий MODX.

5. Синтаксис тегов MODX Revolution

Для того, чтобы сделать шаблон MODX Revolution динамичным, нам необходимо научится работать с тегами MODX. В движке MODX много различных тегов, которые можно использовать для создания и добавления изменяемых элементов контента на вашем сайте. Полный список доступных тегов MODX Revolution можно найти в руководстве. Если вы использовали до этого MODX Evolution, то вы поймете концепцию тегов, но все же вам необходимо посмотреть в документацию и усвоить новый синтаксис.

Если вы до этого никогда не использовали MODX, то не волнуйтесь, мы изучим как использовать эти теги в процессе построения сайта. Для начала посмотрите на таблицу сверху, на ней представлены синаксис тегов для разных версий MODX.

В данном уроке мы в основном будем использовать теги системных установок.

6. Изменения заголовка сайта в MODX Revolution

Первое, что мы сделаем — это изменим тег заголовка сайта, чтобы он выводил имя нашего сайта, а не имя шаблона, как сейчас:

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

Нам нужно просто заменить текст Business Success в заголовке на системный тег, который передаст текущий заголовок сайта с наших системных настроек. Заменим таким образом Business Success на &#91&#91++site_name&#93&#93. Также сделаем еще одну вещь, тип переменных можно определить в системных настройках нашего сайта, поэтому заменим UTF-8 на &#91&#91++modx_charset&#93&#93. Таким образом приведенный выше код приобретёт следующий вид:

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

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

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

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

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

Теперь посмотрим исходный код сгенерированной MODX Revolution страницы и увидим, что парсер вставил правильный адрес сайта:

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

Следующий урок

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

Ссылка на основную публикацию
Как удалить файл php
Как удалить файл с моего сервера с помощью PHP если файл находится в другой директории? вот мой макет страницы: projects/backend/removeProjectData.php...
Как создать словарь в word
Меня интересует вот такая тема: когда печатаешь текст на компе, например, с ошибкой правописания, появляется подсказка - как правильно надо....
Как создать таблицу на компьютере
Как создать таблицу в Word? Сейчас я просто не представляю, как можно работать без такой нужной и полезной программы, как...
Как удалить файл если он используется
Не редко встречаются ситуации, когда нужно удалить файл, но Windows сообщает, что файл занят другим процессом. Это может быть важный...
Adblock detector