Я тут собрал нибольшой мануал, по случаю юбилейного развёртывания десятой у меня по счёту 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
Безопасность
- В корне сайта переименовываем ht.access в .htaccess
- В папке core так-же переименовываем 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 категории
- Шаблон
- Контент
Чанки:
$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 — стили для текущего шаблона
$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 доп свойства, для вывода снипетов в шаблон
(Параметры ввода — текстовая область,
Параметры вывода — текст,
Категория — Контент)
- header_chank
- footer_chank
На этом пока что всё...
Если эта статья наберёт больше 100 лайков, выложу код для синхронизации MODX с Telegram! (:
Михаил 03.04.2018 18:00 #
Для настройки ЧПУ нужен будет либо translit либо yTranslit.
(появляется потому что текстовые файлы обрабатывает NGINX, с безопастностью всё норм если переименовали файлы ht.access)
nginx в принципе не работает с .htaccess
Так норм, давай еще
Ильин Сергей 04.04.2018 14:55 #
Игорь Сухинин 05.04.2018 17:26 #
Я честно не вижу никакой практической пользы от этой работы. Для себя Вы, конечно, можете создавать какие-угодно коробочные версии, но… все сайты — разные. И то, что Вы для себя определили как каркас, совершенно не подойдет ни одному сайту, который сделал я, например.
Ну, я один — это, наверное, не очень репрезентативная выборка. Но если опираться на сайты других разработчиков, которые я встречал за время своей работы, тоже сильно отличались от предложенной Вами структуры.
P.S.: Особенно «порадовало» наличие кучи JS скриптов в футере. Давайте тянуть этот хлам на все сайты MODX, чего уж :) Неважно, нужно или нет. Авось пригодится.
Ильин Сергей 05.04.2018 17:40 #
И да, конечно другие сайты отличаются, потому что этот вариант исключительно мой, из опыта работы с другими CMS я собрал самое удобное. Я не призываю делать так, а делюсь своим опытом.
Спасибо за ваше мнение, но могли бы и предложить что нибудь ;)
Игорь Сухинин 05.04.2018 17:50 #
Ильин Сергей 05.04.2018 18:07 #
Игорь Сухинин 05.04.2018 18:18 #
Я не совсем понял, чем плохо окончание .html у страниц?
Согласен, но при чем тут MODX? Вопрос только к верстальщику.
Все остальное… ну так, по желанию. В целом ничего плохого нет, но и не сказать, что несет большую практическую пользу. Немало сайтов без контактной формы вообще существуют, например. Т.е. это все же вопрос к конкретной реализации.
Ильин Сергей 05.04.2018 18:32 #
Если адрес заканчивается на .html или на / и без него всё это дубли одной страницы, и в поисковую выдачу они могут попасть как разные страницы, рейтинг поделится между ними, лучше избежать такую ситуацию, на практике мне попадались такие случаи в продвижении…
По адаптиву вопрос не только к верстальщику но и к программисту) а так как я по совместительству занимаюсь и тем и другим, то мне удобно и быстрее просто скопипастить большую часть хедера)
Игорь Сухинин 06.04.2018 08:58 #
Дело в том, что пропустить так можно почти каждый пункт :)
Что-то я не смог это повторить ни на одном своем сайте со стандартными настройками. Как Вы этого добиваетесь вообще? :) А вообще эта проблема чересчур переоценена. Не настолько глупы поисковые системы, чтобы только из-за такого ухудшать показатели сайта.
Эм… А это как так? Задача программиста — не испортить код фронтенда, написанный верстальщиком. Конечно, если программист настолько плох, что вставляет во фронтенд дополнительно свой кривой HTML-код… Ну, тут ничем не поможешь, надо просто бить :D
Ильин Сергей 06.04.2018 11:53 #
— Пару лет назад были видимо глупы, при размещении разных ссылок на сайт с .html или / появлялись дубли
— До читайте ответ до конца, для меня удобен такой вариант как для верстальника, потому что эта строчка всегда есть в вёрстке
— Повторюсь очередной раз, цель этого мануала поделиться своими опытом в разработке modx, в плане приложений и структурирования, и увидеть методы работы других людей, может я что то делаю не так, или есть более удобные способы. Но от Вас я пока ничего дельного не увидел, по переписке складывается впечатление что вы менеджер но не разработчик, Вас нагрели с какой то коробкой, и теперь вы агритесь на любые записи в которых присутствует это слово?)
Игорь Сухинин 06.04.2018 12:06 #
Вы совершенно неправильно поняли мой посыл. Я ни на что не «агрюсь».
Во-первых, я и менеджер, и программист (… и на дуде игрец). Количество выпущенных сайтов на MODX давно перевалило, пожалуй, за пару сотен. На текущий момент — техдир в своей компании, который любит и умеет еще сам программировать, в т.ч. на MODX. Сайт, на котором Вы сейчас пишите, был сделан в т.ч. моими руками.Ну, это если не вдаваться в подробности других моих работ в MODX. Кому надо, тот найдет.
Во-вторых, суть статьи тогда описана довольно слабо. Я не увидел дельных советов по разработке. Так, какие-то частные случаю, которые слабо поддаются обобщению. Вам, наверное, более ясно тогда стоит объяснять цель и задачи, которые Вы ставите и решаете в процессе написания своей статьи. Пока для меня суть очень размыта.
P.S.: И вообще, я только поддерживаю такие начинания. Я могу жестко критиковать, но это не значит, что я считаю Вашу работу отстоем. Я считаю, что обоснованная критика способствует развитию. Но нередко, конечно, критика воспринимается в штыки.
Ильин Сергей 06.04.2018 13:53 #
Олег 06.04.2018 13:38 #
Сергей, Игорь совершенно прав в том, что
Верстальщик верстает сайт, а программист интегрирует эту верстку в MODX. Если верстальщик пропишет в коде
— программист именно это вставит. Если адаптива нет (да, он должен быть, но проекты разные бывают) — то ваше самовольное
сломает верстку.
— а почему жестко прописан charset? А если не UTF-8 в настройках MODX? Может [[++modx_charset]] более правильно использовать?
— вот это тоже… Я, например, не один десяток сайтов собрал, вот ни разу это мне не надо было.
— ну а это совсем круто ) «Сначала добейся ©»? Все по сути Игорь написал.
Ильин Сергей 06.04.2018 14:03 #
за [[++modx_charset]] спасибо, но еще не приходилось менять кодировку
_load использую когда нужно добавить эффекты на появления контента при загрузке сайта, что бы пользователь не лицезрел дёргающий формирующийся DOM, а всё выезжало плавненько) ну или для экрана загрузки
Олег 06.04.2018 14:15 #
ну круто, да ) Но на самом деле — это не то, «как надо», это скорее «как не надо» (если править готовый сайт — то тут особо без вариантов, но с нуля верстать...)
_load — ну оно понятно, зачем это вам, но это что-то частное, практически личное ) Вы используете в таком виде, 99.9% разработчиков — в другом. Вы тогда напишите «вот так я делаю», у вас же посыл статьи (как я понял) — «вот как надо».
Ильин Сергей 06.04.2018 14:29 #
Я совсем и не подумал что люди могут воспринять это как приказ делать так, и никак иначе ):
Ильин Сергей 06.04.2018 14:34 #
Олег 06.04.2018 14:58 #
Пропишите стили в шапке — ничего не будет у вас скакать и махать (особенно если корректно с изображениями разрулите). Скачет разметка из-за того, что стили подгружаются в нижней части страницы и сначала рендерится как есть, а по мере подгрузки стилей — перерисовывается. Вызов css файла в шапке решит эту проблему.
Касательно «плавной загрузки» — это красиво (если сделать грамотно, в соответствии с дизайном страницы), но тут есть подводные камни. Вот смотрите:
То есть в вашем случае посетитель будет 1-5-30-60 секунд (в зависимости от откормленности и количества картинок, скорости интернета, доступности внешних серверов со шрифтами, скриптами) наблюдать анимированную заглушку. Как по мне — это далеко не самое лучшее решение. Уж лучше критический css в шапку положить, сделать ленивую загрузку изображений и т.д., но показать контент как можно быстрее (не в разобранном виде, конечно).
Олег 06.04.2018 15:01 #
Ильин Сергей 06.04.2018 15:13 #
Конечно это дизайнерское решение) не показывать же белый экран)
Ильин Сергей 06.04.2018 14:08 #
Костромин Игорь 04.04.2018 16:39 #
Алексей Либер 07.04.2018 21:15 #
Сам лично не раз делал свои кастомные сборки под различные типы задач, но пришел к одной простой мысли: если бюджет проекта настолько мал, что сложно потратить на него полчаса — час времени для первоначальной настройки, то имеет ли смысл за него вообще браться?
А если сайты штамповать, то всегда можно обратиться в сторону других движков.
Илья Уткин 17.04.2018 13:54 #
Но потом я понял — пишет-то новичок, собрал всего 10 сайтов, а уже пришёл к мысли, что повторяющиеся действия нужно автоматизировать и стандартизировать. Многие пункты очень здраво применены, структура шаблона верная. Так что направление выбрано правильно.
Поэтому я напишу, куда двигаться дальше. Во-первых, как уже сказали, посмотрите в сторону Fenom — ведь pdoTools и так используется на сайте, нужно только включить использование Fenom на страницах в системных настройках.
Вот, как будет выглядеть чанк main, например:
На мой взгляд, так чуточку понятнее.
Во-вторых, подумайте о превьюшках. Не стоит заставлять пользователя (админа) заранее нарезать картинки нужных размеров, есть куча сниппетов, которые позволяют уменьшать изображения, например, добавленные через ТВ. Ну и сами ТВ для картинок нужно бы тоже создать — у меня ни одного сайта не было, где такая ТВ-шка не пригодилась бы.
В-третьих, цвет вкладки вы прописали, а фавиконку — нет. Сделайте какую-нибудь нейтральную иконку и используйте её, если дизайнер не предоставил отдельно.
Ну и не могу не похвастаться своим коробочным решением — siteExtra. На данный момент им уже воспользовались минимум 1700 раз, что говорит о востребованности коробочных решений. Правда сейчас поступают сообщения о том, что на новой версии MODX есть какие-то проблемы с установкой, надо посмотреть, что там и как.
Ильин Сергей 17.04.2018 14:15 #
Нашёл много полезных дополнений в Вашей сборке.
Вараника 30.04.2018 11:02 #
Мг. Из них раз 50 минимум я. Но допиливаю, тебе уже писала как :)