Красивые тематические шаблоны на modx. Шаблоны для CMS MODx
Пару месяцев назад я познакомился с движком modx. Вначале было очень трудно, хотя самоучителей по нему достаточно. Но некоторые из них застарели, некоторые были для других версий. Но в общем с работой и возможностями движка я разобрался, хотелось еще установить красивый шаблон modx , но тут я столкнулся с проблемой — шаблонов на модх как таковых нет. Сначала я расстроился, а потом понял насколько это круто, ведь на модх можно поцепить любой html -шаблон, при этом разбив его на чанки (детали шаблона) как угодно! В этой статье я и расскажу вам как легко установить шаблон modx , разбить его на части и как редактировать шаблоны modx .
Самое главное — это найти просто html-шаблон. Желательно адаптивный — чтобы открывался на разных устройствах с разной шириной экрана. Будем считать что Вы нашли такой (хотя в нашей случае подойдет абсолютно любой html шаблон). Далее нужно или залить файлы на хостинг, или создать там странички и скопировать содержимое. Но давайте все по шагам и как это делаю я.
Пошаговая инструкция по созданию и настройке своего шаблона modx
Итак, мы имеем шаблон — набор html и css файлов, возможно еще и скрипты.
1. Заходим в админ панель modx, вкладка Элементы-Шаблоны и жмем плюсик.
3. Жмем сохранить. Все, наш шаблон готов. Но чтобы проверить его работу, нужно создать тестовую страничку. Для этого Создаем новый ресурс (страницу), выбираем наш новосозданный шаблон и жмем сохранить. Не забываем отметить галочкой Опубликован .
Теперь открываем нашу страницу (введя вручную адрес в браузере или добавьте в меню для удобства). Если Вы все сделали правильно сайт должен открыться с Вашим новым html шаблоном, установленным на modx.
Свой шаблон modx: не показываются картинки и стили css
Хотя, скорее всего, шаблон может не открыться так как надо с первого раза. Будьте внимательны с расположением файлов . Обычно шаблон может «поплыть» и показываться без картинок. Все из-за того, что неверно прописан путь к файлам. Их нужно смотреть в самом файле шаблона и подставить туда, куда вы заливали на хостинг. Например, я заливал файлы в папку assets/template/test_shab /, поэтому в шаблоне прописывал что-то вроде assets/template/test_shab/img/favicon.ico и т.д. Все пути к файлам нужно сменить, поскольку стандартно все файлы находятся в папке с шаблоном, а в modx лучше их куда-то загружать (но это скорее для удобства, дабы не засорять систему).
Как сделать чтобы отображался контент modx на своем шаблоне
Если Ваш шаблон открывается и все картинки показываются — это хорошо. Но это еще не все. Сам контент, прописан через админку modx, не выводится. А почему? Потому что он не упоминается в шаблоне! Мы просто скопировали весь код из html-шаблона. Добавьте вместо контента в шаблоне чанк [[*content]] , который как раз и отвечает за вывод всего контента modx. В редакторе шаблона выглядеть это будет примерно вот так:
На этом пока заканчиваем. Если что-то не получилось — спрашивайте. Это пока не все, еще нужно будет разбить ваш шаблон на чанки , чтобы удобнее выводить контент и работать с сайтом.
Сегодня мы с вами подберем подходящий дизайн в виде готовой HTML-верстки для реализовываемого проекта. А также настроим вывод содержимого одиночных веб-страниц.
Итак, в качестве исходного материала для создания шаблонов страниц Модэкса я выбрал верстку под названием «simplemagazine-01″ от TemplatesDock:
Как видите выше структура «simple magazine» полностью соответствует классическому блогу: две колонки, сверху главное меню, справа рубрики и иные вспомогательные элементы. Кроме того веб-дизайнер с HTML-верстальщиком проработали также и шаблон внутренней страницы, не обделив вниманием основные элементы типографики:
Фактически это то, что нам нужно для старта.
Скачать Интеграция дизайна в MODX Revolution: шаблон одиночной страницы Подготовка файлов1. После авторизации на вашем сайте посредством встроенного файлового менеджера (см. вкладку Файлы дерева элементов справа) создайте новый каталог под названием templates в папке «assets», затем в этом новом ещё один, — назовите его «simplemagazine»:
2. В контекстном меню созданного каталога templates выберите пункт «Загрузить файлы», если предпочтете загружать файлы встроенными средствами…
Ну а я в целях экономии собственного времени просто загружу папки design, javascript и css в /assets/templates/simplemagazine . Отлично, необходимые файлы для будущих шаблонов страниц успешно разложены по своим местам. Далее приступим к собственно самому процессу интеграции.
Создание шаблона одиночной страницы1. Перейдите на вкладку Ресурсы дерева элементов. Введите имя шаблона и его описание, в поле код вставьте полное содержимое файла «subpage.html», — делайте всё, как показано на снимке экрана, расположенном ниже:
2. Между тегов … добавьте базовую ссылку. Это необходимо для того, чтобы можно было посредством относительных ссылок переопределить пути до стилей и клиентских скриптов.
3. Теперь переопределяем пути до стилей и скриптов, заменяя пути на подобные нижеследующим. К примеру было в исходной разметке:
Принцип надеюсь понятен. Но если и этот пример для читателя пустой звук(!), тогда в срочном порядке рекомендую прочесть htmlbook.ru — о способах добавления стилей к странице. Тоже самое выполняете с включениями JavaScript.
ИтогиВ этой статье рассмотрим такой элемент CMF MODX Revolution как шаблон.
Что такое шаблон?Шаблон - это элемент MODX, представляющий собой заготовку, на основании которой может осуществляться вывод любого количества ресурсов. Для того чтобы шаблон использовался для вывода некоторого ресурса, он (шаблон) должен быть связан с ним (ресурсом).
Подключение шаблона к ресурсу осуществляется через поле "Шаблон".
После этого подключенный (выбранный) шаблон будет использоваться для вывода этого ресурса.
Понять назначение шаблона и то, как он связан с ресурсами очень просто, если представить шаблон домом, а ресурс человеком, живущим в этом доме. Дом, так же как и шаблон (страница) состоит из множества деталей (крыша - шапка страницы, стены – каркас страницы, основная часть фасада – основное содержимое страницы, подвал – нижняя часть страницы и т.д.).
Человек (ресурс) может иметь несколько домов (шаблонов), но жить в определённый момент способен только в одном из них. Через некоторое время, человек может переселиться жить в другой дом, это будет аналогичному тому, что ресурсу назначить другой шаблон.
Внимание: Каждый ресурс (страница) в MODX Revolution может использовать в качестве своего вывода только один шаблон. Т.е. MODX не разрешает для вывода ресурса одновременно использовать несколько шаблонов. Но в любое время ресурсу можно назначить другой шаблон. Для этого необходимо на странице редактирования ресурса выбрать нужное значение из раскрывающего списка "Шаблон" и нажать на кнопку "Сохранить". После этого вывод ресурса уже будет осуществляться на основании указанного (другого) шаблона.
Где находятся шаблоны в админке?В админке (менеджере) шаблоны находятся на левой панели во вкладке "Элементы".
Шаблоны состоят из полей: имя, описание, иконка, код шаблона (html) и др.
Основные поля шаблона - это имя и код шаблона (HTML). Имя - это название шаблона. Код шаблона - это его содержимое, на основании которого и будет осуществляться вывод ресурса. Код шаблона в большинстве случаев представляет собой обычную HTML-страницу с наличием в ней специальных тегов MODX (полей ресурса, TV-переменных, чанков, плейсхолдеров, ссылок, системных переменных, вызовов сниппетов). Эти специальные теги и выполняют всю магию. Они выводят данные (значения любых полей) текущего ресурса, формируют динамическое меню страницы, а также любой другой контент, который может быть связан или нет с этим (текущим) ресурсом.
Создание шаблонаСоздание шаблона в админке осуществляется посредством выполнения следующих шагов:
Например: [[*pagetitle]] [[*longtitle]] ID (идентификатор) страницы: [[*id]]
Аннотация (введение): [[*introtext]]
Заголовок ресурса в меню: [[*menutitle]] [[*content]] Обратите внимание на специальные теги: [[*pagetitle]], [[*description]], [[*longtitle]] и др. Они обрабатываются парсером только тогда, когда браузер пользователя запросит у MODX ресурс, имеющий этот шаблон. Когда это случиться все специальные теги ([[*полеРесурса]]) будут заменены на значения соответствующих полей текущего (запрашиваемого) ресурса.
Внимание: После создания шаблон автоматически не назначается ресурсам. Указание шаблона определённым ресурсам производится через их редактирование. Т.е. необходимо будет произвести изменения в каждом ресурсе, а именно открыть ресурс, выбрать из раскрывающего списка созданный шаблон и нажать на кнопку "Сохранить".
Редактирование шаблонаРедактирование шаблона в админке осуществляется следующим образом:
Шаблоны MODX по умолчанию хранятся в таблице базы данных modx_site_templates (modx - это префикс для таблиц, назначаемый во время установки системы).
Начиная с версии MODX 2.2.x появилась также возможность хранить код шаблона в файле.
Чтобы это сделать необходимо на странице создания/редактирования шаблона выполнить следующее:
После этого содержимое указанного файла будет использоваться в качестве кода шаблона.
Это возможность предназначено для того, чтобы код шаблона можно было изменять путём редактирования файла.
Использование полей ресурса в шаблонеПолучение значений полей ресурса в шаблоне осуществляется посредством следующего синтаксиса:
[[*имяПоля]]
Список доступных полей ресурса можно посмотреть . Например, вывести значение поля pagetitle текущего ресурса в тег title:
[[*pagetitle]]
Например, вывести содержимое текущего ресурса:
[[*content]]
Теги, предназначенные для вывода значений полей ресурса, могут также как и другие теги MODX, иметь фильтры вывода. Например, выведем значение поля "introtext" в блок div с классом intro, используя 2 фильтра. Первый фильтр вывода будем использовать для исключения из содержимого поля introtext любых HTML-тегов. Второй фильтр будем использовать для того чтобы вводить на экран не всё содержимое этого поля, а только первые 200 символов. Если данное поле будет иметь большее количество символов, то в конце строчки отобразить знак многоточия (...).
[[*introtext:stripTags:ellipsis=`200`]]
TV-переменные в шаблонахЕсли шаблон сравнивать с домом, то TV-переменные (переменные шаблона) можно представить как комнаты этого дома. Добавление TV-параметра - это получается как добавление новой комнаты в дом.
TV-переменные - это дополнительные поля, которые может иметь ресурс. Привязываются TV-поля к ресурсу через шаблон. MODX позволяет добавить к ресурсам бесконечное число дополнительных полей (TV-переменных) посредством шаблона.
Например, необходимо добавить ко всем ресурсам, имеющим шаблон "city", дополнительное поле photo. Чтобы это осуществить необходимо выполнить следующие действия:
После этого у ресурсов, имеющих шаблон "city" появится дополнительное поле.
Для того чтобы вывести значение поля (TV-параметра) city в шаблоне необходимо использовать следующую конструкцию:
[[*photo]]
TV-переменные должны быть явно назначены шаблону. Только после этого они станут доступными при редактировании соответствующих ресурсов. Если в режиме редактирования ресурса, необходимые TV-параметры не отображаются, значит, они не были назначены шаблону, который этот ресурс использует.
Но в этой статье я хочу рассказать немного о другом, о модулях. Эту статью я пишу по той причине того что в интернете очень мало информации на эту тему, в русском сегменте такой я вообще не нашел.
Если говорить конкретнее, то с помощью модулей вы можете создавать надстройки со своими интерфейсами, например для массового редактирования документов или для управления интернет магазином, которые будут удобны пользователю.Создание нового модуля Создание модуля довольно очевидно. Просто перейдите во вкладку модули->управление модулями и в правом верхнем углу нажмите кнопку новый модуль, далее заполните все необходимые вам поля и кнопку сохранить, с этим я уверен ни у кого проблем возникнуть не может. После того как вы сохранили модуль он появится во вкладке модулей.Код модуля Создание модулей - это здорово, но иногда у нас возникает странное желание чтобы этот модуль что-то делал… За все то что делает модуль отвечает поле код модуля, в нем просто пишется тот php код который будет исполнен как только вы войдете в свой модуль. Обратите внимание здесь нельзя использовать открывающий и закрывающий тег , так что если вы хотите вывести какой-то html код, будьте готовы писать выводить его через стандартный поток echo или делайте reqiure на файл, в котором этот код будет в более удобном виде. Я разумеется рекомендую остановиться на вынесении кода в отдельные файлы. Традиционно файлы модуля лежат в директории "/assets/modules/{Название модуля}", так что создайте в этой директории соответствующую папку и сошлитесь в коде модуля на нее.
// Так как вам доступны все константы и классы modx используйте MODX_BASE_PATH
require_once(MODX_BASE_PATH."assets/modules/newmodule/index.php");
Все теперь этот код будет исполняться при запуске вашего модуля.
Теперь давайте попробуем сделать что-нибудь полезное, например выведем в одном месте все документы с определенным шаблоном, это удобно например в тех случаях когда у вас на сайте много товаров, и они разбросаны по категориям. Для этого мы можем использовать функции самого modx или например через метод $modx->runSnippet получить все документы через всеми эволюционерами любимый Ditto, короче говоря полная свобода действий. Но мы для начала остановимся на чем-то очень простом и просто получим эти документы через обертку для работы с базой данный $modx->db.
// Не самый правильный, но быстрый и понятный способ вывести документы с ссылкой на самих себя $docs = $modx->db->query("SELECT id, pagetitle FROM modx_site_content WHERE template="8"")->fetch_all(); foreach($docs as $doc){ $docId = $doc; $docTitle = $doc; echo "
$docTitle
"; }Теперь если мы перейдем в модуль увидим не самые красивые, но все же сслыки на все документы с id = 8.
Но как же нам быть если, мы не хотим каждый лезть в код и писать там id шаблона?
Конфигурации в MODX Для настройки переменных для нашего приложения в плагинах и модулях есть так называемые конфигурации, в них вы можете задать сколько угодно переменных с различными типами ввода, которые будут доступны как определенные переменные в коде. Настраиваются конфигурации во вкладке свойства в виде JSON массива и затем после сохранения автоматически преобразуются в красивую табличку на странице конфигурации. Вот пример заполнения вкладки свойства. {
"card_template": [
{
"label": "Карточка товара",
"type": "string",
"default": "",
"desc": "id шаблона карточки товара"
}
],
"price_tv": [
{
"label": "Цена",
"type": "string",
"default": "",
"desc": "id tv параметра отвечающего за цену"
}
]
}
Здесь вопросов тоже быть не должно. После этого мы можем перестроить наш код так чтобы id шаблона было взято из этой переменной с именем $card_template
.
AndyShop
Название модуля
tpResources = new WebFXTabPane(document.getElementById("andyShopPane"), true);
Товары
tpResources.addTabPage(document.getElementById("Products"));
Заказы
tpResources.addTabPage(document.getElementById("Orders"));
Ну вот, теперь у нас получается вполне лаконичная страница, которую можно показать клиенту.
Почему MODX EVO Сейчас в приличном обществе принято всячески поносить эволюционную ветку развития MODX. Я с этим мнением не согласен и считаю что даже при наличии такого мощного инструмента, как MODX Revolution, у его старшего брата все еще есть права на существование. Во многом это благодаря тому что, по моему мнению EVO больше подходит для разработки корпоративных сайтов и изменяемых посадочных страниц.Во первых благодаря своему более очевидному синтаксису и отсутствию многих перегружающих интерфейс инструментов. Во вторых благодаря тому что с выходом версии 1.2 от декабря 2016 он стал поставляться с приятной для пользователя темой. Ну и в третьих админ панель Evolution ощущается реально быстрее Revo. Что же касается комьюнити и широкого спектра готовых решений, тут безусловно побеждает молодой боец.
Заключение Для MODX Evolution существует великое множество полезных модулей, таких как shopkeeper или Doc Manager, но большинство из них либо требует значительной доработки, либо совсем не подходит для решения вашей задачи, надеюсь эта статья немного прояснит вам процесс работы с модулями. Мне какой-то такой заметки сильно не хватало когда я только начинал работать с этим CMF. Если у вас остались какие-то вопросы, я с радостью на них отвечу. Modx шаблоны (модэкс) В 2004 году была разработана профессиональная бесплатная система управления сайтом MODX (модэкс). Она является так же фреймворком для веб-приложений и обеспечивает контроль над контентом. Этой платформой можно пользоваться как в личных целях, так и в коммерческих.С ее помощью создаются как обычные блоги, так и интернет-магазины. Выделяются следующие версии этой CMS: MODX Evolution и MODX Revolution. Первая является наиболее старой и ее функциональность значительно ниже, чем у следующей версии. Однако начинающие программисты чаще выбирают Evolution, так как в ней проще разобраться. Версия MODX Revolution на сегодняшний момент - самая новая. Она поддерживается разработчиками и рекомендуется для использования, если встал выбор какую из этих двух версий систем выбрать.
MODX шаблоны Что представляет собой шаблон? Это простая сверстанная страница, обычный CSS шаблон и документ HTML и CSS, в котором используются теги данного шаблона. Профессиональные шаблоны для «модэкс» предлагаются в интернете на множестве ресурсов. Но не везде можно найти уже готовые решения для сайтов(это когда все страницы уже проработаны веб-дизайнерами и не приходится задумываться над их оформлением самостоятельно). Полноценные MODX шаблоны скачать можно бесплатно. Они детально проработаны и имеют уникальный дизайн, что играет большую роль при создании сайтов. А если есть время и желание сделать что-то особенное, то можно разработать свой собственный шаблон с неповторимым дизайном. Это сделает сайт более привлекательным для посетителей. При скачивании дополнений со сторонних ресурсов, следует быть внимательными, так как большинство сайтов, раздающих бесплатные приложения, являются вредоносными. MODX установка шаблона Что делать после того, как платформа установлена и выполнены первоначальные настройки системы? Нужно установить шаблон, который разработан самостоятельно или же скачан из интернета. Первый шаг этого процесса – перемещение файлов в папку сайта на сервере. Как правило, она называется Templates. В ней можно создать директорию с названием шаблона и уже туда скопировать папку с изображениями и файлы со стилями CSS. Затем следует перейти в панель администратора и выбрать раздел «Новый шаблон», который находится в меню «Элементы – управление элементами». Следующий шаг – заполнение формы. Для этого необходимо ввести название шаблона и его код, который располагается в отдельном текстовом файле. И не забыть сохранить изменения. Как видно, установка шаблона является процессом не таким сложным, как может показаться. Однако, часто случаются ошибки, и неопытные пользователи могут попасть в ситуацию, когда на сайте шаблон выглядит совершенно иначе, чем было задумано. Например, не срабатывают некоторые элементы. Чтобы этого избежать, нужно установить дополнительные плагины. А чтобы меню сайта выглядело точно таким же, как в шаблоне, следует внести изменения в настройках сниппета и в файле стилей CSS. Если появились «битые» ссылки, то также необходимо переписать их на относительные. MODX шаблоны интернет магазина Для создания сайта, на котором планируется совершать сделки купли-продажи, на данной платформе существуют специальные дополнения. Они позволяют конструировать интернет-магазин и настраивать компоненты по своему усмотрению. MODX Revolution шаблоны имеют настраиваемые скрипты, которые при установке дополнений подключаются автоматически. Все необходимые настройки интернет-магазина на «модэкс» можно сделать, потратив максимум 10 минут. С помощью этой мощной системы у каждого есть возможность научиться делать хороший сайт самостоятельно.