Работа modx – Улучшаем процессы разработки в Modx Revo: работа с git, деплой с gulp, тестовые окружения

Первое, что я хочу отметить: способ построения шаблона показанный в этом уроке — это не единственный или единственноверный способ, это просто один из способов, которые я использую. 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++) и копируем его содержимое в наш новосозданный

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> нашего шаблона:

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

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

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

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

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

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

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

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

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

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

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

modx.ws

Краткий обзор основных действий в админке ModX

Система управления сайтом (CMS) – это оболочка, которая помогает владельцу сайта управлять им, внося необходимые изменения и дополнения, по-простому – административная панель.

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

Итак, предположим, что Вы уже прошли такие периоды создания ресурса, как:

• разработка дизайн-макета и его утверждение;
• верстка сайта;
• программирование;
• получение доменного имени;
• регистрация на хостинге и перенос сайта;
• запуск сайта.

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

Начало работы в административной панели

Чтобы начать заполнение, необходимо войти в административную панель (админку) сайта по адресу ВАШ ДОМЕН/manager. Ключи доступа (логин и пароль) к которой Вам уже должен был предоставить специалист, занимавшийся версткой и программированием. Вводите их в соответствующие поля и нажимайте кнопку “Войти”.

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

Если Вам требуется создать дочерний ресурс к категории или подкатегории, просто необходимо нажать правой клавишей мыши на родительский элемент и выбрать в выплывшем списке: “Создать дочерний ресурс”. После этого действия появится новый незаполненный так называемый каркас страницы. Удалить который можно нажав на него правой клавишей и выбрав из списка: “Удалить”. Сделать страницу неактивной, то есть отменить публикацию также можно кликнув на ней правой клавишей и затем нажав на пункт: “Отменить публикацию”.

Разновидности страниц и их шаблонов.

Стоит сказать, что страницы (ресурсы) бывают разными. Так, существуют страницы с фотогалереей, видео, видами товаров или услуг, текстовым и картиночным наполнением.

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

Фото-, видеошаблоны предназначены для добавления соответственно только картинок и видео с описанием.

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

Созданная текстовая страница требует заполнения информацией. Самые простые ее разновидности – это текст и картинки. Более сложные – метатеги и перелинковка.

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

Добавление фотографий

Итак, если перед Вами страница с возможностью добавления фотографий, то туда можно добавить фотографии (картинки) посредством нажатия кнопки “Вставить” и загрузки на сервер из памяти компьютера интересующей картинки. В открытом окне выбираем слева папку, куда загрузить картинку, затем жмем “загрузить” и выбираем путь в компьютере. После загрузки картинка появляется в списке. После этого дважды жмем на нее. Если вы все сделали правильно, то вы увидите картинку около поля ввода. В некоторых случаях, когда на странице несколько картинок, нажатие на (+) добавляет поле для вставки картинки, (-) удаляет его.

Редактирование текста

Практически каждая страница (шаблон) имеет поле для написания необходимого текста. 

Его можно вставлять, копировать, редактировать и удалять. Для этого над текстом размещены интуитивно понятные значки.

Давайте рассмотрим самые популярные действия:

• Выделить текст жирным. Для этого выделяем нужный контент и нажимаем кнопку B.
• Разместить текст по центру. Выделяем текст и жмем кнопку, схожую с той, которая есть в Microsoft Word – нарисованным текстом посередине.
• Вставка картинки в текст. Жмем на кнопку с картинкой в меню, загружаем фото с компьютера (нажав пункт “Адрес”) или берем уже имеющуюся на сервере и вставляем. Если параметры вставленной картинки Вас не устраивают, то всегда можно их изменить. Для этого выделяем картинку, жмем на кнопку с картинкой в меню и меняем ширину или высоту (важный момент: по умолчанию стоят настройки, которые сохраняют пропорции картинки. Так, если Вы измените высоту, то автоматически изменится ширина и наоборот), а также выбираем расположение картинки относительно текста (слева, справа, вверху, внизу).
• Также стоит обратить внимание на описание к картинке. Этот пункт лучше заполнить, так его очень любят учитывать поисковики при картиночном ранжировании.
• Вставка ссылки в текст. Для этого выделите нужный текст, нажмите на высветившуюся кнопку в виде знака бесконечности и вставьте в появившееся поле путь (URL) к ссылке.

Изменение других параметров.

Большинство остальных параметров (они индивидуальны) заполняется интуитивно понятно, не будем останавливаться на них. Заполнение таких пунктов, как Title, Description, Keywords лучше доверить СЕО-специалистам. После окончания работы со страницей не стоит забывать нажать сохранить+закрыть (закроет конкретную страницу) или сохранить+продолжить (сохранит страницу и оставит Вас на ней же). Вуаля, после проделанной работы и ее сохранения можно увидеть результаты на страницах сайта в Интернете!

Напоследок напомним о недооцененной пользе горячих клавиш! CTRL+A – выделить весь текст, CTRL+C – скопировать выделенный текст, CTRL+V – вставить скопированный или вырезанный текст, CTRL+Z – отменить последнее действие.

a-site.by

Система управления сайтом, разработка сайта на MODX CMS, програмирование на MODX

Как правильно использовать название “MODX” на письме?

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

Как правильно произносится MODX?

На русском языке наиболее правильно MODX произносится как “мóдэкс”. Любые другие варианты, например, модикс, мод-икс, модыкс и тому подобное являются некорректными. Старайтесь избегать неправильного произношения.

Что мне потребуется для запуска MODX?

MODX работает на разнообразных системах программного обеспечения. Однако для достижения наилучшего результата мы советуем использовать последние актуальные версии языка программирования PHP, базы данных MySQL и веб-сервера Apache. Для работы дружественных адресов страниц (friendly URLs) наиболее удобный и быстрый путь – это использование веб-сервера Apache с включенным модулем mod_rewrite.

Как быстрее всего научиться работать с MODX?

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

Сколько стоит MODX?

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

Как я могу добавить исправление ошибки (бага) в код проекта?

Если сообщение об ошибке еще не существует для специфической проблемы, пожалуйста, создайте запрос в нашем багтрекере для проектов Revo или Evo. Вы можете отправить пулл реквест (pull request) в аккаунт MODX на Github. Как и для многих других Open Source проектов, отправка вашего кода должна быть совмещена с подтверждением лицензионного соглашения (CLA, Contributors License Agreement).

Как я могу получить возможность для совершения коммитов?

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

Насколько хороша система управления сайтами MODX?

MODX настолько хороша, что Чак Норрис съеживается в страхе.

Должен ли я уметь программировать, чтобы использовать MODX?

Чтобы работать с сайтом ежедневно, определенно нет. Если вы умеете работать с Microsoft Word, то обычно в течение часа или даже менее того вы сможете научиться отлично работать в MODX с теми сайтами, которые были установлены для “обычных” редакторов и конечных пользователей. Однако для установки и настройки сайта вы должны знать и уметь применять базовые блоки веб-разработки: HTML, CSS, JavaScript, а также иметь опыт в ручной разработке сайтов.

Могу ли я использовать мою любимую JavaScript библиотеку в MODX?

Безусловно да, поскольку MODX не накладывает абсолютно никаких ограничений на то, что выводится в клиентской части (Front End).

Насколько большой сайт я могу построить на MODX?

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

Почему существует несколько версий MODX?

• 0.9.6.x — первоначальная основа программного кода, которая была запущена с первого стабильного релиза в виде версии 0.9.0 в конце октября 2005 года. Больше не поддерживается.
• Evolution — очищенный и обновленный дистрибутив версии 0.9.6.x с новыми соглашениями и терминологией, которые были приближены к нашему полностью переписанному релизу Revolution.
• Revolution — это полностью объектно-ориентированная система, которая находилась в разработке почти 3 года до ее начального релиза. Система предназначена для ликвидирования найденных в оригинальном коде ограничений с помощью действительно рекурсивного парсера и для преодоления теоретического потолка в 5000 документов в MODX Evolution.

Могу ли я обновить MODX с 0.9.6.x/Evolution на Revolution на существующем сайте?

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

Существует ли в MODX система ревизий и отмены изменений? Рабочий процесс публикаций?

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

Может ли MODX поддерживать одновременно несколько сайтов из одной установки?

Да, хотя методы различаются для каждой версии MODX. Инструкции для поддержки нескольких сайтов в Evolution/0.9.6.x можете получить на форумах. Для поддержки нескольких сайтов в Revolution читайте статью Wiki.

Поддерживает ли MODX мультиязычность?

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

Самое новое о MODX

modx.ru

Урок 1. Вступление MODX

Не знаю кто сказал: «Самый лучший способ разобраться в чем-либо – это написать об этом книгу». Руководствуясь этим принципом и некоторыми другими соображениями решил создать небольшой курс для начинающих изучать MODX Revolution. Это первый урок из запланированной серии обучающих уроков по MODX Revolution для новичков. За основу взял курс http://codingpad.maryspad.com/category/modx/ на английском языке, так что если где-то увидите внутри кода ссылки на этот сайт, не удивляйтесь. Я пока что отрабатываю локально все эти элементы и чтобы не тратить время на создание скриншотов, решил брать изображения из блога Мэри и сделать его перевод в силу своих возможностей. Предупреждаю сразу, что гуглопереводчиком не пользуюсь, если есть ошибки, то они лично мои… Буду благодарен за любые советы, замечания и пожелания по данному курсу.

Итак, о чем пойдёт речь: MODX Revolution это новая ветка в MODX CMS, которая построена на асболютно другой кодовой базе, чем MODX Evolution. Исходя из слов основателя Райена Треша (Ryan Thrash):

«MODX Revolution — это полностью новый MODX. Он содержит в себе душу того, что делает MODX великой платформой для построения пользовательских вебсайтов и больших приложений и в то же время позволяет делать большее для их улучшения. MODX Revolution 2.0 является более сильной CMS или CMF и может справляться с сайтами с бОльшим количеством вложенных категорий и предлагает большие возможности для работы с множеством сайтов и субдоменнов из одной инсталяции — так называемая «мультисайтовость» MODX Райен Треш (Ryan Thrash)

Уроки MODX Revolution

Мы начнем с самого начала, с установки MODX Revolution и перейдем к построению простого сайта.

html:5>(header>div#banner>(a[href=page$.htm]>img[src="path$.jpg"])*3)+(aside>ul>li>p*3>lorem)+(article.module*4>p*2>lorem)+footer>ul>li>a[href="#"]*5