< TrywaR

name='Сергей'
last_name='Ильин' />

Теги

Комментарии ()

    +
    T
    >

    MODX Revo > Допил коробочного функционала

    Полный текст с ошибками
    20.11.2018 01:40
    21.11.2018 02:12
    996

    /* Превью

    Подпилим там и сям, и удобно структурируем админку, добавим адаптив под СЕО и прочие плюшки, копипасть братиш, не ленись!

    */

    Здравствуй %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 на конце адреса
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]

#Редирект с index.php для главной
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /index\.(php|html|htm)\ HTTP/ 
RewriteRule ^(.*)index\.(php|html|htm)$ $1 [R=301,L]

    * Смотрим чтобы вот этот код после 'The Friendly URLs part' был разкоменчен
    * Нужно дополнительно поправить в админке "Содержимое - Типы содержимого - HTML" поставить там '/'
    Этими действием мы исключаем дубли страниц из поиска

    Кроме того нужно добавить параметры кэширования и сжатия файлов

    # Enable Compression
  <IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/plain
  </IfModule>
  <IfModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
  </IfModule>
  
  # Leverage Browser Caching
  <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType image/webp "access 1 year"
  	ExpiresByType application/octet-stream "access 1 year"
  	ExpiresByType application/x-font-otf "access 1 year"
    ExpiresByType text/css "access 1 month"
    ExpiresByType text/html "access 1 month"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType text/x-javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresDefault "access 1 year"
  </IfModule>
  <IfModule mod_headers.c>
  <filesmatch "\.(ico|flv|jpg|jpeg|webp|png|gif|css|swf)$">
  	Header set Cache-Control "max-age=31536000, public"
  </filesmatch>
  <filesmatch "\.(html|htm)$">
  	Header set Cache-Control "max-age=7200, private, must-revalidate"
  </filesmatch>
  <filesmatch "\.(pdf)$">
  	Header set Cache-Control "max-age=86400, public"
  </filesmatch>
  <filesmatch "\.(js|otf|ttf|woff|woff2)$">
  	Header set Cache-Control "max-age=31536000, private"
  </filesmatch>
  </IfModule>

    sitemap.xml - карта сайта для поисковиков

    Создаём ресурс с названием sitemap, указываем Тип содержимого - XML, и добавляем в Содержимое вывод карты сайта.

    [[!pdoSitemap]]

    * Карта выводится с помощью приложения pdoTools, оно было в списке приложений выше.

    robots.txt - параметры индексирования для поисковиков

    добавляем в корень сайта файл robots.txt со следующим содержимым

    User-agent: * 
Disallow: /manager/ 
Disallow: /assets/components/ 
Disallow: /core/ 
Disallow: /connectors/ 
Disallow: /index.php 
Disallow: *?

Host: site-name.ru

Sitemap: site-name.ru/sitemap.xml

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

    Шаблоны:
    Основной шаблон

    <!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

    Используем 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

    На этом пока что всё...
    Эта статья была перенесена с сайта modx.ru, из за частых падений сайта в неподходящие моменты ):

    Файлы:

    Файлы
    База, логин: admin пароль: p3FELqaUK9Rarx7zoBYg

      Привет %USER_NAME%, вижу ты тут впервой?
      Как к тебе обращаться?