Как поменять шаблон в modx
Перейти к содержимому

Как поменять шаблон в modx

  • автор:

Интеграция шаблонов

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

На этой странице

Что такое шаблоны и где их достать

  • bootstrapmade.com (куча бесплатных и симпатичных шаблонов).
  • themeforest.net — куча платных премиум шаблонов.
  • wrapbootstrap.com — куча платных премиум шаблонов.
  • templatemonster.com — много платных и есть довольно много бесплатных шаблонов.
  • startbootstrap.com — много платных шаблонов.

Врамках даной документации мы будем интегрировать бесплатный шаблон с bootstrapmade.com: Eterna — создадим многостраничный сайт с блогом (визитка, корпоративный).

Скачать шаблон Eterna с оф. сайта, с яндекс диска (могут быть не самыми актуальными, но именно по их коду пишется документация).

Перенос готовой верстки (шаблона)

Каждый html шаблон состоит из определенного набора файлов, обычно это html, css, js файлы и изображения. Также могут быть шрифты, scss файлы, php обработчики и т.д.

файлы шаблона Eterna

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

Содержимое папки assets

Создадим в корне сайта директорию templates и закачаем все файлы из папки assets туда. Сделать это можно при помощи файлового менеджера хостинга или через ftp/sftp. В конечном итоге получаем следующее:

Файлы шаблона залитые на сайт MODX

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

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

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

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

Теперь откроейте код главной страницы html шаблона — обычно это файл index.html (делать это лучше при помощи редакторов кода) скопируйте и вставьте его в место стандартного.

И так как мы загрузили шаблон в свою папку templates, нам нужно поменять пути к css, js и прочим файлам. Пример: было assets/vendor/animate.css/animate.min.css, стало templates/vendor/animate.css/animate.min.css.

В нашем случае нам нужно везде assets заменить на templates. Если вы устанавливали дополнение Ace, то выделите assets нажмите CTRL + H, в поле замены напишите templates и напротив заменить нажмите на все.

Быстрая замена в Ace

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

Быстрая замена в Ace v 2

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

Главная страница сайта

Если у вас весь код кривой, значит вы что-то не закачали, либо поправили не все пути до файлов.

Интеграция html верстки с CMS — введение

Интеграция html верстки с CMS — это процесс объединения дизайна и верстки сайта (html, CSS, JavaScript) с системой управления контентом (CMS), в нашем случае с MODX. Это позволяет управлять контентом сайта через интерфейс CMS, без необходимости вручную изменять код сайта.

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

Uploadify — смена шаблона

Всем привет. Использую Uploadify на сайте для добавления файлов пользователей. Всё круто, очень нравится.

Вопрос — как поменять шаблон отображения? Искал в «документации», не нашёл. Или доступен только стандартный tpl.Uploadify.formfive? Как бы не критично, могу и стандартный подправить, но интересно.

Пробую так, не работает:

[[!Uploadify? &uploadiFive=`1` &listThumbSize=`320x240,300x187,400x250,500x312,600x375` &thumbFormat=`jpg` &maxFilesize=`3145728` &fileExtensions=`jpg,jpeg,png,doc,docx,pdf,zip` &pageNumber=`[[+website]]` &tpl=`customFileUploaderForm` ]]

MODx/Руководство дизайнера

Создание шаблонов в MODx – одно из самых приятных занятий. Трудно найти систему, в которой вы можете контролировать вывод кода html на все 100%. Прежде чем приступить к построению шаблонов в MODx мы принимаем тот факт, что вы имеете представление о механизме отображения страниц в браузерах и что такое html-верстка.

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

  • 1 Шаг 1. Добавление специальных тегов MODx.
  • 2 Шаг 2. Добавление сниппетов и чанков.
  • 3 Шаг 3. Добавление шаблона в базу MODx.
  • 4 Шаг 4. Установка шаблона как основного.

Шаг 1. Добавление специальных тегов MODx. править

После того как верстка шаблона будет завершена, необходимо (даже не закрывая ваш редактор) вставить специальные теги системы MODx. Вставляйте теги в соответствии с их назначениями, например в элемент можно вставить спец-тег [*pagetitle*], а в блок предполагаемого содержимого страницы – тег [*content*]. Позже, когда система начнет обработку шаблона, она заменит спецтеги соответствующими данными.

Шаг 2. Добавление сниппетов и чанков. править

Для вывода на сайте меню, каталогов, комментариев и т. д. в MODx используются сниппеты. В шаблон они вставляются в виде: [[Имя_сниппета? &параметр1=`значение` &параметр2=`значение` &параметр3=`значение`]], и конечно же в те места, где мы предполагаем вывод нашего меню или каталога. Аналогично вставляются и чанки (блоки html-кода, которые часто повторяются от страницы к странице), однако в слегка отличном виде: >.

Шаг 3. Добавление шаблона в базу MODx. править

Итак, мы получили готовый код шаблона для системы MODx. Остается только внести его в ресурсы системы, чтобы он стал доступным для использования. Для этого заходим в раздел «Ресурсы->Управление ресурсами», нажимаем на вкладку «Шаблоны». Здесь мы увидим существующие шаблоны и ссылку «Новый шаблон», на которую, как вы уже догадались, нужно нажать.

В окне создания/редактирования шаблонов нам нужно ввести имя шаблона, его описание (желательно это сделать, если предполагается большое количество шаблонов) и сам код шаблона, который мы подготовили. После того, как необходимые поля заполнены – нажмите «Сохранить» и … шаблон готов!

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

Шаг 4. Установка шаблона как основного. править

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

Интеграция html шаблонов с MODX

Интеграция html шаблонов с MODX 3

Практика разработки сайтов

Автор Alex87 На чтение 18 мин Просмотров 585 Опубликовано 06.10.2023

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

Перенос готовой верстки (шаблона)

Каждый html шаблон состоит из определенного набора файлов, обычно это html, css, js файлы и изображения. Также могут быть шрифты, scss файлы, php обработчики и т.д.

файлы шаблона Eterna

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

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

Содержимое папки assets

Создадим в корне сайта директорию templates и закачаем все файлы из папки assets туда. Сделать это можно при помощи файлового менеджера хостинга или через ftp/sftp. В конечном итоге получаем следующее:

Файлы шаблона залитые на сайт MODX

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

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

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

Как вы видите в начальном шаблоне присутствует синтаксис MODX: [[*name]] — поля ресурсов и TV, [[++name]] — системные настройки. Мы все это будем изучать его по мере разработки сайта, а сейчас можете удалить весь код шаблона.

Чтобы код MODX шаблонов подсвечивался установите дополнение Ace.

Теперь откройте код главной страницы html шаблона — обычно это файл index.html (делать это лучше при помощи редакторов кода) скопируйте и вставьте его в место стандартного кода начального шаблона.

И так как мы загрузили шаблон в свою папку templates, нам нужно поменять пути к css, js и прочим файлам. Пример: было assets/vendor/animate.css/animate.min.css, стало templates/vendor/animate.css/animate.min.css.

В нашем случае нам нужно везде assets заменить на templates. Если вы устанавливали дополнение Ace, то выделите assets, нажмите CTRL + H, в поле замены напишите templates и напротив заменить нажмите на все.

Быстрая замена в Ace

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

Быстрая замена в Ace v 2

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

Главная страница сайта

Если у вас весь код кривой, значит вы что-то не закачали, либо поправили не все пути до файлов.

Интеграция html верстки с CMS

Интеграция html верстки с CMS — это процесс объединения дизайна и верстки сайта (html, CSS, JavaScript) с системой управления контентом (CMS), в нашем случае с MODX. Это позволяет управлять контентом сайта через интерфейс CMS, без необходимости вручную изменять код сайта.

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

Интеграция верстки в MODX часто начинается с определения того, какие элементы сайта обычно повторяются от страницы к странице. Если открыть все наши html файлы шаблоны и посмотреть на них, то вы увидите что у всех есть повторяющиеся элементы: шапка с навигацией (header), хлебные крошки (на всех страницах кроме главной), футер.

Сквозные элементы в шаблоне

Это все так сказать сквозные элементы, их можно вынести в отдельные чанки.

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

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

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

Выносим код шаблона в чанк

Далее открываем чанк tpl.1, находим в нем разметку карусели: Hero Section (которая выводится только на главной странице). Вырезаем ее и помещаем в новый чанк с именем: hero_section.

Выносим карусель в отдельный чанк

и соответственно вызываем его: [[$hero_section]]. Далее вырезаем из чанка tpl весь контент (не сквозные элементы, которые находятся в main) и помещаем их в чанк tpl.1 и вызываем его. На выходе должно получится следующее:

Разбили шаблон на чанки

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

Главная страница сайта

Использование стандартных полей ресурса

Открываем чанк со сквозными элементами и прописываем поля ресурсов. Например меняем:

 Eterna Bootstrap Template - Index 
 [[*longtitle]] 

Ну и вызовем где ни будь в tpl.1 поле [[*content]] .

Недостаточно стандартных полей, можете создать свои TV.

Использование системных настроек

[[++site_url]] — базовый урл (см. настройка чпу)

[[++modx_charset]] — кодировка сайта

[[++site_name]] — название сайта

[[++cultureKey]] — язык сайта

Наше начало шаблона станет таким:

      [[*longtitle]] | [[++site_name]]

Так же мы можем создать свои системные настройки, сделать это проще всего при помощи дополнения ClientConfig, установите его и создайте там настройки: телефон, email, адрес, соц. сети и т.д.

Затем выведите их в нужных частях шаблона.

Использование фильтров и модификаторов

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

Немного усложним вывод title , сделаем его таким:

Добавим meta robots:

Модифицируем вызов чанков hero_section и tpl.1 .

[[*id:is=`1`:then=`[[$hero_section]]`]]

Здесь мы выводим данный чанк только у ресурса с (главной страницы).

[[$tpl.[[*template]]]]

А в данном случае мы в зависимости от шаблона подключаем tpl.id-шаблона — зачем узнаете далее.

В конечном итоге код нашего чанка (tpl) со сквозными элементами должен принять примерно такой код:

Создаем дополнительные шаблоны

Пока создадим только 1 шаблон, для обычных статических страниц: о компании, политика конфиденциальности, контакты и т.п.. За основу возьмем к примеру файл team.html.

Создайте новый шаблон с именем Статика и вызовите в нем чанк tpl (в котором хранятся сквозные элементы) и сохраните его.

Создаем новый шаблон

Теперь создаем чанк с именем tpl.2 (где 2 — это id только, что созданного шаблона) и помещаем в него код который находится между в блоке main.

Создаем новый чанк

Теперь модернизируем секцию breadcrumbs, она примет вид:

Ее в принципе можно отправить в отдельный чанк: breadcrumbs. И вызвать чанке со сквозными элементами (tpl), вот такой конструкцией: [[*id:is=`1`:else=`[[$breadcrumbs]]`]] — выводим чанк на всех страницах кроме главной.

Выводим чанк на всех страницах, кроме главной

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

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

MODX предлагает много динамики из коробки, и Сниппеты способ расширить эту динамику. Мы можем их писать сами, даже если вы не знаете PHP, можно воспользоваться к примеру чатом gpt (есть бесплатные боты в телеге, вот пример запроса и что он выдал):

Просим бота написать код для сниппета

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

 else < // Иначе выводим года в формате "2010 - 2021" echo $startYear . " - " . $currentYear; >?>

И вызовем его в копирайтинге:

Вызываем сниппет в копирайтинге

Переходим на сайт и проверяем:

Работает

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

 else

Теперь его можно вызывать так: [[year? &startYear=`2022`]] .

Исчерпали весь базовый функционал, что дальше?

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

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

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

Создаем новый ресурс

И переходите к следующему уроку: создание контактных форм при помощи связки компонентов Formit + FetchIt.

Добавить комментарий

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