WebDesign Master
Курсы
Создание сайтов на MODx: Плейсхолдеры (параметры) чанков

Создание сайтов на MODx: Плейсхолдеры (параметры) чанков

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

Создание сайтов на MODx: Плейсхолдеры (параметры) чанков - Видеоурок
Смотреть урок на YouTube
Создание контентного сайта на Jekyll от А до Я

Базовый урок по MODx Revolution: Ознакомиться.

Давайте рассмотрим на реальном примере. Допустим, у нас есть чанк head, который содержит доктайп, тег и содержимое тега head и открывающийся тег body. Обычно для главной страницы тег body должен содержать класс, идентифицирующий его принадлежность к определеной странице сайта. Например, class="ishome", указанный для тега body, расскажет нам о том, что мы находимся на главной странице. Соответственно, класс isnohome, page-gallery, page-contacts и т. д. будут говорить о том, что мы находимся на странице, отличной от главной, на странице галереи или странице контактов. Через эти классы будут стилизованы определенные элементы внутри самой страницы, сраница будет уникальной.

Как решить задачу по распределению классов между страницами? Неопытный разработчик, скорее всего, создаст копию чанка head с тем лишь отличием, что тег body будет иметь разные классы и использовать разные чанки в разных шаблонах сайта. Вроде ничего странного и необычного, но мы получим 4 практически одинаковых чанка. Опытный разработчик почувствует неладное, ведь копирование/дублирование чего бы то ни было в разработке с высокой степенью вероятности является моветоном.

Задачу расширения чанка параметром (плейсхолдером) можно решить довольно таки просто - вместо класса class="ishome", мы напишем:

<body class="[[+bodyClass]]">
	...
</body>

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

[[$head? &bodyClass=`ishome`]]

Изящно и просто, не правда ли?

Соответственно, мы можем задать параметр по умолчанию для дефолтного вывода $head. Для этого в редактируемом чанке head перейдем на вкладку "Параметры", нажмем кнопку "Параметры по умолчанию заблокированы" и "Создать параметр". Имя, соответственно, bodyClass, Значение - isnohome. Таким образом, мы зададим всем страницам, кроме главной bodyClass = isnohome.

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

Бонус: Настройка Material Theme в редакторе Ace MODx

MODx Ace Material Theme

1. Системные настройки > Пространство имен "ace":

Размер шрифта: 15px
Высота области редактирования: 560
Невидимые символы: Да
Мягкая табуляция: Нет
Размер табуляции: 2
Тема редактора: tomorrow_night

2. Файлы: Filesystem > super > templates > default > css > index.css:
(Добавить в конце)
.ace_editor{line-height: 1.4!important;font-family: 'Menlo','Ubuntu Mono','Consolas','source-code-pro',monospace!important}
.ace_gutter{color:#666E79!important}
.ace_active-line,.ace_gutter-active-line{background-color:#2A2F38!important}
.ace_scroller,.ace_gutter {background-color: #272B33!important}
.ace_meta.ace_tag{color:#A6B2C0!important}
.ace_meta.ace_tag.ace_tag-name{color:#DF6A73!important}
.ace_entity.ace_other.ace_attribute-name{color:#D2945D!important}
.ace_string{color:#90C378!important}

3. Очистить кеш через меню.

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Фриланс для начинающих

Я - фрилансер! Базовый курс для начинающих

Другие уроки по теме «MODx»

  • Создание сайта с нуля. Урок #34. Посадка секции «Поставляемое оборудование» на MODx (pdoResources)
  • Создание сайта с нуля. Урок #33. Посадка секции «Выполненные работы» на MODx (Всплывающие окна)
  • Создание сайта с нуля. Урок #32. Посадка секции «Направления услуг» на MODx (pdoResources)
  • Создание сайта с нуля. Урок #31. Посадка галереи на MODx (MIGX + phpthumbof)
  • Создание сайта с нуля. Урок #30. Посадка секции тизеров на MODx
  • Создание сайта с нуля. Урок #29. Посадка HTML верстки шапки на MODx

Разделы сайта:

  • Курсы
  • HTML и CSS
  • Веб-дизайн
  • Инструменты
  • Оффтоп
  • MODX
  • WordPress
  • jQuery
  • Адаптивный веб-дизайн
  • Создание иконок
  • Обработка изображений
  • Иллюстрации и Инфографика
  • Интерфейсы UI/UX
  • Прототипирование
  • JavaScript
  • Хостинг

Полезные ресурсы:

  • Установка WSL и окружения
  • Настройка окружения без WSL
  • Настройка VS Code
  • Lazy Load Placeholder
  • Документация Gulp 4
  • Рабочее место разработчика
2022 © WebDesign Master