Сайт с нуля MODx revo, часть 4:
восхитительная настройка шаблона и страниц сайта. Деградация

Сайт с нуля MODx revo, часть 4:
восхитительная настройка шаблона и страниц сайта. Деградация

Властвуй над кириллицей
в названиях элементов админки

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

Переименуй чанки шаблонов ContentType на шаблон, а категорию GLOBAL на Шаблоны:

Переименуй чанки шаблонов

Обязательно заполняй поле описание у нужных элементов и при наведении мыши будет выводиться подсказка:

заполняй поле описание у нужных элементов

Таким образом, осознание программной части сайта будет ускорено до предела!

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

Упрощай код

Я тут подумал, что слишком хардкорно для восприятия готовая верстка сайта, которую нужно поставить на систему, с этого урока - вынесем ее за пределы уравнения! Создадим ментальный план, теперь никаких версток, шапок, футеров и прочей белебирды... Мы тут сайты делаем или деградируем?

Мы тут сайты делаем или деградируем?

Меняй шаблон на следующий кот:

<!doctype html>
<html lang="ru">
<head>
[[MetaX?tpl=`мета-теги`]]
</head>
<body>
[[$шаблон.[[*template]]]] 
</body>
</html>

Для MetaX, чанк теперь тоже по русски величай: мета-теги.

Обязательно используй категории элементов

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

Две категории я предлагаю телепортировать за собой постоянно:

В категорию Шаблоны будешь складывать ТОЛЬКО чанки, которые относятся к основным шаблонам сайта, т.е. тут будут только чанки с типами страниц: шаблон.1, шаблон.2 и т.д.

Элементы - предназначены для чанков которые используются в вызовах сниппетов. Типа pdoTools, getImageList и других.

Две категории Шаблоны и Элементы

Правильно называй и структурируй элементы

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

Чихуа-хуа?

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

Мысль уловил? Что не суть, у нас задача сделать славный сайт, а ты зачем здесь?

Настрой шаблон сайта

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

У всех категория Настройки, параметры ввода: Текст и Доступно для шаблонов: галочка на главную страницу. Ничего себе! Браво и великолепно!

Что это дает? Со страницы главная страница - теперь, можно мгновенно поменять эти данные; иначе придут 13 недоброжелательных гномов и будут вводить в заблуждение тебе мозги с поиском нужного куска верстки, ДА, поверь, я знаю о чем говорю; в шаблоне выводи их как:

Телефон: [[#1.tv.настройки.телефон]];<br/>
Электронная почта:
<a href="mailto:[[#1.tv.настройки.почта]]">[[#1.tv.настройки.почта]]</a>.<br/>

Тут же, создай два поля:

Тип ввода: Текстовая область, галочка для шаблона Главная страница. Порядок сортировки: 99, для того, чтобы эти поля находились внизу всех остальных настроек. В шаблоне выводи их как: [[#1.tv.настройки.prebody]] и [[#1.tv.настройки.prehead]].

все дело в верстке конкретного проекта

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

все дело в верстке конкретного проекта

Загрузка файлов в ресурс

Иди к МедиаИсточники файлов, правой кнопкой мыши скопируй Filesystem, правой кнопкой мыши - редактировать:

  • Имя: Ресурс
  • basePath: [[migxResourceMediaPath? &pathTpl=`/assets/files/resources/{id}/`&createFolder=`1`]]
  • baseUrl: [[migxResourceMediaPath? &pathTpl=`/assets/files/resources/{id}/`]]

Дальше путь твой ведет в Системные настройки, фильтруй по coreПанель управления, ключ: default_media_source - меняй на источник Ресурс.

Так как на сайте установлен TinyMCE Rich Text Editor, немного поменяй код файла: /assets/components/tinymcerte/js/mgr/tinymcerte.js

ищи:

,loadBrowser: function(field_name, url, type, win) {

ищи:

url: бла-бла-бла + MODx.config['default_media_source']

улучшай:

+'&id='+MODx.request.id,

Вуаля! Теперь при редактировании страниц, в поле содержимое ресурса, при вставке изображений, например, по умолчанию используется источник файлов Ресурс, и все загрузки будут осуществляться в /assets/files/resources/{id}/ - где {id} это id текущей редактируемой страницы.

То есть, когда нажимаем ПКМСоздать документ.

Странице еще не присвоен id, т.к. она еще не сохранена в базу данных. ID-шник присвоится, только после того как ты нажмешь кнопку Сохранить. Теперь понятно зачем отключать поле modx-resource-content на этапе создания страницы? (часть 3)

Загрузка через MIGX
для слайдеров, галерей

Создай конфигурацию MIGX. ПриложенияMIGX, вкладка MIGX, Добавить элемент.

Сохраняй, далее правой кнопкой мыши - Экспорт/Импорт и вставляй следующий код:

Вот конфигурация, на здоровье.

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

Для русификации, следуй в Управление словарями, пространство имен: migx, тема default, язык ru. Создай записи:

Создай категорию ЭлементыИзображения, там сотвори чанк изображение:


[[+href:notempty=`<a href="[[+href]]" [[+class:notempty=`class="[[+class]]"`]]>`]]
<img src="[[+imgThumb]]" alt="[[+alt]]" title="[[+title]]" />
[[+href:notempty=`</a>`]]
чанк изображение

Приступи к настройке страниц

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

Туда — будешь складывать дополнительные поля.

По умолчанию — шаблон страницы задавай — Статические страницы.

Настройки системыcoreСайт, ключ: default_template, да.

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

В моем примере, на главной странице будет отображаться слайдер.

Для начала, создай для него — новый источник файлов. МедиаИсточники файлов, копируй источник Ресурс и называй его Слайдер.

Дальше, создай дополнительное поле: шаблон.1.слайдер, категория Главная, порядок сортировки 1:

создай дополнительное поле

Параметры ввода:

Источники файлов, выбирай Слайдер. Доступно для шаблонов: Главная страница.

Теперь отредактируй чанк шаблон.1, там где выводится содержимое главной страницы на сайте:

[[-- в начале чанка вызываем нужные сниппеты и телепортируем куда надо с помощью toPlaceholder]]
[[getImageList
  :toPlaceholder=`шаблон.1.слайдер`
  ?
  &tvname=`шаблон.1.слайдер`
  &limit=`0`
  &tpl=`шаблон.1.слайдер.слайд`
]]

[[-- верстка страницы и вызов нужных плейсхолдеров]]

[[+шаблон.1.слайдер:ne=``:then=`
<div id="slider">
   [[+шаблон.1.слайдер]]
</div>
`:else=`
   пусто
`]]


<hr/>
главная страница
<br/>
[[*content]]

Сверху — размещай вывод сниппетов, под ними — верстка страницы и вызов нужных плейсхолдеров. Однако по итогу, ты придешь к выводу — что это всё туфта.

Так как при вызове сниппета getImageList указан шаблон &tpl=`шаблон.1.слайдер.слайд`, для каждого слайда, создай чанк шаблон.1.слайдер.слайд, в категории ЭлементыИзображения:

создадим чанк
<div class="one">
[[$изображение?
  &imgThumb=`[[+image:phpthumbon=`&h=540&zc=0`]]`
  &alt=`[[+alt]]`
  &title=`[[+title]]`
]]
</div>

Для сжатия картинок используй компонент phpthumbon. Обрати внимание, что при передаче картинки обработанной при помощи phpthumbon: название плейсхолдера imgThumb - должно отличаться от исходного image.

Ахтунг! Особенность приведенной конфигурации: предполагается, что, картинки, используемые в слайдере будут разные, т.е. эта конфигурации не предназначена для копирования и вывода одних и тех же картинок по нескольку раз. Ее преимущество в том, что можно через загрузчик загрузить сразу много фотографий, и они мгновенно создают записи в сетке MIGX поля, либо с помощью кнопки: Импорт из файловой системы - сея кнопка, чеканит содержимое папки /assets/files/slider/{id}/ и телепортирует все файлы оттуда в сетку.

Галерея

Новый источник файлов. МедиаИсточники файлов, копируй источник Ресурс и называй его Галерея.

Дополнительное поле: шаблон.3.галерея, категория Галерея, порядок сортировки: 1. Параметры ввода:

Источники файлов, выбирай Галерея. Доступно для шаблонов: Галерея.

Меняй чанк шаблона галереи: шаблон.3

[[-- здесь вызываем нужные сниппеты и телепортируем куда надо с помощью toPlaceholder]]
[[getImageList
  ?
  &tvname=`шаблон.3.галерея`
  &limit=`0`
  &tpl=`шаблон.3.галерея.фото`
  &toPlaceholder=`шаблон.3.галерея`
]]

[[-- верстка страницы]]


[[+шаблон.3.галерея:ne=``:then=`
<div id="gallery">
   [[+шаблон.3.галерея]]
</div>
`:else=`
   пусто
`]]


<hr/>
галерея

Создай чанк шаблон.3.галерея.фото:

<div class="one">
[[$изображение?
  &href=`[[+image]]`
  &imgThumb=`[[+image:phpthumbon=`&h=200&zc=0`]]`
  &alt=`[[+alt]]`
  &title=`[[+title]]`
  &class=`gallery`
]]
</div>

Статьи

Для статей будешь использовать компонент Collections. В настройках страницы меняй Тип ресурса - Коллекция. Сохрани страницу, чтобы изменения вступили в силу!

Collections modx revo

Создай чанки для распределения типов страниц:

CollectionContainer - это список статей, а modDocument - шаблон для самой статьи.

код чанка шаблон.4.CollectionContainer

[[-- в начале чанка вызываем нужные сниппеты и телепортируем куда надо с помощью toPlaceholder]]
[[!pdoPage:toPlaceholder=`выводим.статьи`?
    &parents=`[[*id]]`
    &depth=`0`
    &tpl=`шаблон.4.CollectionContainer.статья`
    &limit=`1`
]]
[[!+page.nav:toPlaceholder=`выводим.статьи.пагинация`]]

[[-- верстка страницы и вызов нужных плейсхолдеров]]
<div class="articles">
[[+выводим.статьи]]
</div>
<div class="pagination">
[[+выводим.статьи.пагинация]]
</div>

код чанка шаблон.4.modDocument

[[*pagetitle]]<hr/>
<a href="[[~[[*parent]]]]">Назад</a>

Создай чанк для вывода превью-статьи, в категории Элементы, шаблон.4.CollectionContainer.статья:

<a href="[[~[[+id]]]]">[[+pagetitle]]</a><hr/>

Меняй чанк с шаблоном статей: шаблон.4

[[$шаблон.4.[[*class_key]]]]

[[*class_key]] - выводит тип текущей страницы, что очень удобно для расширения шаблона сайта средствами modx, то есть при заходе на страницу, мы сразу будем определять попали на страницу где находится статья или список статей. Таким же образом делаются подобные махинации, в аналогичных ситуациях.


А спонсор этого урока ДЕГРАДАЦИЯ!

Мы тут сайты делаем или деградируем?



Содержание:


15 ноября 2016, 02:18
modx revolution


Авторизация
Зайди на сайт с помощью соц. сети: