Готовый шаблон на modx revolution. TV-переменные в шаблонах
После установки CMS MODx, первым что нужно сделать: это создать тему . Конечно, можно воспользоваться демонстрационным шаблоном, добавив его при установке CMS,
но у нас ставится другая задача: сделать уникальный шаблон для MODx самим .
Для этого перейдем в Админ панель/элементы/управление элементами/шаблоны. Здесь, имеется ссылка: Новый шаблон . Переходим по этой ссылке:
В этой вкладке, мы и будем создавать новый уникальный шаблон для сайта на CMS MODx.
Итак, мы имеем четыре поля для введения описания шаблона MODx:
- Поле имени шаблона. Так как мы создаем главную страницу назовите шаблон index_1 .
- Описание шаблона. Напишите краткое название Вашего сайта, у меня это будет: Лучшие бесплатные CMS интернета .
- Существующие категории. Здесь можно выбрать категории: Content, Demo Content, Login, Forms… Выбираем категорию Content .
- Поле новая категория. Оставляем это поле пустым.
Как, Вы уже успели заметить, в этой вкладке все поля пустые, и самое главное поле: Код шаблона (HTML) MODx , тоже пустое, его нам и предстоит заполнить HTML -кодом. Не переживайте, знания языка гипертекстовой разметки нам не пригодится, писать в ручную HTML - код мы не будем. Для создания шаблона MODx мы воспользуемся специальной программой.
Создание страницы при помощи программы FrontPage 2003.Для написания HTML шаблона мы воспользуемся визуальным html-редактором для быстрого создания сайта и Web-страниц:
Итак, приступим к созданию страницы при помощи программы: FrontPage 2003
.
После установки и запуска программы, откройте вкладку: Файл/создать
, у Вас появляется меню следующего вида:
Нажмите ссылку: Создать пустую страницу
. Появляется HTML-код пустой страницы - это необходимые теги без которых страница даже пустая отображаться не будет.
В нижнем левом углу, Вы можете переключить режим отображения страницы, доступны следующие режимы:
- Конструктор - режим создания страницы режиме визуального конструктра.
- С разделением - режим создания страницы с разделением в одной половине экрана режим конструктора в другой половине режим кода HTML.
- Код - режим создания страницы, при помощи языка HTML.
- Просмотр - режим отображения страницы в браузере.
Для того, чтобы создать Веб-страницу, разложим создаваемую нами страницу на составные части:
Теперь, мы визуально понимаем из каких частей состоят страницы и можем создать свою страницу.
Перейдем в режим: Конструктор и создаем в этом режиме, таблицы в соответствии с нарисованной нами структурой:
Отредактировать: размеры таблицы, фон, ширину границы, обтекание текстом и многое другое, можно при помощи вкладки: Таблица/Свойства таблицы/таблица:
После создания таблиц, заполним их соответствующим содержимым:
- Шапку страницы - изображением для шапки.
- Горизонтальное меню - ссылками на другие страницы сайта.
- Контент - статьями и изображениями.
- Вертикальное меню - ссылками на другие страницы сайта.
- Подвал страницы - счетчиками посещений и баннерами.
Выделим таблицу шапки, и при помощи вкладки: Вставка/Рисунок/Из файла… загрузим в таблицу заранее подготовленное изображение для шапки:
Теперь, создадим горизонтальное меню. В каждой ячейке таблицы пишем название пунктов меню, и после этого изменяем фон всех ячеек таблицы. У меня в данном примере он черный:
Прикрепим к каждому из пунктов меню гиперссылку. Делается это при помощи выделения пункта меню и клика правой клавишей мыши:
В появившемся меню добавления гиперссылок вводим адрес гиперссылки:
Вертикальное меню, делается точно также, как и горизонтальное меню. В поле контент пишем статью иллюстрированную изображениями. Кстати, при помощи программы , очень легко создать флеш меню.
Для отображения в таблице «подвала», счетчика просмотров страницы, добавляем в таблицу Java - Script, с сервиса предоставляемого Яндексом.
После заполнения всех таблиц перейдите в режим просмотра страницы: Код . Копируем созданный в визуальном редакторе HTML - код и вставляем данный код в поле: Код шаблона (HTML) .
И не забудьте все изображения (картинки, шапки), нужно перенести на хостинг и заново в шаблоне прописать путь к изображениям. Обычно на сервере под графические файлы создают каталог под названием images . В таком случае путь к изображению у нас будет иметь http://ваш сайт /images/изображение.png - это только показательный пример, у Вас может быть по другому.
В поле: Имя шаблона вводим - Мой шаблон , а в поле: Описание - Лучшие бесплатные CMS интернета . Нажимаем клавишу: Сохранить . Вот мы и создали уникальный шаблон для CMS MODx.
Modx шаблоны (модэкс) В 2004 году была разработана профессиональная бесплатная система управления сайтом MODX (модэкс). Она является так же фреймворком для веб-приложений и обеспечивает контроль над контентом. Этой платформой можно пользоваться как в личных целях, так и в коммерческих.С ее помощью создаются как обычные блоги, так и интернет-магазины. Выделяются следующие версии этой CMS: MODX Evolution и MODX Revolution. Первая является наиболее старой и ее функциональность значительно ниже, чем у следующей версии. Однако начинающие программисты чаще выбирают Evolution, так как в ней проще разобраться. Версия MODX Revolution на сегодняшний момент - самая новая. Она поддерживается разработчиками и рекомендуется для использования, если встал выбор какую из этих двух версий систем выбрать.
MODX шаблоны Что представляет собой шаблон? Это простая сверстанная страница, обычный CSS шаблон и документ HTML и CSS, в котором используются теги данного шаблона. Профессиональные шаблоны для «модэкс» предлагаются в интернете на множестве ресурсов. Но не везде можно найти уже готовые решения для сайтов(это когда все страницы уже проработаны веб-дизайнерами и не приходится задумываться над их оформлением самостоятельно). Полноценные MODX шаблоны скачать можно бесплатно. Они детально проработаны и имеют уникальный дизайн, что играет большую роль при создании сайтов. А если есть время и желание сделать что-то особенное, то можно разработать свой собственный шаблон с неповторимым дизайном. Это сделает сайт более привлекательным для посетителей. При скачивании дополнений со сторонних ресурсов, следует быть внимательными, так как большинство сайтов, раздающих бесплатные приложения, являются вредоносными. MODX установка шаблона Что делать после того, как платформа установлена и выполнены первоначальные настройки системы? Нужно установить шаблон, который разработан самостоятельно или же скачан из интернета. Первый шаг этого процесса – перемещение файлов в папку сайта на сервере. Как правило, она называется Templates. В ней можно создать директорию с названием шаблона и уже туда скопировать папку с изображениями и файлы со стилями CSS. Затем следует перейти в панель администратора и выбрать раздел «Новый шаблон», который находится в меню «Элементы – управление элементами». Следующий шаг – заполнение формы. Для этого необходимо ввести название шаблона и его код, который располагается в отдельном текстовом файле. И не забыть сохранить изменения. Как видно, установка шаблона является процессом не таким сложным, как может показаться. Однако, часто случаются ошибки, и неопытные пользователи могут попасть в ситуацию, когда на сайте шаблон выглядит совершенно иначе, чем было задумано. Например, не срабатывают некоторые элементы. Чтобы этого избежать, нужно установить дополнительные плагины. А чтобы меню сайта выглядело точно таким же, как в шаблоне, следует внести изменения в настройках сниппета и в файле стилей CSS. Если появились «битые» ссылки, то также необходимо переписать их на относительные. MODX шаблоны интернет магазина Для создания сайта, на котором планируется совершать сделки купли-продажи, на данной платформе существуют специальные дополнения. Они позволяют конструировать интернет-магазин и настраивать компоненты по своему усмотрению. MODX Revolution шаблоны имеют настраиваемые скрипты, которые при установке дополнений подключаются автоматически. Все необходимые настройки интернет-магазина на «модэкс» можно сделать, потратив максимум 10 минут. С помощью этой мощной системы у каждого есть возможность научиться делать хороший сайт самостоятельно.Приветствую вас уважаемые читатели! В предыдущих уроках мы произвели первичные настройки MODX, установили основные пакеты дополнений и настроили ЧПУ MODX. Теперь начинается самое интересное. Сегодня мы поговорим о том что такое MODX шаблоны и где их достать (скачать, заказать, купить).
Что такое MODX шаблонMODx шаблон – это по сути обычный HTML/CSS/JS шаблон с прописанными внутри него тегами синтаксиса MODX для его лучшей динамичной функциональности. Так что если Вы не плохо разбираетесь в HTML/CSS, тогда интеграция обычного HTML/CSS шаблона в MODX не доставит проблем. Благодаря этой фишке MODX очень удобен для веб дизайнеров. Ну а теперь переходим к самому интересному.
Где брать шаблоны для modxЗдесь у нас три пути:
Первый вариант подходит для веб-дизайнеров или хотя бы тех, кто в совершенстве владеет Adobe Photoshop и хорошо знает HTML и CSS.
Второй вариант подходит для вас если у вас туго с Adobe Photoshop и CSS, плюс данного варианта в том что вам не придется тратить свое время (на рисование, верстку и т.д.), но вам за то придется заплатить, и не факт что вам нарисуют и затем сверстают качественный шаблон. Вот сайты на которых вы, наверняка, найдёте исполнителя , , , так же можете обратиться с этим вопросом ко мне.
Ну и 3й вариант, подходит вам если вы хоть немного разбираетесь в HTML и CSS. Требует минимальных затрат и по времени не особо долго занимает (немного стилизировать по своему, внести небольшие правки и т.д. Для заказчиков с маленьким бюджетом, я обычно использовать именно этот вариант.
В рамках уроков размещаемых на данном блоге, я буду делать сайт с нуля согласно имеющегося у меня технического задания. Если вы просто учитесь создавать сайты на MODX, то скачайте сверстанный мною шаблон и эксперементируйте на нем (верску и как верстал можно найти в уроках по Bootstrap 4).
Кто хочет свой шаблон, то на всякий случай приведу перечень сайтов, где можно их скачать.
Перечень сайтов, на которых вы без труда сможете найти шаблон с отличным дизайном под любую тематику сайта.Хочу сразу заметить — не нужно думать, что шаблонные сайты – плохо. Нет!
Плохо – это когда на сайт вбухана куча «бабла» (уникальный авторский дизайн, самый дорогой выделенный сервер в Германии или Нидерландах, платный движок, типа «1С-Битрикс: Управление сайтом – Бизнес» за 60 000 р., нанят самый крутой «сеошник» с посекундной тарификацией, запущен Яндекс.Директ на 100 000 р. в лёгком режиме работы и т.д.), а результат нулевой! Вот это, действительно, плохо! Я бы сказал, из рук вон плохо!
Обращаю ваше внимание, что шаблон для будущего сайта необходимо выбирать с максимальным заделом на будущее. Что это значит? Сайт будет работать не год и не два с этим дизайном, а время не стоит на месте – меняются технологии. Поэтому глупо выбирать шаблоны младше 2014 года.
Табличная вёрстка – анахронизм!
Выбранный вами шаблон должен удовлетворять элементарным требованиям:
Для достижения последнего пункта обычно применяется самый распространенный, популярный и гибкий CSS фреймворк Twitter Bootstrap. Версии, желательно, выше 3.5. Сейчас уже 4 версия.
На сайтах представлены как чистые HTML шаблоны, так и шаблоны (темы) для различных CMS (WordPress, Joomla, Drupal). Причём, цена последних в разы дороже. Как вы уже догадались, для CMS MODX тематизированные шаблоны не имеют смысла. Если вы надумали купить один из шаблонов, то зачем переплачивать за специальный тематизированный шаблон, если можно купить на простом HTML совсем дёшево (допустим, за $15, т.е. около 550 руб.). К тому же, некоторые полностью одинаковые шаблоны продавец предлагает как CMS ориентированные, так и обычные HTML. Например, как отдельная тема для WordPress шаблон стоит $75, а в обычном HTML виде он же стоит $15.
Тематизированные шаблоны подходят только в том случае, если вы не нашли удовлетворяющего ваши потребности или потребности заказчика обычного HTML шаблона.
С этим думаю разберетесь.
Когда все подготовительные моменты закончены, перейдем непосредственно к тому, чтобы проанализировать скачанный шаблон, выделить в нем основные повторяющиеся части, такие как шапка, подвал, меню, левое меню, если оно есть, и натянуть их на CMS Modx. Ведь мы здесь и собрались для того, чтобы разобраться, как же получить бесплатный шаблон для Modx. Первым делом откройте шаблон Arbitrary , который мы скачивали в предыдущей статье и рассмотрите какие html файлы там есть. Для нас имеют значение файлы about, contact, gallery, index, services. Файл codes нас мало интересует, потому что содержит в себе различные типографские и функциональные единицы, к нему стоит обращаться по необходимости. Видим, что подвал, шапка и меню у страниц в основном одинаковое, отличается только главная страница, т.к. на ней под меню имеется слайдер, с нее и начнем.
В админке Modx переходим на вкладку Элементы-Шаблоны, видим шаблон BaseTemplate, переименовываем его в Главная. Оставляем содержимое шаблона вида:
[[$head]]
[[$header]]
[[$slider]]
[[$footer]]
[[$scripts]]
Именно такой код станет основой для будущего шаблона главной, разбила я его на такие составные элементы не просто так. Здесь отражены основные части, которые не меняются из страницы в страницу. Единственный специфичный элемент, присущий главной это слайдер. А теперь по порядку создадим каждый чанк и разберемся, что же он будет содержать в себе, и как адаптировать его содержимое для Modx. Надеюсь все знают, что чанк это html код, который может использоваться много раз на нашем сайта. Чтобы по несколько раз не копировать один и тот же код, такие чанки и создаются.
Оформление head в Modx. Как выделить head из шаблона сайта.Начнем с чанка head. Предварительно создадим три TV поля для SEO, это поля seokeyw, seodesc и seoh1. Эти поля необходимы, для заполнения SEO информации о страницах нашего сайта. Расскажу на примере keyw, как создать поле, а далее по аналогии. Заходим Дополнительные поля-Новое дополнительное поле, имя seokeyw, подпись Keywords, параметры ввода оставляем по умолчанию Текст, доступно для шаблонов отмечаем Главная, других пока нет, но эти поля должны быть во всех видах шаблонов. Далее создаем оставшиеся 2 поля и для них категорию SEO, Дополнительные поля-Новая категория. Теперь у созданных полей отметим эту самую категорию.
Двигаемся дальше. Заходим Элементы-Чанки-Новый чанк. Имя head, далее копируем туда все, что содержит между тегами head из нашего скачанного шаблона. Но это еще не все, необходимо переписать пути к файлам, вынести скрипты в отдельный чанк scripts перед закрывающимся тегом body и приспособить title,keyword и description к Modx. Ко всем путям добавляем assets/, т.к. мы помним, что картинки, css и js заливали именно в эту папку. Затем добавляем конструкцию:
Она необходима для правильного отображения ссылок сайта и ЧПУ. Далее удаляем содержимое title и вставляем следующую конструкцию:
[[*longtitle:is=``:then=`[[*pagetitle]]`:else=`[[*longtitle]]`]]
Она означает, что, если значение longtitle пусто, то выводим pagetitle, в противном случае longtitle. Это стандартные поля Modx, которые есть у каждого ресурса. Надеюсь, все знают, что это за поля. Далее по аналогии вставляем конструкцию с участием уже созданных нами SEO полей, если их значения пусты, то будет выводиться стандартный заголовок страницы, если же заполнены, то новые данные.
Теперь вынесем все скрипты(кроме jquery.min.js, ведь это инициализация jquery) в новый чанк scripts, который расположен перед закрывающемся тегом body, это улучшает скорость загрузки страницы, ведь скрипты подтягиваются немного позже, а страница не будет долго "зависать" в неприглядном виде. В итоге получим содержимое чанка Head:
[[*longtitle:is=``:then=`[[*pagetitle]]`:else=`[[*longtitle]]`]]
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
А содержимое чанка Scripts:
new WOW().init();
Следующим этапом будет создание чанка header. По аналогии с чанком head создаем чанк и даем ему название header, затем копируем в него содержимое блока с классом header из нашего шаблона для Modx. В данном шаблоне в шапке отсутствую картинки, к которым нужно переписать пути, в логотипе содержится текст. Изменим содержимое этого логотипа на слово Test и в ссылку поставим слеш, это будет переход на главную. Следующим этапом будет созданием меню на Modx. Для этого можно использовать Wayfinder или pdoMenu, возьмем последний вариант. Для генерации простого меню, как в шаблоне, достаточно будет использовать весьма несложный вызов, но у нас есть определенный вид у пунктов меню, поэтому используем еще и шаблоны для оформления. И получим следующий код для вывода нашего меню:
[[!pdoMenu?
&parents=`0`
&tplOuter=`@INLINE
- [[+wrapper]]
&tpl=`@INLINE [[+menutitle]][[+wrapper]]`
&tplHere=`@INLINE
]]
Шаблоны в отдельные чанки не выносила для экономии времени, но это не воспрещается, потом в параметрах вызова нужно будет только прописать нужные названия чанков. Полная документация по PdoMenu доступна по ссылке , там очень много параметров для вывода, подойдут почти для любого случая, если будут вопросы, вы всегда можете обратиться за помощью . В итоге получаем содержимое чанка header:
Toggle navigation
Test
[[!pdoMenu?
&parents=`0`
&tplOuter=`@INLINE
- [[+wrapper]]
&tpl=`@INLINE [[+menutitle]][[+wrapper]]`
&tplHere=`@INLINE
]]
О том как сделать слайдер на Modx и оформить подвал, я расскажу в следующем уроке, чтобы не затягивать эту статью.
Дата публикации: 16.03.2017 .
Всем привет. Решил выйти из ридонли.
Не для кого не секрет что админка Evo устарела еще 10 лет назад. По сему нужно что-то делать для комфортной работы с админкой на планшетах и мобилках. За день на коленке был собран новый шаблон для админки который по своему принципу очень похож на админку WordPress (да и по дизайну почти слизан с нее). Просьба не кидаться тапками, мол фу, WordPress… Админка у них явно удобней и выглядит лучше чем у нашего любимого Evo.
Сам шаблон сделан на основе дефолтной темы от Dmi3yy и взял из нее только лучшее. Шаблон работает с версии 1.1RC. Если вы обладатель более старой версии, вы можете поменять файл /manager/index.php на кастомный в своем MODx и все будет работать.
Основные отличия от остальных тем:
Сделал гит.
Шаблон закинул в репозиторий можно установить через него когда пройдет модерацию или скачать архив, распаковать и перекинуть все из папки MODxPress-master в корень сайта.
UPD от 23/02.
Сделано:
UPD от 24/02
Причесал все фреймы. Раскидал стили и скрипты по файлам и папкам. Перенес файл генерации меню в папку инклюдов, так логичней. header.inc.php и footer.inc.php добавлены в основной пак и подгружаются из папки includes темы. По фреймам осталось только перевести их в шаблонный вид и с ними закончено, больше я их трогать не буду. Если только не потребуется ввести пару новых эвентов.
Добавил выпадающую кнопку во все экшены элементов. Появилась небольшая бага с воркером (нотификатор о состоянии работы в шапке) но на полноценную работу это не влияет.
Архив перезалит.
UPD от 01/03
Принято решение интегрировать фичу похожую на плагин TreeTabs в тему. Ну или сам TreeTabs, пока еще не решил. В качестве исходного парсера выбран QB ввиду легкости интеграции. При переносе всех наработок в ядро будет использован Twig. На этом пока все. Следующий апдейт будет под версией 1.1 и будет содержать первые 2 экшена переписаные под шаблоны (mutate_content и mutate_settings) и новый внешний вид всех элементов форм. Дополнительно планируется добавить функционал сортировки табличных данных.
