Шаблон для modx: Урок 4. Работа с шаблонами в MODx Revolution MODX

Урок 4. Работа с шаблонами в MODx Revolution MODX

Добро пожаловать на 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 различных цветовых стиля, я буду использовать синий, а вы выбирайте какой вам нравится. Ну что ж начнем!

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

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 и только потом перенести отредактированный код исправленного шаблона, но исходя из целей данного урока, все эти действия проведём внутри редактора

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дополнительные источники:

Шаблоны — Элементы | MODX документация

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

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

Думайте о шаблоне как о доме. Ваши Ресурсы содержание, то есть человек. Человек может иметь много разных домов, но одновременно жить только в одном доме.

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

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

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

<html>
    <head>
        <title>[[*pagetitle]]</title>
        <meta name="description" content="[[*description]]" />
    </head>
    <body>
        <h2>[[*longtitle]]</h2>

        Идентификатор страницы: [[*id]]<br />
        Вступительный текст (резюме): [[*introtext]]<br />
        Название меню: [[*menutitle]]

        <hr />

        [[*content]]
    </body>
</html>

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

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

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

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

Шаблоны могут содержать любые теги, в том числе Переменные шаблона TV, Чанки, Сниппеты, и другие.

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

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

<title>[[*pagetitle]]</title>

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

<body>
    [[*content]]
</body>

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

<div>
    [[*introtext:stripTags:ellipsis=`400`]]
</div>

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

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

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

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

<div>
    [[*bioPhoto]]
</div>

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

Смотрите также¶

Свежие шаблоны CMS MODX для разработчиков

CMS MODX является дружелюбной системой для разработчиков, так как она представляет собой заслуживающий доверия CMF (Content Management Framework). Примечательно, что MODX также подходит для дизайнеров:

WanChai является MODX темой для адаптивного одностраничного портфолио, построенного на Bootstrap 3 с чистым и современным дизайном. Она имеет настраиваемую секцию портфолио с расширяющимся просмотром и CSS3 анимацией при пролистывании:

Основанный на сетках (Twitter Bootstrap Grid System) одностраничный адаптивный CMS MODX шаблон для цифрового агентства, фотостудии, малого бизнеса или фрилансеров. Возможности STYZO включают в себя корректный код HTML5 и CSS3, полную кастомизацию в системе MODX, собственные анимации, настраиваемое портфолио, плагин Cube Portfolio, AjaxForm, блог, прейскурант и плагин JQuery Cycle:

Глянцевый, красочный, радующий глаз одностраничный дизайн, обрабатывающий большую часть переменных шаблона MODX и параметры темы. Построенная на основе Bootstrap 3.0 и разработанная с помощью LESS, эта тема снабжена набором опций, который позволяет контролировать каждый аспект сайта со стороны сервера:

Шаблон ClubCube – это идеальный выбор для ночного клуба. Его современный, запоминающийся дизайн незамедлительно привлекает внимание.

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

ClubCube является основанным на сетке (Twitter Bootstrap Grid System), адаптивным HTML5 шаблоном. Он позволяет реализовывать функционал, который будет:

• сообщать о событиях;
• публиковать фотоотчеты;
• выполнять бронирование;
• просматривать меню:

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

Тема имеет 3 шаблона, настраиваемые поля для изображений, файлы css/js/image и упакована в transport.zip. Поддерживает меню Wayfinder и Formlt для фрагментов формы обратной связи. В теме есть два меню: первое – это меню прокрутки для одностраничного сайта, а второе – для многостраничного (сниппет Formlt):

Является современной одностраничной анкетной/персональной темой для MODX CMS CMF, построенной на Bootstrap 3 с большим количеством опций для настройки. В ней есть раздел резюме с чистой разметкой и анимированными графиками, секция портфолио и раздел каталога. Вместе со сниппетами, которые поставляются с шаблоном, легко создавать собственный контент, который согласуется со стилем темы:

TREDD STUDIO представляет собой одностраничный адаптивный MODX шаблон на основе сетки (Twitter Bootstrap Grid System) для цифрового агентства, фотостудии, малого бизнеса или фрилансеров. Возможности TREDD STUDIO включают в себя: корректный код HTML5 и CSS3, полную настройку в системе MODX, настраиваемое портфолио, прейскурант, плагин JQuery Cycle:

Основанный на сетке (Twitter Bootstrap Grid System) одностраничный адаптивный CMS MODX evolution шаблон для музыки и музыкальных групп. Он включает в себя отличные функции и графику:

В теме есть настраиваемые поля для изображений и в разделе портфолио, и в разделе команды, контактная форма Formlt и поддержка меню Wayfinder. Эта тема отлично подходит для сайтов-портфолио, целевых страниц, веб-приложений и презентации творческих организаций. Уникальные функции и современный дизайн. Лучше всего подходит для стартапов:

Многофункциональная одностраничная MODX тема для целевой страницы приложения или демонстрации продукта.

Построена с помощью фреймворка Bootstrap 3, который включает в себя адаптивную, ориентированную на мобильные устройства, систему сеток. Соответствующим образом она масштабируется до 12 колонок по мере увеличения размера окна просмотра:

Является чистой, плоской, стильной CMS MODX темой «сайта в разработке» с работающей формой подписки на новости для формирования аудитории. С помощью панели настроек темы MODX можно настроить почти любой аспект новой страницы. Смотрите скриншот ниже:

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

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

Полностью адаптивный макет, который прекрасно подстраивается под разрешения мобильных устройств, планшетов и ПК:

Состоит из одного шаблона, настраиваемых полей для большей части контента, css/js/image файлов и упакован в файл transport.zip. Поддерживает сниппеты Wayfinder и Formlt (меню и форма контактов):

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

Данная публикация является переводом статьи «Latest CMS MODX Templates in 2016 for Developer» , подготовленная редакцией проекта.

Как установить шаблон на MODx. Детальная инструкция.

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

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

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

Мы с вами будем разрабатывать сайт на основе шаблона Retina — Free Template от производителя – chocotemplates. Скачать его можно по этой ссылке – ссылка на шаблон.

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

Архив включает в себя следующие файлы.

Index.html – этот файл нам не нужен, разработчики сделали его, чтобы демонстрировать работу шаблона на различных устройствах.

А папка «defaul» в свою очередь имеет вложение директории.

В папке «css» —  хранятся стили и изображения, используемые в данной теме (папка «images»).

В папке «js» — содержатся файлы библиотеки jquery, а также скрипты подключения слайдера на главной странице сайта.

Файл home.html – основной файл html шаблона именно его мы и будем использовать.

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

Непосредственная работа с движком MODx

После того, как вы разберетесь со структурой шаблона, можно приступать к работе с системой. Все шаблоны для MODx хранятся в папке /assets/templates/, именно туда нам и нужно залить папку с шаблоном. Директорию я назову «Retina». В эту папку заливаем все файлы которые находятся в директории «default». У вас должно получится следующее.

Теперь переходим в административную панель сайта в раздел и авторизуемся. Сделать это можно по адресу http://вашсайт.com/manager.

После авторизации вам нужно перейти в раздел «Элементы» – «Управление элементами» – Вкладка «Шаблоны».

Сейчас там есть шаблон с демо данными, его мы трогать не будем, а чуть ниже размещен шаблон под именем – «Minimal Template». Именно его мы и будет начинать править.

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

Заполняем два поля:

• имя шаблона;
• описание.

Чуть ниже, в поле – «Код шаблона HTML», нужно вставить код страницы index.html, которая размещена у вас на сервере по адресу — /assets/templates/retina/home.html.

Вот как это сделал я.

После чего в верхнем правом углу жмем кнопку «Сохранить». И идем на сайт смотреть, что у нас получилось.

Как видите, структура сайта подключилась, стили и скрипты не подключены. Дело в том, что у нас поменялся путь ко всем этим файлам. Сейчас мы это исправим.

Для этого опять переходим в админ панель в раздел «Элементы» – «Управление элементами» – Вкладка «Шаблоны» и нажимаем редактировать шаблон «Главная».

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

<base href="[(site_url)]" />

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

Маленькое отступление – на CMS MODx, придется много работать с кодом, поэтому советую вам поставить редактор Notepad++, он отлично подойдет для правки шаблонов.

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

<img src="css/images/mac-img.png" alt="" />

То в MODx нужно изменить его на вот такую конструкцию.

<img src="/assets/templates/retina/css/images/mac-img.png" alt="" />

То есть во всех путях добавляем приставку:

/assets/templates/retina/

Если вы называли папку шаблона по другому, то «retina» нужно изменить на ваше название.

Для облегчения работы можете использовать в редакторе Notepad++ поиск по слову «src». Так вы сможете проверить, все ли элементы подключены.

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

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

Подписывайтесь на обновления, чтобы ничего не пропустить.

MODX — Шаблоны — ИТ Шеф

В этой статье рассмотрим такой элемент CMF MODX Revolution как шаблон.

Что такое шаблон

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

Подключение шаблона к ресурсу осуществляется через поле «Шаблон».

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

Понять назначение шаблона и то, как он связан с ресурсами очень просто, если представить шаблон домом, а ресурс человеком, живущим в этом доме. Дом, так же как и шаблон (страница) состоит из множества деталей (крыша — шапка страницы, стены – каркас страницы, основная часть фасада – основное содержимое страницы, подвал – нижняя часть страницы и т.д.).

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

Внимание: Каждый ресурс (страница) в MODX Revolution может использовать в качестве своего вывода только один шаблон. Т.е. MODX не разрешает для вывода ресурса одновременно использовать несколько шаблонов. Но в любое время ресурсу можно назначить другой шаблон. Для этого необходимо на странице редактирования ресурса выбрать нужное значение из раскрывающего списка «Шаблон» и нажать на кнопку «Сохранить». После этого вывод ресурса уже будет осуществляться на основании указанного (другого) шаблона.

Где находятся шаблоны в админке

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

Шаблоны состоят из полей: имя, описание, иконка, код шаблона (html) и др.

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

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

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

1. Открыть в левой панели админки вкладку «Элементы».
2. Нажать на значок «+» напротив заголовка «Шаблоны».
3. В поле имя ввести название шаблона (например, Шаблон1).
4. В поле код шаблона (HTML) ввести необходимое содержимое.
   Например:

   <html>
     <head>
       <title>[[*pagetitle]]</title>
       <meta name="description" content="[[*description]]"/>
     </head>
     <body>
       <h2>[[*longtitle]]</h2>
       ID (идентификатор) страницы: [[*id]]<br>
       Аннотация (введение): [[*introtext]]<br>
       Заголовок ресурса в меню: [[*menutitle]]
       <hr>
       [[*content]]
     </body>
   </html>
   

   Обратите внимание на специальные теги: [[*pagetitle]], [[*description]], [[*longtitle]] и др. Они обрабатываются парсером только тогда, когда браузер пользователя запросит у MODX ресурс, имеющий этот шаблон. Когда это случиться все специальные теги ([[*полеРесурса]]) будут заменены на значения соответствующих полей текущего (запрашиваемого) ресурса.
5. Сохранить шаблон посредством нажатия на соответствующую кнопку.

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

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

Редактирование шаблона в админке осуществляется следующим образом:

1. Открыть в левой панели админки вкладку «Элементы».
2. Раскрыть содержимое раздела «Шаблоны», нажав на значок треугольника.
3. Нажать левой кнопкой мыши на название необходимого шаблона.
4. Внести изменения в необходимые поля шаблона.
5. Нажать на кнопку «Сохранить».

Где хранятся шаблоны

Шаблоны MODX по умолчанию хранятся в таблице базы данных modx_site_templates (modx — это префикс для таблиц, назначаемый во время установки системы).

Начиная с версии MODX 2.2.x появилась также возможность хранить код шаблона в файле.

Чтобы это сделать необходимо на странице создания/редактирования шаблона выполнить следующее:

1. Установить галочку в поле «Статичный».
2. Выбрать из раскрывающего списка «Источник файлов для статичного файла» базовый каталог. Базовый каталог — это каталог относительно которого будет указываться расположение статичного файла.
3. Указать в поле «Статичный файл» расположение файла относительного базового каталога.
4. Нажать на кнопку «Сохранить».

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

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

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

Получение значений полей ресурса в шаблоне осуществляется посредством следующего синтаксиса:

[[*имяПоля]]

Список доступных полей ресурса можно посмотреть здесь. Например, вывести значение поля pagetitle текущего ресурса в тег title:

<title>[[*pagetitle]]</title>

Например, вывести содержимое текущего ресурса:

[[*content]]

Теги, предназначенные для вывода значений полей ресурса, могут также как и другие теги MODX, иметь фильтры вывода. Например, выведем значение поля «introtext» в блок div с классом intro, используя 2 фильтра. Первый фильтр вывода будем использовать для исключения из содержимого поля introtext любых HTML-тегов. Второй фильтр будем использовать для того чтобы вводить на экран не всё содержимое этого поля, а только первые 200 символов. Если данное поле будет иметь большее количество символов, то в конце строчки отобразить знак многоточия (…).

<div>
[[*introtext:stripTags:ellipsis=`200`]]
</div>

TV-переменные в шаблонах

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

TV-переменные — это дополнительные поля, которые может иметь ресурс. Привязываются TV-поля к ресурсу через шаблон. MODX позволяет добавить к ресурсам бесконечное число дополнительных полей (TV-переменных) посредством шаблона.

Например, необходимо добавить ко всем ресурсам, имеющим шаблон «city», дополнительное поле photo. Чтобы это осуществить необходимо выполнить следующие действия:

1. Необходимо создать TV-переменную photo.
2. Установить этой переменной на соответствующих вкладках в качестве типа ввода и вывода необходимое значение. Например, изображение.
3. На вкладке «Доступно для шаблонов» установить галочку напротив шаблона «city».

После этого у ресурсов, имеющих шаблон «city» появится дополнительное поле.

Для того чтобы вывести значение поля (TV-параметра) city в шаблоне необходимо использовать следующую конструкцию:

[[*photo]]

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

Создание шаблонов на MODx Revolution

MODx – проект с открытым (OpenSource) кодом и продуманной до мелочей архитектурой. Система управления сайтом MODx бесплатна и позволяет решать любые задачи, воплощать даже самые сложные решения для интернет-проектов. На MODx можно построить сайт любой сложности и добавить к нему практически любые функции. MODx Revolution успешно адаптируется под нужды потребителя и является полностью оптимизированной под поисковики. Разве нужно что-то еще для успеха вашего бизнеса в сети?

В чем залог дружбы владельца сайта с MODx Revolution

Разработка шаблона на MODx – это правильное решение, если вы хотите использовать современные технологии уже сейчас. Шаблон на модикс открывает возможности не простой CMS, а целой среды для разработки любого функционала для сайта – CMF. MODX отличает масса преимуществ как для разработчиков, так и для пользователей.

Название системы говорит само за себя: с MODx Revolution вы уже на шаг впереди конкурентов. Заказывая разработку шаблона для MODx, оставьте все свои сомнения и приготовьтесь оценить возможности MODx в своем шаблоне!

• По стандарту. MODx позволяет верстать привычные HTML 4.0 или HTML5+CSS3 шаблоны, а не выдумывать подходящее системе «нечто». Верстка шаблона на MODx будет выполнена по последним стандартам.
• Технологичность. MODx предоставляет целый набор API-функций, которые соответствуют последним тенденциям (и все это бесплатно!). Пока функции можно использовать в веб-приложениях, а в скором времени они станут частью админ-зоны, в том числе и в вашем шаблоне для MODx.
• Завидная гибкость. Гибкий код и продуманная архитектура системы модикс позволяют разработчикам создать шаблон сайта, о котором вы мечтали.
• HTML-редакторы. В MODx все html-редакторы можно установить как плагины (FCKeditor, Textile, Markdown, TinyMCE и др.).
• И это еще не все! К любым документам в MODx можно добавлять самые разные параметры, что открывает возможности для разработки любых сайтов. Если вы планируете заказать разработку шаблона на modx для своего сайта, то одновременно решите проблему нехватки полей – нужные поля вы легко сможете добавить.
• Превращения. В  MODx можно легко преобразовать CSS-файлы, изображения и java-скрипты в XML, PDF, Excel или Word-документы.

MODx + SEO

MODx Revolution и SEO идеально дополняют друг друга. MODx обладает всеми инструментами для SEO, в результате чего ваш сайт точно попадет в число любимчиков поисковых машин. (Он попадет скорее если вы закажите шаблон для MODx у нас, так как он 100% оптимизирован, в отличие от бесплатных) Разработчики модикс называют ее бесплатной SEO-системой, и на то у них есть основания:

• MODx делает URL дружественными для пользователей и поисковиков. Подружить всех удается благодаря автоматическому добавлению псевдонимов в URL и их автоматической проверке на ошибки.
• MODx делает управление мега-тегами легким и незамысловатым занятием. Настраивать набор мега-тегов и ключевых слов вы сможете сами, причем несколькими способами. С шаблоном на модэкс, разработку которого вы возможно доверите нам, поисковая оптимизация сайта будет в самых надежных руках – в ваших.

Сколько стоит верстка шаблона на MODx? Какой срок разработки шаблона для MODx?

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

Как заказать разработку шаблона к MODx?

• Первое что нужно сделать – это дизайн. Если у вас уже есть дизайн для MODx, то можете переходить к п. 2., предварительно убедившись, что он соответствует требованиям CMS MODx, а весь функционал можно легко внедрить. Нестандартные элементы могут быть, а насколько дороже и дольше они сделают разработку шаблона, узнайте с помощью калькулятора.

  Вы решили заказать разработку MODx темы для своего будущего сайта, но у вас еще нет дизайна? Мы и тут готовы вам помочь! Мы много лет сотрудничаем с одной из ведущих веб-студий TEIL и очень довольны результатом. Так довольны, что рассказываем об этом при каждом удобном случае (вот и сейчас не смогли удержаться). Хотите качественный дизайн? Так посмотрите портфолио и закажите дизайн для MODx! Пока дизайн будет в разработке, не тратьте время зря — придумывайте, как потратить свою сумашедшую выручку и что еще продать толпе покупателей. 
  Для сведения: дизайн xmarkup.ru делали именно они:)

• Напишите нам о своем желании заказать создание шаблона, предоставив макеты нужных вам страниц. Все необходимые файлы вы можете отправить любым удобным для вас способом: личный кабинет, форма обратной связи, скайп ( ############_support ) или почта (support@###############).

Стоимость работ по верстке и разработке шаблона для MODx легко узнать, воспользовавшись специальным калькулятором.

Где два, там и три!

Если вы заказываете у нас верстку и создание шаблона на CMS MODx, то вас ждет приятный бонус: установка сайта на хостинг. Мы будем крайне щедры в рекомендациях относительно выбора подходящего хостинга и поможем с настройкой. Для работы нам понадобятся FTP и доступы к Базе Данных (БД).

Поддержим вас

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

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

Что такое шаблон в MODX Evo ✈ Evolution CMS

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

Шаблон в MODX — основная неизменяемая часть страницы сайта, которая определяет ее оформление. Шаблон не требует особого синтаксиса и представляет собой обычный HTML-код (а возможно XHTML или другой) с вызовом необходимых чанков, параметров и сниппетов.

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

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

Все шаблоны находятся в следующем месте:

Ресурсы → Управление ресурсами → Шаблон
Список шаблонов выглядит следующим образом:

Список шаблонов MODX EVO

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

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

Назначение полей

Имя шаблона — используется в списке выбора шаблона. Также может понадобиться для некоторых операций сниппетов. Можно использовать как английский так и русский язык, а также дефис (-), знак подчеркивания (_) и пробел.

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

Создать категорию — позволяет выбрать существующую категорию, в которую будет помещен шаблон. Категория позволяет отделить шаблон от остальных в общем списке. Если ни одна категория не выбрана, то шаблон попадет в общую категория Без категории.

Новая категория — если в списке существующих категорий нет подходящей, то можно создать ее просто написав название в этом поле.

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

Код шаблона (html) — сюда размещается само содержимое шаблона.

Сохранение

Обратим внимание на возможности при сохранении. Для этого есть следующие управляющие кнопки:

Кнопки управления шаблоном в MODX EVO

С основными кнопками все понятно:

Сохранить — создаст новый шаблон

Отмена — вернет нас в список шаблонов без сохранения результата.

Сделать копию — появляется только в режиме редактирования. Смотрите пункт Создание копии шаблона.

Удалить — появляется только в режиме редактирования. Смотрите пункт Удаление шаблона.

Но MODX позволяет определить еще действие после сохранения шаблона:

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

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

Закрыть — после сохранения мы вернемся в общий список шаблонов.

Создание копии шаблона

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

Кнопки управления шаблоном в MODX EVO

На всякий случай система попросит от вас подтверждение:

Копия шаблона в MODX EVO

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

Копия создается сразу после подтверждения, поэтому если вы нажмете отмену, то в списке шаблонов копия все равно останется.

Удаление шаблона

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

Кнопки управления шаблоном в MODX EVO

После этого система попросит от вас подтверждение:

Удаление шаблона в MODX EVO

Внимание! Шаблоны удаляются полностью и возможности их восстановить нет.

Шаблон по умолчанию

При создании документа автоматически предлагается шаблон по умолчанию (если отключен плагин Inherit Parent Template). Удобнее всего когда предлагается именно тот шаблон, который необходим чаще всего. Для настройки шаблона по умолчанию необходимо выполнить следующие действия:

Переходим в настройки системы управления:
Инструменты → Конфигурация → Сайт
Находим параметр Шаблон по умолчанию и меняем на нужный
Сохраняем настройки.

FAQ

Есть ли какие-то ограничения на шаблоны дизайна для сайта?

Абсолютно никаких. MODX позволяет реализовать любой дизайн.

Где можно взять готовые шаблоны?

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

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

Что такое переменная шаблона? ¶

Переменная шаблона (TV) — это настраиваемое поле , или, более конкретно, это настраиваемое поле для ресурса MODX. Телевизоры используются для расширения атрибутов по умолчанию, доступных для ресурса (например, для страницы или веб-ссылки). Обычный ресурс MODX имеет определенное количество полей по умолчанию: заголовок страницы, контент, описание и т. Д. Если вам нужно добавить несколько настраиваемых полей на свои страницы, например.грамм. вторую область содержимого или раскрывающийся список названий месяцев или любой другой бит настраиваемых данных, вы делаете это, добавляя переменную шаблона в свой шаблон. MODX позволяет иметь практически неограниченное количество телевизоров.

Почему она называется переменной шаблона В других системах управления контентом их называют просто «настраиваемыми полями», так почему же MODX называет эти «переменные шаблона»? Что ж, каждый раз, когда вы настраиваете контент, у вас также будут настраиваемые шаблоны. В ваших шаблонах MODX уже есть заполнители для содержимого или longtitle , потому что это встроенные поля для стандартной «страницы» MODX; информация и шаблон, используемые для отображения этой информации, идут рука об руку.Если у вас есть форма менеджера с полем для ввода особой даты, то логично, что ваш HTML-шаблон, который вы используете для отображения этой страницы, также будет иметь немного, предназначенное для отображения этой даты. Точно так же вы не стали бы создавать HTML-шаблоны с div и таблицами для форматирования битов данных, если бы менеджер не предложил какой-либо способ редактирования этих данных. Таким образом, контент неумолимо привязан к шаблону, отсюда и имя Template Variable .

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

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

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

Допустим, у нас есть телевизор с именем «bio», который представляет собой текстовое поле, которое мы создали. Мы назначили его нашему шаблону «Страницы биографии» и хотим показать его на нашей странице.Для этого мы просто поместим этот тег в наши шаблоны:

  [[* биография]]
  

Чтобы добавить телевизор на страницу, вы должны вспомнить его шаблон (это переменные Template , помните?). Убедитесь, что вы определили телевизор и прикрепили его к шаблону, который вы используете. См. Страницу «Создание переменной шаблона».

Расширенное использование¶

также могут быть Свойства. Допустим, у вас есть телевизор под названием intromsg со значением:

Здравствуйте, [[+ name]] , у вас [[+ messageCount]] сообщений.

Вы можете заполнить данные по телефону:

  [[* intromsg? Name = `George` & messageCount =` 123`]]
  

Что выведет:

Здравствуйте, Джордж, у вас 123 сообщения.

также являются отличным инструментом для применения в телевизорах. Допустим, вы хотите ограничить вывод телевизора 100 символами. Вы бы просто использовали выходной фильтр ‘limit’:

  [[* bioMessage: limit = `100`]]
  

См. Также

1. Создание переменной шаблона
2. Привязки
   1. CHUNK Binding
   2. КАТАЛОГ Binding
   3. Привязка ФАЙЛА
   4. Привязка INHERIT
   5. Привязка РЕСУРСА
   6. ВЫБРАТЬ привязку
3. Типы входных переменных шаблона
4. Типы выходных переменных шаблона
   1. Дата ТВ Тип вывода
   2. Разделитель Тип выхода ТВ
   3. Тип вывода ТВ-тега HTML
   4. Тип вывода изображения на ТВ
   5. URL-адрес ТВ-выхода
5. Добавление произвольного типа ТВ — MODX 2.2 6. Создание поля множественного выбора для связанных страниц в шаблоне 7. Доступ к значениям переменных шаблона через API

Общие теги шаблона — синтаксис тега

На этой странице перечислены наиболее часто используемые теги MODX Revolution в помощь любому, кто конвертирует макеты HTML / CSS в шаблоны MODX. Их часто называют «тегами» или «заполнителями» (а иногда и «шаблонными переменными»), поэтому мы упоминаем эти термины здесь в качестве помощи при поиске, хотя технически они являются , а не заполнителями или шаблонными переменными: это MODX теги.Да, это может сбить с толку новичка, поэтому просто помните, что существуют разные разновидности этих тегов, каждый со своим назначением и названием. Заполнители задаются в коде и отображаются с тегами-заполнителями. Переменные шаблона — это дополнительные поля содержимого ресурса, созданные пользователем. Их можно рассматривать как настраиваемые поля. Ни заполнители, ни переменные шаблона не устанавливаются ядром MODX заранее.

Теги поля содержимого ресурса по умолчанию¶

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

Эти теги представляют собой системные настройки, которые можно редактировать в меню Система -> Системные настройки .

Все теги

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

  

    


<тело>
    

        [[*содержание]]
    


  

  

    


<тело>
    <раздел>
        

            [[*содержание]]