Здравствуй %USER_NAME%!
Я тут собрал нибольшой мануал, по случаю юбилейного развёртывания десятой у меня по счёту MODX revo.
Эта статья необходима для того, чтобы чистенький коробочный MODX привести в боевую готовность, ведь из коробки этот движок как новорождённый оленёнок еле еле стоит на ногах, стесняется даже толком показать своё меню, не говоря уже про превью новостей, или фотогалереи со слайдерами.

Я буду в дальнейшем дополнять эту статью и будет отично если Вы то-же поделитесь своим мнением по этой настдстройке, покритикуете или дополните какие либо её части, или допишите что то новое если я упустил что то важное.

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

Список приложений для установки:

FormIt — Реализация форм обратной связи
AjaxForm — FormIt на Ajax, без перезагрузки страницы
Gallery — Работа с изображениями и их хранение, + галереи фотографий
pdoTools — Вывод контента списками с подгрузкой Ajax, вывод доп свойств в макете, меню и куча других полезных штук
Ace — Удобный редактор кода для макетов и чанков, поддерживает некотоыре функции emmit, например несколько курсоров при нажатом ctrl, автозавершение по tab и автозакрытие тегов
TinyMCE Rich Text Editor — Визуальный редактор контента
Collections — Разбивка документов на категории, удобное хранение и редактирование


Системные настройки

Создаём новый параметр
Ключ: — template_path
Имя: — Путь до шаблона
Значение: /assets/templates/[Название шаблона]/
Создаём папку /assets/templates/[Название шаблона]/ туда будем запихивать файлы необходимые для сайта '.css', '.js', шрифты, картинки и тд. Это позволит нам легко переключать дизайны сайта одним параметром в админке

core — Сайт
Название сайта — Пишем название сайта
Страница ошибки 404 «Документ не найден» — Создаём новый документ для 404 ошибки, добавляем сюда его id

core — Дружественные URL
Использовать дружественные URL — да
Использовать вложенные URL — да

core — Визуальный редактор
Использовать текстовый редактор — да
Редактор — TinyMCE RTE
Редактор для элементов — Ace


Безопасность

  1. В корне сайта переименовываем ht.access в .htaccess
  2. В папке core так-же переименовываем ht.access
Если хостинг работает на связке apache + NGINX то в папке /core/docs переименовываем или удаляем changelog.txt чтобы убрать предупреждение о безопасности в админке (появляется потому что текстовые файлы обрабатывает NGINX, с безопастностью всё норм если переименовали файлы ht.access)


СЕО Оптимизация

В Файл .htacces в корне сайта дописываем
#Убираем .html на конце адреса, нужно дополнительно поправить в админке "Содержимое - Типы содержимого - HTML" поставить там '/'
RewriteRule (.+).html?$ http://site-name.ru/$1/ [R=301,L]

#Редирект с www на без www с / на конце
RewriteCond %{REQUEST_URI} !\?
RewriteCond %{REQUEST_URI} !\&
RewriteCond %{REQUEST_URI} !\=
RewriteCond %{REQUEST_URI} !\.
RewriteCond %{REQUEST_URI} !\/$
RewriteCond %{HTTP_HOST} ^www\.(.*)$
RewriteRule ^(.*)$ http://%1/$1/ [L,R=301]

RewriteCond %{REQUEST_URI} !\?
RewriteCond %{REQUEST_URI} !\&
RewriteCond %{REQUEST_URI} !\=
RewriteCond %{REQUEST_URI} !\.
RewriteCond %{REQUEST_URI} ![^\/]$
RewriteCond %{HTTP_HOST} ^www\.(.*)$
RewriteRule ^(.*)$ http://%1/$1 [L,R=301]

RewriteCond %{REQUEST_URI} !\?
RewriteCond %{REQUEST_URI} !\&
RewriteCond %{REQUEST_URI} !\=
RewriteCond %{REQUEST_URI} !\.
RewriteCond %{REQUEST_URI} !\/$
RewriteCond %{HTTP_HOST} ^([^www].*)$
RewriteRule ^(.*)$ http://%1/$1/ [L,R=301]

#Смотрим чтобы вот этот код после 'The Friendly URLs part' был разкоменчен
# The Friendly URLs part
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?q=$1 [L,QSA]

Этим действием мы исключаем дубли страниц из поиска


Структурирование админки

Шаблоны:
Основной шаблон
<!doctype html>
<html lang="ru">

	[[$head]]

	<body class="_load">
	    [[$header]]

	    [[$main]]

	    [[$footer]]
	</body>
</html>

Локанично и понятно, зачем тут класс _load описано в описании к чанку $footer

Категории:
Для удобства и чистоты в админке, создаём 2 категории

  1. Шаблон
  2. Контент
head, header, main и footer запихиваем в шаблоны, доп. свойства в контент

Чанки:
$head
<head>
	<title>[[*pagetitle]] - [[++site_name]]</title>
	<meta charset="[[++modx_charset]]">
	<meta name="description" content="[[*description]]">
	<base href="[[!++site_url]]" />
	<meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- color theme -->
	<meta name="theme-color" content="#000000">
	<meta name="msapplication-navbutton-color" content="#000000">
	<meta name="apple-mobile-web-app-status-bar-style" content="#000000">
	<!-- color theme x-->

	<!-- fancybox -->
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css"/>
	<!-- fancybox x-->

	<!-- slick slider -->
	<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.8.0/slick.css"/>
	<!-- slick slider x-->

	<!-- bootstrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<!-- bootstrap x-->

	<!-- main -->
	<link rel="stylesheet" href="[[++template_path]]css/main.min.css">
	<!-- main x-->
</head>


Тут подключаются только стили, как рекомендует нам Корпорация Добра, описание подключаемх скриптов в описании чанка $footer

  • format-detection — убирает дефолтные стили для кнопок и номеров телефонов которые нагло подставляет iphone и некоторые другие устройства
  • viewport — для корректного отображения на смартфонах и других устройствах
  • Код в блоке 'color theme' отвечает за цвет вкладки в браузере на мобильных устройствах, мелочь, а приятно
  • css/main.min.css — стили для текущего шаблона
Используем CDN (Загрузку с других серверов) для быстрой загрузки скриптов из кэша пользователей, экономим трафик пользователя, нагрузку на сервер и место на нём (всё же полезно хранить дубли скриптов на серве, подключение которых хранить в скрытом / закоменченом виде, если вдруг из CDN пропадёт нужная версия или еще чего)

$header
<header>
    <nav>
        [[pdoMenu?
            &parents=`0`
            &level=`2`
        ]]
    </nav>
</header>

Вывод меню тут так, для примера

$main
<main>
    <h1>[[*longtitle:default=`[[*pagetitle]]`]]</h1>
    
    [[*id:pdofield=`header_chank`:ne=`[[*id]]`:then=`<div class="_header_chank">[[*id:pdofield=`header_chank`]]</div>`]]

    <div class="_content">
        [[*content]]
    </div>
    
    [[*id:pdofield=`footer_chank`:ne=`[[*id]]`:then=`<div class="_footer_chank">[[*id:pdofield=`footer_chank`]]</div>`]]
</main>


Где код *id:pdofield здесь для того, чтобы выводить формы, меню, списки новостей, галлереи и тд через доп свойство, это позволяет нам не засорять контент кодом, и не плодить шаблоны (как делают некоторые разработчики ): ) чуть подробнее по их настройкам будет далее

$footer
<footer>
	<div class="_copyright">
	</div>

	<!-- jQeury -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<!-- jQeury x-->

	<!-- fontaweasome -->
	<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
	<!-- fontaweasome x-->

	<!-- fancybox -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
	<!-- fancybox x-->

	<!-- slick slider -->
	<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.8.0/slick.min.js"></script>
	<!-- slick slider x-->

	<!-- bootstrap -->
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<!-- bootstrap x-->

	<!-- main -->
	<script src="[[++template_path]]js/main.min.js"></script>
	<!-- main x-->

	<script>
		$(window).on('load', function(){
			$('body').removeClass('_load')
		})
		$(window).on('beforeunload', function(){
			$('body').addClass('_unload')
		})
	</script>
</footer>


Тут не только лишь копирайт, но и подключение всех скриптов, где:
fancybox — модальные окна для картинок и различного контента
slick slider — универсальный кросплатформенный слайдер для различного содержимого
fontaweasome — удобная реализация иконок в SVG для сайта, цвет размеры жирность и тд редактируются CSS стилями
bootstrap — Сетка для адаптивной вёрстки, и некоторые полезные функции типа аккордеонов, слайдеров, модальных окон и куча всего еще, ну вы поняли, знаете…
js/main.min.js — наши js скрипты для текущего шаблона

Сценарий внизу позволяет определить что страница полностью загруженна (у body удаляется класс _load), и что пользователь переходит по ссылке или собирается свалить с сайта 0_о (к body добавляется класс _unload)

Доп. свойства:
Добавляем 2 доп свойства, для вывода снипетов в шаблон
(Параметры ввода — текстовая область,
Параметры вывода — текст,
Категория — Контент)

  1. header_chank
  2. footer_chank

На этом пока что всё...
Если эта статья наберёт больше 100 лайков, выложу код для синхронизации MODX с Telegram! (: