Содержание

Как работать с Шаблонами в ModX Revolution

Добро пожаловать на 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 код с тегами [[++site_name]], [[*pagetitle]].

Эти тэги трансформируют статичный 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

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

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

<head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Business Success</title>

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

<head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>US.CMS</title>

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

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

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

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

<head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <base href="http://modx.ws/" /> <title>US.CMS</title>

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

<head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <base href="https://uscms.ru//" /> <title>US.CMS</title>

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

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

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

Современные CMS позволяют задавать оформление сайтов из готовых шаблонов, что сильно упрощает жизнь людям, которые не сильно подкованы в веб-программировании и дизайне. Не является исключением и MODX.

Шаблон представляет собой несколько файлов и папок, которые необходимо положить в специальный каталог на сайте.

Пример шаблона для MODX.

Для установки дизайна из готового шаблона создайте в каталоге assets/templates/ новую папку, куда и нужно будет положить файлы и папки, о которых говорилось выше. Путь к шаблону может быть и иным.

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

Создание нового шаблона в MODX.

Откроется форма, которую нужно заполнить при создании шаблона.

Обязательно надо задать имя шаблона и вставить код из файла index.html. После этого нужно сохранить шаблон.

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

Там можно выбрать необходимый шаблон из выпадающего списка.

Не забудьте сохранить изменения.

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

Причина кроется в том, что не подключились таблицы стилей (CSS). Поэтому нам потребуется отредактировать код шаблона.

Снова открываем шаблон и прописываем между тегами <head> и </head> базовый путь для шаблона:

<base href="[[++site_url]]" />

В MODX Evolution вместо [[++site_url]] используйте [(site_url)].

Вторым шагом будет редактирование путей ко всем файлам стилей, изображений и скриптов, что вы найдёте в коде шаблона. Проще всего искать строки кода, содержащие src.

Так, если в коде у вас прописан путь к изображению

<img src="img/common/avatar.png">

то нужно добавить путь к каталогу шаблона (в моем случае /assets/templates/pure/, но каталог с шаблоном может называться и иначе). В результате получится

<img src="/assets/templates/pure/img/common/avatar.png">

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

Подборка адаптивных шаблонов для MODx Evolution

Раз уж ранее я показывал как натягивать HTML шаблон, то думаю, настало время поделиться с вами небольшой но действительно стоящей подборкой бесплатных и главное адаптивных шаблонов для движка MODx Evolution.

На самом деле, для CMS MODx подойдет любой HTML-й шаблон, поэтому если вам какой понравился смело скачивайте, и приступайте к работе.

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

Адаптивный шаблон для сайта фотографа.

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

Особенности шаблона:

  • Действительно свооебразный и оригинальный шаблон;
  • Содержит страницы: портфолио, блога, контактов и другие;
  • Качественный HTML и CSS код, без лишнего мусора;
  • Плавный скроллинг;
  • Bootstrap 4.

Вы можете посмотреть демо или скачать шаблон абсолютно бесплатно.

Адаптивный HTML5 CSS3 шаблон с полноэкранным слайдером.

Отличный адаптивный шаблон с полноэкранным слайдером, выполненный в светлых, нейтральных тонах. Отлично подойдет для создания сайта портфолио или блога.

Особенности:

  • Полноэкранный слайдер;
  • Полностью адаптивный и кроссбраузерный шаблон;
  • Оригинальный и смелый дизайн;
  • Интересные эффекты.

Вы можете посмотреть демо или скачать шаблон абсолютно бесплатно.

Адаптивный многоцелевой шаблон сайта.

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

Особенности:

  • 12 различных вариантов оформления главной страницы для разных тематик;
  • 14 различных цветовых решений;
  • Технология Bootstrap;
  • Несколько типов меню;
  • Сервисные страницы и многое другое.

Вы можете посмотреть демо или скачать шаблон абсолютно бесплатно.

Оригинальный адаптивный шаблона сайта с портфолио.

Минималистичный, современный дизайн не оставит вас равнодушным при выборе данного шаблона в качестве портфолио.

Особенности:

  • Современный и очень ориганльный дизайн;
  • 5 вариантов отображения портфолио;
  • Чистый код;
  • HTML5 и CSS3;
  • Чистый оптимизированный код.

Вы можете посмотреть демо или скачать шаблон абсолютно бесплатно.

Красивый адаптивный шаблон для блога женской тематики.

Простой и симпатичный шаблон, который отлично подойдет для блога женской тематики или личного сайта.

Особенности:

  • Полностью адаптивный шаблон;
  • Несколько вариантов представления информации;
  • Сверстанная готовая страница обработки ошибки 404.

Вы можете посмотреть демо или скачать шаблон абсолютно бесплатно.


Автоустановщик шаблонов BELISSIMO / Русскоязычное сообщество MODX

Доброго времени суток.
Начну с того что это просто концепт который в идеале можно доработать до нормального состояния а не как я: сделал, работает и хорошо.
Тестировал на чистом модексе работало сносно.
Это с позволения назвать «модуль», который установит в пару кликов html шаблон на modx с возможностью предварительно посмотреть превью шаблона в лайв режиме фрейма. Для того чтобы парсер каждый раз с целевого сайта не грузил картинки реализован кеш.
Поскольку все шаблоны разные, самописный недопарсер в каких то случаях работает хорошо, а в других нет, для обхода этого момента существуют настройки.

  • Можно отключить генерацию чанков (корректность работы зависит от вёрстки выложенного шаблона).
  • Можно отключить генерацию ссылок (корректность работы зависит от вёрстки выложенного шаблона).
  • При выводе каталога шаблонов можно выбрать тип сайта (многостраничный\одностраничный\Bootstrap\Все шаблоны)
  • И одна из самых важных функций это режим песочницы (поскольку превью выводиться в формате песочницы IFRAME, то некоторые демо версии шаблонов просто не открываться нормально (лечиться это отключением режима песочницы или просмотром в новом окне).
  • В низу под фреймом предпросмотра указаны теги, по которым быстро можно понять какие технологии применены, тип сайта и прочего.

  • По мимо этого в табе «Настройки установки и форма поиска» с низу есть категории шаблонов по которым будет осуществляться поиск.

Так же я предусмотрел обновление, на случай если free-css.com изменит верстку и нужно будет всем быстро обновить «модуль» так чтобы карета не превратилась в тыкву в одночасье.

В теории так же данный «модуль» может накатывать статичные шаблоны из .zip архивов.
Установка простая, кидаем папку из архива с названием BELISSIMO а папку с модексом чтоб получилось так:

Он самостоятельно и с переменным успехом сгенирирует:
Чанки
Ссылки
Шаблоны
Линки к стилям и скриптам с картинками

Ресурсы
Категории
Так же ведёт лог\файл конфигурации установки:

И так же удалит это все если будет нужно.

Изначально идея была в быстрой установке шаблона для дальнейшего редактирования под себя, в случае если вы верстальщик не бей лежачего как я.
Ну и да, хотелось чего то хотя бы отдалённо напоминающего установку тем как в попсовых CMS.
Да я понимаю что Modx:

  1. CMF;
  2. Modx идет именно пустым что-бы сделать сайт под себя с нуля;
Спасибо за внимание\идеи\помидоры\критику\остальное.
Работает в таком виде только с контекстом WEB.
В идеале я не против помощи и добавления других сайтов\каталогов шаблонов.
К примеру:
Так же не плохо было бы прикрутить накатывание спаршенных сайтов.
Как привило всегда нормально накатывает СТАТИЧНЫЙ ШАБЛОН САЙТА ИЗ ИНТЕРНЕТА (без всяких генераций).
При накатывании из архива ОБЯЗАТЕЛЬНО шаблон должен лежать в подпапке и никак иначе, так же на весь архив должен быть только один index.html или index.htm.
Возможно записать видео уроки для вывода в одноименной вкладке.
Идет в виде отдельной папки по причине моего незнания ExtJs.
Ссылка для мазохистов: скачать.
Начать работать можно по адресу: ваш-сайт.ru/BELISSIMO.
После установки того что понравилось удалите нахрен папку BELISSIMO если сайт доступен из интернета.
Всем продуктивного отдыха, хорошего зрения, прямой осанки, много денег, отсутствия багов, в общем всем PEACE!
P.S. Комментарии приветствуются!

Ссылки на статьи об обновлениях:

Как подключить дизайн сайта на MODx

 

Архив шаблона должен включать в себя следующие файлы:

  • Default
  • Index.html — страница, предоставленная разработчиками, на которой демонстрируется работа шаблона на различных мобильных устройствах и ПК. Данная страница нам не потребуется.

В свою очередь папка Default включает в себя папку с CSS-элементами, js, home.html.

  • CSS — изображения и стили, которые используются в текущем шаблоне сайта на MODx.
  • Js — элементы jquery + элементы (скрипты) для отображения на главной странице слайдера.
  • home.html – является основным файлом в этой папке.

Шаблоны вашего сайта на MODx хранятся в директории /assest/templates. В данную папку скопируйте файлы приобретенного HTML-шаблона.

Примечание. Для каждого шаблона создается своя папка, в которую и копируются файлы. Допустим, в данном случае мы назовем папку «Shablon».

Настраиваем дизайн главной страницы сайта

Откройте административную панель сайта (http://мой_сайт.ru/manager). Перейдите в раздел «Элементы» — «Управление элементами» — «Шаблоны». Откройте страницу «Minimal Template».

Рис. 1

Из данного шаблона мы будем формировать страницу, а именно, главную страницу сайта (home).

Форма состоит из следующих полей:

  • Имя шаблона – как мы уже сказали, из этого шаблона мы будем формировать главную страницу сайта — поэтому имя шаблона будет «Главная» (или Home).
  • Описание — небольшое описание шаблона, которое будет отображаться только здесь и в общем списке шаблонов.
  • Существующие категории — категории уже созданных шаблонов.
  • Новая категория — если ни одна категория из списка выше не подходит, то можно задать новую группу для данного шаблона.
  • Код шаблона HTML — добавьте в данное поле код страницы home.html, которая находится у нас в директории assets/templates/shablon/home.html.

Рис. 2

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

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

Как настроить скрипты и стили:

  1. Между тегом <head> </head> пропишите путь к шаблону, например:
    <base href=””>.
  2. Замените пути к файлам всех строчек, которые имеют значение «src».
    Например, у нас прописан путь «<img src=”css/images/cart-uim.png” alt=”” />», тогда перед «css/images/cart-uim.png» необходимо добавить «assets/templates/shablon/».

Примечание. «Shablon» – это условное наименование шаблона, у вас будет свое название шаблона.

После этого нажмите на кнопку «Сохранить».


Варианты готовых шаблонов для CMS MODx

Помимо HTML-шаблона, на сайт можно также установить и готовый шаблон, настроенный под определенную CMS, в нашем случае — MODx.

«Booom!» — шаблон для MODX — красочный и привлекательный шаблон, который подойдет для проекта или компании, ориентированных на услуги по воспитанию детей или развлечения для детей. Шаблон построен на Bootstrap 3.0. Простое управление шаблоном.

Демо / Скачать

«Cube» — интересный шаблон для ночного клуба или проекта, который освещает все грядущие развлекательные события в городе. Шаблон разработан на Twitter Bootstrap Grid System. Респонсивный шаблон. Использование HTML5 и CSS3, гибкая настройка, события, медиа, галерея, блог, AjaxForm.

Демо / Скачать

«Light» — Целевая страница для компании в сфере бизнес-услуг. Многофункциональный шаблон MODX. Поддержка Wayfinder и Formlt элементов. Шрифты PT Serif и PT Sans (шрифты Google).

Демо / Скачать

«Other» — шаблон для фотостудии. Идеально подходит для демонстрации творческих работ. Основное место на сайте уделяется изображениям и галереям. Использование AJAX для загрузки.

Демо / Скачать

Назад Вверх

Расширение и наследование шаблонов

Использование шаблонизатора Fenom позволяет включать одни чанки (шаблоны) в другие и даже расширять их.

Например, вы можете просто подгрузить содержимое чанка:

Обычный чанк {include 'имя чанка'}
Шаблон modTemplate {include 'template:имя шаблона'}
Чанк с набором параметров
{include '[email protected]'}
{include 'template:[email protected]'}

Подробнее про {include} читайте тут.

Наследование шаблонов 

Гораздо более интересная функция — {extends} шаблонов, она требует включенной системной настройки pdotools_fenom_parser.

Пишем базовый шаблон «Fenom Base»:

<!DOCTYPE html>
<html lang="en">
<head>
    {include 'head'}
</head>
<body>
    {block 'navbar'}
        {include 'navbar'}
    {/block}
    <div>
        <div>
            <div>
                {block 'content'}
                    {$_modx->resource.content}
                {/block}
            </div>
            <div>
                {block 'sidebar'}
                    Sidebar
                {/block}
            </div>
        </div>
        {block 'footer'}
                {include 'footer'}
        {/block}
    </div>
</body>
</html>

Он включает обычные чанки (в которых, кстати, обычные плейсхолдеры MODx от компонента Theme.Bootstrap) и определяет несколько блоков {block}, которые можно расширить в другом шаблоне.

Теперь пишем «Fenom Extended»:

{extends 'template:Fenom Base'}

{block 'content'}
    <h4>{$_modx->resource.pagetitle}</h4>
    <div>
        {parent}
    </div>
{/block}

Так вы можете написать один базовый шаблон и расширить его дочерними.

Точно также можно писать и расширять чанки, только обратите внимание, что для работы с modTemplate нужно указывать префикс template:, а для чанков нет — они работают по умолчанию во всех {include} и {extends}.

Важно! При наследовании Fenom требует обязательного объявления хотя бы одного блока в шаблоне. Т.е. просто унаследовать базовый шаблон строкой {extends ‘template:Fenom Base’} нельзя, будет 502 ошибка на уровне PHP. Достаточно объявить любой блок либо переопределить из базового:

{extends 'template:Fenom Base'}
{block 'empty'}{/block}

Время работы: 0,1145 s
Время запросов: 0,1145 s
Количество запросов: 24
Источник: cache

Кастомизация административной панели Modx Revolution для менеджера

Всем привет. Хотите, чтобы менеджер даже не знал, что такое шаблон страницы? Чтобы он даже не знал, что в админке есть диспетчер файлов? Вы хотите чтобы у менеджера не возникло ни одного вопроса в заполнении сайта? Тогда эта статья для Вас, мой дорогой читатель. Я расскажу как упростить административную панель до уровня 18-и летней секретарши директора кирпичного завода (не в коем случае никого не хотел обидеть).

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

Итак, к примеру у нас есть такая структура

  • Категория (шаблон «Главная страниц»)
    • Страница (шаблон «Страница»)
    • Страница (шаблон «Страница»)
  • Категория (шаблон «Главная постов»)
    • Пост (шаблон «Пост»)
    • Пост (шаблон «Пост»)
  • Категория (шаблон «Главная статей»)
    • Статья (шаблон «Статья»)
    • Статья (шаблон «Статья»)

И нам нужно, чтобы при создании «Страницы» у нас выходил шаблон не «Главная страниц», а «Страница», а при создании «Поста» не «Главная постов», а  шаблон «Пост». Покажу на живом примере на скриншотах:

Приступим

Мы возьмем от сюда раздел «Ответы на частые вопросы» и разберем его детально. У документа «Ответы на частые вопросы» 3 вложенных документа и шаблон «FAQ», только я его скрыл, следуя инструкции все той же статьи.

У страницы «Есть ли вероятность того, что поход не состоится?» стоит шаблон «Вопрос», я его также скрыл, чтобы лишнее поле не вызывало вопросов у менеджера (вспоминаем, «блондинка с кирпичного завода»).

Но при создании нового документа

Выходит страница с шаблоном «FAQ», которая к тому же и не оптимизирована под менеджера

Чтобы при клике на документ «Ответы на частые вопросы» с шаблоном «FAQ» у нас выходила страница с оптимизированным шаблоном «Вопрос» идем в «Настройки форм»:

Редактируем наш профиль (у меня он называется manager)

У нас открываются все наборы правил, которые мы уже создали

Нас интересует шаблон «Вопрос». Копируем его

А теперь редактируем

Меняем Действие на Создать ресурс, ставим галочку напротив «Активный».

А теперь, ВНИМАНИЕ, суть всей статьи: в Ограничивающем поле пишем parent, а в ограничивающем значении — 4. Parent означает к какому ресурсу применить значение, а значение «4» — это документ с id 4, в нашем случае это родитель «Ответы на частые вопросы».

Но это еще не все. Скроллим ниже к параметру «template» и в Значении по умолчанию вставляем id шаблона «Вопрос»16. Сохраняем.

Дальше кликаем на «Ответы на частные вопросы» и создаем «Документ»

И Опа-ля

Добавление подразделов

Но есть примеры где есть тройная вложенность. Возьмем пример раздела «Походы». Структура тут следующая:

  • Походы (шаблон «Главная маршрутов»)
    • 1 дневные походы (шаблон «Категория маршрутов»)
      • Поход (шаблон «Поход»)
      • Поход (шаблон «Поход»)
      • Поход (шаблон «Поход»)
    • 2 дневные походы (шаблон «Категория маршрутов»)
    • 3 дневные походы (шаблон «Категория маршрутов»)

Копируем и редактируем шаблон «Поход»:

Выставляем:

Действие: Создать ресурс
Шаблон: Поход
Ограничивающее поле: parent
Ограничивающее значение: 6
Активный: ставим галочку

И тут самое интересное: в параметре «template» выставляем значение по умолчанию «2» (шаблон Поход), ставим галочку «видимый», в новое имя пишем «Выберите шаблон „Категория“» а все остальные параметры, типа pagetitle, longtitle, content, все tv, в общем всё выключаем

Пробуем добавить «Категорию маршрутов». Нажимаем на «Походы» — создать — документ

Выбираем шаблон «Категория маршрутов» и видим неоптимизированный шаблон

Идем снова в «Настройки форм», копируем «Категории маршрутов» и редактируем

Действие: Создать ресурс
Шаблон: Категория маршрутов
Ограничивающее поле: template
Ограничивающее значение: 13
Активный: ставим галочку

А также выставляем «template» — 13 и галочку можно убрать

Опять пробуем добавить Категорию в Походы

Теперь все в порядке. У менеджера не возникнет ни одного вопроса при заполнении категории.

Пробуем добавить «Поход» в «Категорию маршрута»

Идем в настройки формы оптимизировать шаблон. Копируем шаблон «Поход» update, то есть тот, который предназначен для «Обновить ресурс» и редактируем его

Действие: Создать ресурс
Шаблон: Поход
Ограничивающее поле: template
Ограничивающее значение: 2
Активный: ставим галочку

Выставляем «template» — 13 и галочку также можно убрать

Создаем в «1 дневные походы» документ и Опа-ля:

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

Помогла статья? Угости чашечкой кофе =)

шаблонов — элементы | Документация MODX

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

Шаблоны

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

Думайте о шаблоне как о доме.Таким образом, контент вашего ресурса — это личность. У человека может быть много разных домов, но одновременно жить только в одном доме.

Ресурсы

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

Использование¶

Чтобы создать шаблон — разверните часть дерева «Элементы» и щелкните правой кнопкой мыши на шаблоне.Выберите «Создать новый шаблон», затем вставьте свой HTML-код в текстовое поле «Код шаблона»; вы можете скопировать и вставить текст ниже, чтобы начать работу с очень простым шаблоном:

  

     [[* pagetitle]] 
    


 

[[* longtitle]]

Идентификатор страницы: [[* id]]
IntroText (Резюме): [[* introtext]]
MenuTitle: [[* menutitle]] <час /> [[*содержание]]

Обратите внимание на важный тег [[* content]] ; этот тег сообщает MODX, куда поместить содержимое ресурса.

MODX по умолчанию хранит шаблоны в своей базе данных, если вы используете версию до 2.2.x, это ваш единственный вариант. В MODX 2.2.x и новее у вас есть возможность сохранять шаблоны в виде статических файлов с помощью источников мультимедиа.

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

После того, как вы создали один или несколько шаблонов, вы можете отредактировать любой ресурс и выбрать для него шаблон, выбрав его из раскрывающегося списка «Использует шаблон».

Шаблоны

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

Использование полей ресурсов в шаблоне¶

Как вы заметили из нашего примера кода шаблона выше, на поля ресурса можно ссылаться с использованием синтаксиса [[* fieldName]] .Список доступных полей ресурсов можно найти здесь. Например, если бы мы хотели отобразить текущий pagetitle ресурса в нашем теге </code>, мы бы просто сделали это: </p> <pre> <code> <title> [[* pagetitle]]

Вы также можете разместить содержимое текущего ресурса, используя тег «content»:

  <тело>
[[*содержание]]

  

Эти теги похожи на обычные теги MODX в том, что к ним могут применяться выходные фильтры «Входные и выходные фильтры (модификаторы вывода)»).Например, предположим, что мы хотим отобразить поле «интротекст» на правой панели навигации, но убрать из него любые HTML-теги и отобразить только первые 400 символов — а если больше, добавить многоточие (…):

  
[[* introtext: stripTags: ellipsis = `400`]]

Переменные шаблона в шаблонах¶

Если шаблоны похожи на дом, подумайте о переменных шаблона (TV) как о комнатах в этом доме. В шаблоне может быть бесконечное количество телевизоров; просто думайте об этом, как о добавлении новых комнат в дом.

Переменные шаблона

позволяют иметь настраиваемые поля для любого ресурса с указанным шаблоном. Допустим, вам нужно поле «фотография» на ваших ресурсах в шаблоне «BiographyPages». Все просто — просто создайте телевизор, назовите его «bioPhoto», задайте для него тип ввода и вывода «изображение» и назначьте его своему шаблону «BiographyPages». Затем вы увидите телевизор на любом ресурсе, который использует этот шаблон.

Затем вы можете ссылаться на свой телевизор «bioPhoto» в своем контенте с тем же синтаксисом тега, что и поле ресурса:

  
[[* bioPhoto]]

Опять же, важно отметить, что переменные шаблона должны быть явно назначены используемому шаблону.После назначения Шаблону значение ТВ для этого Ресурса можно будет редактировать при редактировании Ресурса. Если вы не видите недавно созданный телевизор в своих ресурсах, убедитесь, что вы назначили этот телевизор шаблону.

См. Также

шаблонов MODX от ThemeForest

шаблонов MODX от ThemeForest

59 долларов США

193 Продажи

Последнее обновление: 09 июн 16

51 доллар США

160 Продажи

Последнее изменение: 16 мар 17

51 доллар США

80 Продажи

Последнее обновление: 05 фев 18

51 доллар США

78 Продажи

Последнее обновление: 12 авг 19

47 долларов США

63 Продажи

Последнее обновление: 02 фев 14

41 доллар

40 Продажи

Последнее изменение: 25 окт 14

25 долларов США

35 Продажи

Последнее изменение: 15 мая 14

52 доллара США

29 Продажи

Последнее изменение: 24 мар 20

35 долларов США

22 Продажи

Последнее изменение: 16 мая 14

52 доллара США

13 Продажи

Последнее обновление: 06 авг.20

52 доллара США

10 Продажи

Последнее обновление: 04 фев 21

52 доллара США

7 Продажи

Последнее обновление: 05 дек 19

52 доллара США

7 Продажи

Последнее обновление: 07 сен 20

32 доллара США

4 Продажи

Последнее обновление: 19 апр 14

29 долларов США

4 Продажи

Последнее изменение: 17 мая 14

52 доллара США

2 Продажи

Последнее обновление: 01 апр 21

52 доллара США 26 долларов США

Последнее изменение: 23 апр 21

52 доллара США

Последнее изменение: 26 сен 20

Многостраничная форма

в MODX с FormIt

** Первоначально размещено на форумах сообщества MODX

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

Я получил «быстрое и грязное», как это сделать, из этого сообщения на форуме (спасибо odeclas)

Я предполагаю, что вы использовали FormIt раньше, но не использовали его для многостраничной формы. Официальную документацию FormIt можно найти здесь: https://docs.modx.com/extras/revo/formit

Это решение использует FormIt, который поставляется с FormItRetriever. Вам понадобятся и то, и другое, потому что при отправке первой страницы FormIt просто «сохраняет» результаты — затем FormItRetriever «извлекает» их и помещает их в заполнители в скрытых полях ввода на следующей странице.После отправки второй страницы все данные выводятся (в данном примере по электронной почте).

Вызов фрагмента кода первой страницы FormIt:

  [[! FormIt?
    & крючки = `перенаправить`
    & store = `1`
    & redirectTo = `42`
    & validate = `this_field: обязательно,
        that_field: обязательно,
        other_required_fields: required`
]]
  
Разбить:
  • ! FormIt? »Вызывает сниппет.
  • & hooks »Обратите внимание, что здесь нет электронной почты, математики или чего-либо еще.Я просто перенаправляюсь на следующую страницу. Кто-то может посоветовать, что у меня есть спам-крючок или что-то в этом роде — я пока не считаю это необходимым.
  • & store »Сообщает FormIt о необходимости сохранения результатов.
  • & redirectTo »Замените 42 идентификатором ресурса следующей страницы формы.
  • & проверить »Это стандартная проверка FormIt — добавьте любые обязательные поля из вашей формы. Эта страница формы не будет отправлена, пока она не будет проверена.

Нет ничего особенного в форме html на этой первой странице и далее., электронная почта: электронная почта: обязательна, 2nd_page_required_fields: required` & redirectTo = `43` ]]

Разбить:
  • ! FormIt? »Вы должны снова вызвать фрагмент с этой страницы, если это не было очевидно.
  • и крючки »Здесь вы можете использовать любые хуки FormIt, которые вы обычно используете. В этом примере FormIt проверяет наличие спама, отправляет результаты формы по электронной почте и перенаправляет на страницу с благодарностью.
  • & emailTpl »Имя блока вашего электронного письма.Обязательно — в противном случае FormIt отправляет список полей и значений.
  • & emailSubject »Тема электронного сообщения — обратите внимание, что вы можете использовать заполнитель для любого поля формы.
  • & emailTo »Массив получателей, разделенный запятыми.
  • & redirectTo »Замените 43 идентификатором документа вашей страницы благодарности.
  • & проверить »Дополнительные параметры проверки. Информацию об использовании и список встроенных валидаторов можно найти в документации здесь: https: // docs.modx.com/extras/revo/formit/formit.validators

Вот важная часть !!

  [[! FormItRetriever]]
  

Вы также должны вызвать FormItRetriever на этой странице. Я сделал это сразу после вызова фрагмента FormIt и перед фактической формой html. Не уверен, нужно ли делать это в таком порядке, но, похоже, это работает: P Но подождите … теперь, когда мы получили данные формы предыдущей страницы, куда они деваются?

Добавьте заполнители для вывода данных формы:

  

  

В этих скрытых полях FormItRetriever будет выводить сохраненные данные формы с первой страницы. Они должны быть вложены в ваш элемент

. Заполнители используют префикс «fi». и называются некэшируемыми .

В этом примере будут выведены только значения для this_field и that_field. Все остальные поля с первой страницы будут отброшены, если для них не добавлены заполнители! Фрагмент FormItRetriever устанавливает заполнители на этой, второй странице, для повторной публикации.

Ваш шаблон электронного письма

Не забудьте включить заполнители с ОБЕИХ страниц формы в блок шаблона электронного письма. Нет заполнителя = некуда выводить данные = данные отсутствуют!

Вот и все. Надеюсь это поможет. Спасибо команде MODX за отличную платформу и разработчикам FormIt за отличное дополнение …

Добавьте свои комментарии, чтобы сделать этот урок лучше (или, по крайней мере, предложите способы, которыми я могу его улучшить, или укажите на ошибки)

14+ адаптивных шаблонов Modx Бесплатные темы для веб-сайтов

Бесплатные шаблоны Modx в настоящее время используются для создания веб-сайтов, ориентированных на результат.Он гибок в сложных ситуациях, и это делает его популярным. Все сложные веб-дизайны создаются с помощью Modx. Продвинутая система управления веб-контентом, известная своей простотой в установке решений. Создавайте более быстрые приложения и простые в использовании сервисы. Acquire, Ambiance, Advantage, Canvass, Burned, Boron, BlackCraft, Blooming, Baseline, AcqaBordered, Blackfairy, Capsicum, Fractal, EarthliAqua, Extend, Foundation, Wire mesh, Subdued, Variety, Tilers, Traditionalist — одни из лучших и большинство звуковых тем и шаблонов, доступных в Интернете.

Базовый бизнес-адаптивный HTML-шаблон, понятный и подходящий для корпоративного мира. Он основан на Bootstrap framework 3, поставляется с 3 домашними вариациями, интегрированной поверхностью Retina Ready и 600 шрифтами с короткими кодами drop и drag. Modx Templates Adorn — это тема с дизайнерским кодированием, совместимая с HTML и CSS3. Он поставляется с фрагментами SEO, макетом RTL, неограниченным количеством цветов, страницей с ошибкой 404, простой настройкой и редактируемыми параметрами. Club Cube — это замечательный ответ, который завораживает потенциального клиента и содержит 20 уникальных страниц.

Он имеет удивительные функции, такие как загрузчик Twitter, слайдер мультимедиа, платформа для SEO, настраиваемая анимация и многое другое. MDX Sharp — стильная и современная тема, созданная для бизнеса и корпоративных домов и их потребностей. Style — это профессиональная одностраничная тема, адаптирующаяся к портфолио, созданная специально для веб-сайтов портфолио и фрилансеров, чтобы показать то, что они хорошо видят.

Одностраничный шаблон MODX

Элегантный шаблон MODX

Адаптивный шаблон MODX

Корпоративный шаблон MODX

Шаблон Bootstrap MODX

Профессиональный шаблон MODX

Гибкий шаблон MODX

Настроить шаблон MODX

Шаблон Creative MODX

Фотография MODX шаблон

Business MODX шаблон

Скоро появится шаблон MODX

Последний шаблон Modx

Шаблон портфолио MODX

Как добавить плагин Contact Form на сайт ModX

Контактная форма Elfsight — это легко управляемый инструмент настройки и создания для создания контактов, ответов и всех других типов форм без навыков разработки.

Простая контактная форма для вашего сайта ModX

Elfsight Apps Contact Form — это простой и чрезвычайно настраиваемый плагин, позволяющий создавать любые типы контактных форм. Если вы ищете удобный инструмент, который повысит отклик посетителей и коэффициент конверсии — этот плагин определенно для вас!

Наши основные характеристики:

  • Премиум дизайн;
  • Адаптивный шаблон;
  • Защита Captcha включена;
  • Параметры всплывающих окон и на странице;
  • Двухминутная установка.

Оставайтесь на связи с клиентами 24/7, получайте отзывы на запрошенные электронные письма и привлекайте больше потенциальных клиентов для своего бизнеса!

Шаги добавления плагина

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

Акт 1. Создайте свой персональный модуль

Формовка модуля

Перейдите по этой ссылке (Live Editor), чтобы создать модуль. Выберите шаблон и настройки отображения, чтобы создать модуль, который лучше всего подойдет для вашего сайта.Или узнайте больше на странице продукта.

Получить код модуля

Завершающим этапом настройки формы Elfsight является получение html-кода продукта.

Акт 2.1: Добавьте полноразмерную контактную форму на страницу ModX

Закрепите контактную форму на одной из страниц.

Войти в админ панель ModX

Войдите на страницу администратора вашего сайта.

Выберите страницу для модуля

В левом меню на вкладке «Веб-сайт» выберите страницу для вставки модуля.

Установите модуль

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

Успех! Контактная форма установлена ​​

Посетите ваш сайт, чтобы проверить настройки.

Акт 2.2: Добавьте всплывающую контактную форму, чтобы следить за прокруткой посетителя

Всплывающая форма может быть добавлена ​​на все страницы вашего сайта.

Войдите в свой аккаунт на ModX

Для дальнейших шагов войдите в панель администратора.

Отрегулируйте шаблон

В меню слева найдите ссылку «Базовый шаблон».Введите его, вставьте код формы и сохраните результат.

Установка завершена!

Зайдите на свой сайт, чтобы увидеть результат.

Редактирование плагина через профиль Elfsight

После установки плагина все настройки формы могут быть изменены в Elfsight Apps. Изменение текстов, выбор другого вида или типа отображения и все другие корректировки, сделанные в редакторе, сразу будут отображаться на вашем сайте.

Также в личном профиле Elfsight вы можете бесплатно тестировать новые плагины ModX и размещать их на личном ресурсе.

Modx Blogging: Template chunks

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

Я не писал эти сообщения с точки зрения новичка, но я понимаю, что новички в Modx вполне могут это прочитать. Где это уместно, я перенаправлял читателей на отличную серию руководств Мэри по Revolution, написанную на Coding Pad. Если вы не уверены в чанках и в том, как их создавать, то этот урок Мэри должен прояснить ситуацию. Не стесняйтесь покинуть меня и вернуться, когда будете готовы.

Кроме того, стоит повторить, что большинство из вас не будет использовать тот же шаблон (Caprice), что и я, и вы не обязательно согласитесь с тем, как лучше всего использовать его в рамках Статей.Так и должно быть — у меня только один путь, а не и .

Чанки и шаблоны

Есть несколько элементов, которые повторяются на каждой странице веб-сайта:

  • жатка
  • нижний колонтитул
  • навигация
  • боковые панели
  • логотип

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

Итак, определив фрагменты кода ArticleTemplate, которые могут повторяться или не повторяться в других шаблонах, я создал следующие фрагменты:

архивы
 
комментариев
[[+ комментарии  включены: is = `1`: then =`

`]]
  
нижний колонтитул


 

Обратите внимание, что я еще не определился с окончательной компоновкой нижнего колонтитула.Это фактически заменитель того, когда я это делаю.

jscript.all
 

Это javascript, который может понадобиться на каждой странице. На каждую страницу может потребоваться добавить другие скрипты

последняя
 
ссылка
 
логотип
  Argy's
  
   

Мудрые слова?)

мета
 

На данный момент только одна строка — я добавлю к ней позже.

навигатор
 
поиск
  
      

Поиск

[[! SimpleSearchForm? & Landing = `6` & tpl =` rg.SimpleSearchFormTpl`]]
в соцсетях
 

Также неполный на данный момент — заполнитель.

тегов
 

Создав эти фрагменты, я теперь могу удалить код из ArticlesContainerTemplate и заменить его соответствующими фрагментами. Это приводит к следующему коду:

статейContainerTemplate


  [[$ rg.мета]]
  Блог Арги
  [[$ rg.link]]
  [[$ rg.jscript.all]]



 

    
    
    

  
  
    
    
     

Я технический писатель, разработчик и администратор баз данных с разнообразными навыками и интересами, о которых мне нравится писать. Надеюсь, вы найдете здесь что-нибудь интересное ...

[[$ rg.latest]] [[$ rg.tags]] [[$ rg.comments]] [[$ rg.archives]]

[[$ rg.footer]]

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

Результаты поиска


  [[$ rg.meta]]
  Блог Арги
  [[$ rg.ссылка на сайт]]
  [[$ rg.jscript.all]]



 

  
  
  
   
  
  
  
    
    

      
       

[[! SimpleSearch? & depth = `50` & ids =` 2` & idType = `Родители` & hideMenu =` 1` & highlightTag = `strong` & tpl =` rg.ArticlesSearch`]]

[[$ rg.footer]]

Я пока не буду перечислять ArticleTemplate, поскольку, когда я начал работать над ним, я понял, что необходимо поработать над разделами комментариев (создание и перечисление), которые управляются подключаемым модулем Quip.Это будет предметом 8-й части.

CSS3 Стилизованная контактная форма HTML5 с MODX и FormIt

Опубликовано: 01 авг 2016

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

Многие формы HTML5 недостаточно хороши!

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

К сожалению, многие формы, найденные в Интернете, далеки от совершенства. , в этом посте я перечислю несколько распространенных ошибок, допущенных с HTML-формами, улучшу их и, наконец, покажу, как создать красивую контактную форму HTML5 и использовать ее в MODX и FormIt .

Лучшие практики формы HTML5

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

Всегда используйте этикетку

В его отличном посте Всегда используйте этикетку от Адама Сильвера на Medium, смысл использования этикеток сделан великолепно.

Как сказал Адам:

Иногда дизайнеры упрощают форму, удаляя метки. Проблема в том, что минимальность не всегда означает простоту — что, безусловно, относится к этикеткам.Этикетки, по сути, являются неотъемлемой частью разработки простых в использовании форм.

Использовать метку очень просто, просто добавьте for = «userName» к тегу метки, где значение соответствует идентификатору входного тега: id = «userName» .



Другой вариант — заключить поле ввода внутрь тега метки:




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

Позже в этом руководстве мы также установим необходимую функцию в нашей конфигурации MODX FormIt.




Заместители отличные

Заполнитель может дать пользователю подсказку о том, что ему нужно заполнить.




Это отображается как:

Электронная почта

Типы импорта формы HTML5

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

Тип ввода Описание
URL Для ввода URL.Он должен начинаться с допустимой схемы URI (например, http: //, ftp: // или mailto :).
тел. Для ввода телефонных номеров. Он не требует определенного синтаксиса для проверки, поэтому, если вы хотите обеспечить определенный формат, вы можете использовать шаблон.
электронная почта Для ввода адресов электронной почты. По умолчанию используется только один, но если указан атрибут multiple, список адресов электронной почты, разделенных запятыми, является действительным.
поиск Поле ввода текста, стилизованное под поле поиска платформы.
номер Для числового ввода может быть любым рациональным целым числом или значением с плавающей запятой.
цвет Для выбора цвета.
диапазон Для числового ввода, но в отличие от числового типа ввода, значение менее важно.Он отображается пользователю в виде ползунка.
datetime Для ввода значения даты и времени, когда часовой пояс указан как GMT.
локальная дата и время Для ввода значения даты и времени, когда указанный часовой пояс является местным часовым поясом.
дата Для ввода даты (только) без указания часового пояса.
время Для ввода времени (только) без указания часового пояса.
неделя Для ввода даты, состоящей из номера недели-года и недели. номер, но без часового пояса.
месяц Для ввода даты с годом и месяцем, но без часового пояса.

Источник: Создание великолепных форм с помощью HTML5 — html5rocks.com

Кодирование нашей формы HTML5

Так какую форму мы собираемся создать? Хорошим примером может служить контактная форма со следующими полями:

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

Здесь вы можете увидеть очень простой пример контактной формы HTML, мы начнем с него и будем улучшать его шаг за шагом.





 

Шаги кодирования формы

  1. Обернуть поля внутри метки
    тегов

    Чтобы упростить структуру, мне нравится заключать поля в тег label . Он просто выглядит более структурированным, а функциональные возможности остались прежними.

  2. Обертывание этикеток в ярлыки
    p

    Отличный трюк, позволяющий легко получить базовый интервал и поля, - это обернуть поле (и метки вокруг него) тегом p , это даст разрывы строк и поля без необходимости добавлять ненужные div или теги в ваш форма.

  3. Добавить параметры радио, раскрывающегося списка и флажка

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

    Раскрывающийся список

    Для раскрывающегося списка (выбрать) он будет обернут тегом label и тегом p вокруг него.

    
    

    Это отображается как:

    Цифры: Выберите вариант...Один два три

    Опция радио

    Рекомендуется группировать параметры радио и флажков в группу, поскольку входы принадлежат друг другу. Для этого оберните метку теги и input в тег fieldset . После этого тег fieldset поддерживает тег legend , чтобы дать группированному набору заголовок.

    
    
    
    
     
    Опция флажка

    Очень похоже на параметры радио, параметры флажков сгруппированы внутри набора полей .

    
    
    
  4. Добавьте несколько заполнителей

    Поля ввода и текстовое поле позволяют использовать текст-заполнитель, чтобы дать пользователю подсказку о том, что ему нужно там заполнить.

  5. Установить в html

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

  6. Сгруппируйте разделы, чтобы обеспечить структуру

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

Окончательная закодированная форма HTML5

Мы закончили с нашей контактной формой HTML5! См. Полный код ниже.

Укладка формы

Теперь, когда наша HTML-форма структурирована, мы можем подумать о стилизации. В средней статье: Design Better Forms от Эндрю Койла перечислено множество отличных советов.

Ключевые вещи, на которых мы сосредоточимся:

  • хороший контраст

  • форма в одну колонку

  • этикетки с верхним выравниванием

  • хорошие интервалы и поля

  • флажки и параметры радио в вертикальном списке

  • очистить встроенные сообщения об ошибках

  • делайте поля ровно столько, сколько необходимо

Основные правила формы

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

  1. Добавить фон, границу и максимальную ширину
    
    
    
  2. стилизованных полей ввода

    Затем мы делаем поле ввода шириной 100% и добавляем границу, цвет, отступ и некоторые поля:

    
    
    
  3. Сообщения об ошибках стиля

    Обратная связь с формой и сообщения об ошибках важны для формы. Здесь я разделю два типа сообщений об ошибках:

    Сообщения об ошибках, создаваемые браузером

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

    Сообщение об ошибке Chrome, созданное требуемой настройкой
    Формы или сообщения об ошибках, сгенерированные PHP

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

Наша окончательная форма

HTML





 

Скачать код

Код, используемый для формы, можно найти в одном файле HTML, сюда также включен полный код формы MODX.

Использование формы в MODX с FormIt

Теперь, когда у нас есть контактная форма HTML5, можно использовать ее в MODX!

Не знаете MODX?

MODX - это самая быстрая, гибкая, масштабируемая и безопасная CMS с открытым исходным кодом. Я использую if более чем в 90% своих веб-проектов и очень рекомендую его.

Простые формы в MODX с использованием FormIt

FormIt - это сниппет динамической обработки форм для MODX. Он обрабатывает форму после отправки, выполняя проверку и последующие действия, такие как отправка электронного письма.

Найдите здесь документацию по FormIt.

Обновление нашей формы для работы с FormIt

Нам нужно изменить нашу форму, чтобы иметь возможность использовать FormIt в MODX.

  1. добавить тег фрагмента FormIt

    Нам нужно начать с небольшого фрагмента кода PHP (в терминах MODX он называется сниппетом). Этот фрагмент является конфигурацией нашей контактной формы FormIt. Разместите его над формой HTML.

    Давайте посмотрим на каждую настройку:

    • & hooks = `spam, email, redirect`
      Это шаги, которые FormIt предпримет при нажатии кнопки sumbit формы.
      # 1 проверьте, пусто ли поле защиты от спама
      # 2 отправьте электронное письмо
      # 3 перенаправляет пользователя на страницу благодарности

    • & emailTpl = `contact_form_tpl`
      Имя блока MODX (бит HTML-кода), который используется в качестве шаблона электронного письма, отправляемого FormIt.

    • & emailTo = `user @ example.com`
      Адрес электронной почты, на который FormIt отправляет электронные письма.

    • & redirectTo = `123`
      Идентификатор страницы (MODX дает каждому ресурсу / странице уникальный идентификатор) страницы, на которую отправляются пользователи после успешного использования формы.

    • & validate = `name: required,
      email: email: required,
      numbers: required,
      colors: required,
      sizes: required`
      Поля формы, которые должны быть проверены (подтверждены) FormIt перед отправкой электронного письма.

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

  2. Создание блока электронной почты FormIt

    Нам нужно установить шаблон для электронного письма, отправляемого с помощью формы, мы можем стилизовать его по своему усмотрению, но для простоты мы просто используем нестилизованный HTML в блоке под названием contact_form_tpl .

    Создайте новый блок с именем: contact_form_tpl и используйте показанный здесь код.

  3. Настройте код формы для MODX и FormIt
    • Добавьте общее сообщение об ошибке поверх формы внутри выходного фильтра MODX.

    • Задайте действие формы:
      [[~ [[* id]]]]]

    • Добавьте пустое поле ввода для защиты от спама:
      input type = "hidden" name = "nospam: blank" value = "[[+ fi.nospam]]"

    • Добавьте сообщение об ошибке формы в каждое поле внутри выходного фильтра MODX:
      [[! + Fi.error.name: notempty = ` [[! + fi.error.name]] `]]

    • Задайте для всех значений полей следующие значения:
      value = "[[[[! + Fi.field_name]]"

      Не забудьте заменить значение field_name на свой идентификатор поля!

    • Добавьте теги MODX в каждый параметр поля радио и флажка:
      [[! + Fi.numbers: FormItIsSelected = `the_option_value`]]

      Не забудьте заменить значение the_option_value на значение вашей опции!

    • Для каждого поля радио и флажка добавьте скрытое поле ввода:

    • Добавьте [] после каждого имени параметра поля для каждого поля радио и флажка.

  4. Наш полный код новой формы
  5. Создать страницу благодарности

    Наконец, нам нужна страница, на которую отправляются пользователи формы после отправки формы.

    Просто создайте новый ресурс MODX и назовите его Спасибо (или как хотите) не забудьте обновить настройку в своем теге FormIt, 123 должен быть идентификатором вашей страницы благодарности.
    & redirectTo = `123`

    Это был параметр в теге здесь.

Вот и все!
У нас есть красивая, современная контактная форма HTML5 в MODX. Я надеюсь, что этот урок был полезен, оставляйте любые комментарии и предложения ниже.

Скачать код

Код, использованный для формы, можно найти здесь в виде zip-архива.

.