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

Для начала установим нужные дополнения. Если вы забыли как устанавливать пакеты из репозитория, напомню. Заходим в Пакеты/Установщик

Нажимаем "Загрузить пакет"

И вбиваем в поиск нужный нам пакет

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

Ace - редактор HTML/CSS/PHP/JavaScript кода для удобной работы над чанками, сниппетами, плагинами и шаблонами страниц (что это такое мы узнаем ниже).

AjaxManager - плагин для быстрой работы админки на технологии ajax (без перезагрузки страницы)

Все эти дополнения вам нужно установить из официального репозитория, инструкцию как пользоваться к которому я привел выше. И два дополнения нужно установить из репозитория modstore.pro. Но для начала нужно создать нового поставщика пакетов.

Как подключиться к репозиторию modstore.pro

1. Переходим на сайт https://modstore.pro/

2. Регистрируемся 

Вводим email, пароль, имя. Жмём "Регистриция". На почту придёт письмо с ссылкой для подтверждения регистрации и паролем. Переходим по ссылке, входим в аккаунт.

3. Кликаем по своему имени и заходим в раздел "Ключи для сайтов"

кликаем "Создать ключ"

откроется такое окно

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

Копируем сам ключ и идём в админку Modx Revolution

4. Заходим в Пакеты/Установщик и кликаем на "Поставщики"

Жмём "Добавить нового поставщика"

Название - modstore.pro
Url поставищка - https://modstore.pro/extras/
Имя пользователя — ваша электронная почта, при помощи которой вы авторизуетесь на этом сайте.
Ключ API — ваш сгенерированный ключ доступа, который вы только что скопировали.
Описание — необязательное поле.

Жмем "Сохранить". Если вы всё правильно заполнили, то появится новый поставщик

Теперь мы можем установить еще два дополнения, которые в любом случае нам понадобятся. Этот репозиторий нам понадобится еще ни раз. Заходим в Пакеты/Установщик, кликаем на иконку открытия кнопки "Загрузить пакеты"

Выбираем "Выберите поставщика"

Выбираем поставщика modstore.pro

и теперь в том же окне поиска ищем и устанавливаем следующие дополнения:

TinyMCE Rich Text Editor - это текстовый редактор, с помощью которого мы будем форматировать текст на страницах

AdminPanel - панель внизу сайта, которая видна только администратору сайта для редактирования текущей страницы

Итого в нашем менеджере пакетов должно быть 5 дополнений

Внедрение HTML шаблона в Modx Revolution

1. Перенос всех файлов сайта на хостинг

Заходим в наш FTP-клиент (в моём случае это Coda2) и подключаемся к нашему сайту

нам нужно перекачать папки css, fonts, img и js из папки assets из папки сайта на компьютере в папку assets на сервере. Я это делаю просто зажатием и перетаскиванием всех папок в другое окно.

Дожидаемся успешного переноса.

2. Создание шаблона "Главная страница"

Идём в "Элементы"/ Начальный шаблон. Переименовываем его в "Главная страница". Копируем содержимое файла index.html и заменяем содержимое в "Код шаблона (HTML)"

То, что у нас подсвечивается код - это заслуга пакета Ace, который мы установили ранее. Сохраняем шаблон. Я вам предлагаю посмотреть результат. Кликните на Содержимое/Перейти на сайт

И о Боги...Вот он наш сайт

Кстати, если вы кликните по "Редактировать текущую страницу", то попадёте в админку на редактирование главной страницы. Это в работе дополнение "AdminPanel".

Мы уже видим резуальтат на лицо. Правда, на этом работа над сайтом только начинается. Самое время познакомиться со следующими понятиями.

Что же такое чанки, шаблоны, ресурсы, tv-параметры, сниппеты и плагины

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

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

Шаблоны - это целые HTML страницы, которые присваиваются к определенным ресурсам. Они нужны для того, чтобы не копировать один и тот же код целой HTML страницы для множества ресурсов.

Например, у нас будут несколько страниц Услуг, у которых будет один и тот же Шаблон "Услуги"

Ресурсы - это страницы нашего сайта: Главная страница, О компании, Главная услуг, множество страниц Услуг, Контакты и так далее

TV-параметры - это поля, в которые мы будем загружать определенную информацию: изображения, заголовки, текст и прочее.

Например, у нас будет tv-параметр img, который будет отвечать за загрузку изображений на страницу.

Сниппеты и плагины - это php код, с помощью которого мы будем делать навигацию, форму обратной связи, выводить статьи в ленте новостей и прочее.

В теории может быть не всё понятно, предлагаю перейти к практике.

Создание чанков

HTML код в шаблоне "Главная страница" очень объемный, его необходимо разбить на чанки. Тем более, что такие блоки, как "шапка сайта" (header) и "подвал" (footer) нам понадобятся и на других страницах.

Начнём с чанка подключения стилей и скриптов. Перейдите в Элементы и нажмите на плюсик возле слова "Чанки"

Чанк head

Назовём чанк head и скопируем в Код чанка следующий код:

<base href="[[!++site_url]]" />
<meta charset="[[++modx_charset]]">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>[[*pagetitle]] - [[++site_name]]</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
<!-- CSS 
========================= -->
<!--bootstrap min css-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!--owl carousel min css-->
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<!--slick min css-->
<link rel="stylesheet" href="assets/css/slick.css">
<!--magnific popup min css-->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!--font awesome css-->
<link rel="stylesheet" href="assets/css/font.awesome.css">
<!--animate css-->
<link rel="stylesheet" href="assets/css/animate.css">
<!--jquery ui min css-->
<link rel="stylesheet" href="assets/css/jquery-ui.min.css">
<!--slinky menu css-->
<link rel="stylesheet" href="assets/css/slinky.menu.css">
<!--plugins css-->
<link rel="stylesheet" href="assets/css/plugins.css">

<!-- Main Style CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/custom.css">

<!--modernizr min js here-->
<script src="assets/js/vendor/modernizr-3.7.1.min.js"></script>

Это модифицированный код из нашего HTML шаблона, куда я добавил:

<base href="[[!++site_url]]" /> - это настройка базового url для нормальной работы сайта.

<meta charset="[[++modx_charset]]"> - правильная кодировка сервера

<title>[[*pagetitle]] - [[++site_name]]</title> - в title будет подставляться Заголовок страницы и Название сайта

Теперь идём обратно в Шаблон Главной страницы и вместо

<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Lukani – Plant and Flower Shop eCommerce HTML Template </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">

<!-- CSS 
========================= -->
<!--bootstrap min css-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!--owl carousel min css-->
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<!--slick min css-->
<link rel="stylesheet" href="assets/css/slick.css">
<!--magnific popup min css-->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!--font awesome css-->
<link rel="stylesheet" href="assets/css/font.awesome.css">
<!--animate css-->
<link rel="stylesheet" href="assets/css/animate.css">
<!--jquery ui min css-->
<link rel="stylesheet" href="assets/css/jquery-ui.min.css">
<!--slinky menu css-->
<link rel="stylesheet" href="assets/css/slinky.menu.css">
<!--plugins css-->
<link rel="stylesheet" href="assets/css/plugins.css">

<!-- Main Style CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/custom.css">

<!--modernizr min js here-->
<script src="assets/js/vendor/modernizr-3.7.1.min.js"></script>

вставляем

[[$head]]

Это и есть вызов чанка в шаблоне. Тоже самое проделываем с другими блоками (чанками), которые будут присутствовать и в других шаблонах

Чанк menu_mobile

Вырезаем

<!--offcanvas menu area start-->
<div class="off_canvars_overlay">

</div>
<div class="offcanvas_menu">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="canvas_open">
<a href="javascript:void(0)"><i class="icon-menu"></i></a>
</div>
<div class="offcanvas_menu_wrapper">
<div class="canvas_close">
<a href="javascript:void(0)"><i class="icon-x"></i></a>
</div>



<div class="call-support">
<p>Телефон для справок: <a href="tel:89999999999">89999999999</a></p>
</div>
<div id="menu" class="text-left ">
<ul class="offcanvas_main_menu">
<li class="menu-item-has-children">
<a href="index.html"> Главная</a>
</li>
<li class="menu-item-has-children active">
<a href="services.html">Услуги</a>
<ul class="sub-menu">
<li><a href="service.html">Услуга 1</a></li>
<li><a href="service.html">Услуга 2</a></li>
</ul>
</li>
<li class="menu-item-has-children active">
<a href="about.html">О компании</a>
<ul class="sub-menu">
<li><a href="faq.html">Вопрос-ответ</a></li>
<li><a href="404.html">404 ошибка</a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="contact.html"> Контакты</a>
</li>
</ul>
</div>

<div class="offcanvas_footer">
<span><a href="#"><i class="fa fa-envelope-o"></i> demo@example.com</a></span>
<ul>
<li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="twitter"><a href="#"><i class="fa fa-vk"></i></a></li>
<li class="pinterest"><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--offcanvas menu area end-->

и копируем этот код в новосозданный чанк menu_mobile. А за место него вставлем конструкцию

[[$menu_mobile]]

Чанк header

Вырезаем код

<header>
<div class="main_header header_3 header_transparent sticky-header">
<div class="header_container">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-2 col-md-3 col-4">
<div class="logo">
<a href="index.html"><img src="assets/img/logo/logo.png" alt=""></a>
</div>
</div>
<div class="col-lg-6">
<!--main menu start-->
<div class="main_menu menu_three menu_position">
<nav>
<ul>
<li><a class="active" href="index.html">главная</a></li>
<li><a href="#">Услуги <i class="fa fa-angle-down"></i></a>
<ul class="sub_menu pages">
<li><a href="service.html">Услуга</a></li>
</ul>
</li>
<li><a href="#">О компании <i class="fa fa-angle-down"></i></a>
<ul class="sub_menu pages">
<li><a href="faq.html">Вопрос-ответ</a></li>
<li><a href="404.html">404 ошибка</a></li>
</ul>
</li>
<li><a href="contact.html"> Контакты</a></li>
</ul>
</nav>
</div>
<!--main menu end-->
</div>

<div class="col-lg-4 col-md-6 col-sm-5 col-6">
<div class="header_right_info header_right_two">
<div class="search_container">
<form action="#">
<div class="search_box">
<input placeholder="Поиск по сайту..." type="text">
<button type="submit"><i class="icon-search"></i></button>
</div>
</form>
</div>
<p><i class="icon-phone"></i> 8999 <span class="tel_big">999999</span></p>

</div>
</div>
</div>
</div>
</div>
</div>


</header>
<!--header area end-->

И вставляем его в новосозданный чанк header. А вместо него на главной пишем

[[$header]]

Чанк scripts

Идём вниз Шаблона Главная страница, находим

<!-- JS
============================================ -->
<!--jquery min js-->
<script src="assets/js/vendor/jquery-3.4.1.min.js"></script>
<!--popper min js-->
<script src="assets/js/popper.js"></script>
<!--bootstrap min js-->
<script src="assets/js/bootstrap.min.js"></script>
<!--owl carousel min js-->
<script src="assets/js/owl.carousel.min.js"></script>
<!--slick min js-->
<script src="assets/js/slick.min.js"></script>
<!--magnific popup min js-->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!--counterup min js-->
<script src="assets/js/jquery.counterup.min.js"></script>
<!--jquery countdown min js-->
<script src="assets/js/jquery.countdown.js"></script>
<!--jquery ui min js-->
<script src="assets/js/jquery.ui.js"></script>
<!--jquery elevatezoom min js-->
<script src="assets/js/jquery.elevatezoom.js"></script>
<!--isotope packaged min js-->
<script src="assets/js/isotope.pkgd.min.js"></script>
<!--slinky menu js-->
<script src="assets/js/slinky.menu.js"></script>
<!-- Plugins JS -->
<script src="assets/js/plugins.js"></script>

<!-- Main JS -->
<script src="assets/js/main.js"></script>

Вырезаем, пишем вместо этого

[[$scripts]]

Сохраняем, создаём новый чанк scripts и вставляем туда этот код.

Чанк footer

<!--footer area start-->
<footer class="footer_widgets">
<div class="footer_top">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="widgets_container contact_us">
<h3>Opening Time</h3>
<p><span>Mon - Fri:</span> 8AM - 10PM</p>
<p><span>Sat:</span> 9AM-8PM</p>
<p><span>Suns:</span> 14hPM-18hPM</p>
<p><b>We Work All The Holidays</b></p>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<div class="widgets_container widget_menu">
<h3>Information</h3>
<div class="footer_menu">
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="checkout.html">Checkout</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="faq.html">Frequently Questions</a></li>
<li><a href="wishlist.html">Wishlist</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-5">
<div class="widgets_container widget_app">
<div class="footer_logo">
<a href="index.html"><img src="assets/img/logo/logo.png" alt=""></a>
</div>
<div class="footer_widgetnav_menu">
<ul>
<li><a href="#">Payment</a></li>
<li><a href="#">Affiliates</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Internet</a></li>
</ul>
</div>
<div class="footer_social">
<ul>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
</ul>
</div>
<div class="footer_app">
<ul>
<li><a href="#"><img src="assets/img/icon/icon-app.jpg" alt=""></a></li>
<li><a href="#"><img src="assets/img/icon/icon1-app.jpg" alt=""></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="widgets_container widget_menu">
<h3>My Account</h3>
<div class="footer_menu">
<ul>
<li><a href="my-account.html">My Account</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="cart.html">Shopping cart</a></li>
<li><a href="checkout.html">Checkout</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="#">Order History</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="widgets_container widget_menu">
<h3>Customer Service</h3>
<div class="footer_menu">
<ul>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="#">Terms of use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="contact.html">Site Map</a></li>
<li><a href="my-account.html">My Account</a></li>
<li><a href="#">Returns</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="footer_bottom">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6">
<div class="copyright_area">
<p class="copyright-text">&copy; 2021 <a href="index.html">Lukani</a>. Made with <i
class="fa fa-heart text-danger"></i> by <a href="https://hasthemes.com/"
target="_blank">HasThemes</a> </p>

</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="footer_payment">
<a href="#"><img src="assets/img/icon/payment.png" alt=""></a>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--footer area end-->

Чанк newsletter

<!--newsletter area start-->
<div class="newsletter_area_start newsletter_two">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section_title">
<h2>Get <span>20% Off</span> Your Next Order</h2>
</div>
<div class="newsletter_container">
<div class="subscribe_form">
<form id="mc-form" class="mc-form footer-newsletter">
<input id="mc-email" type="email" autocomplete="off" placeholder="Enter you email" />
<button id="mc-submit">Subscribe</button>
<div class="email_icon">
<i class="icon-mail"></i>
</div>
</form>
<!-- mailchimp-alerts Start -->
<div class="mailchimp-alerts text-centre">
<div class="mailchimp-submitting"></div><!-- mailchimp-submitting end -->
<div class="mailchimp-success"></div><!-- mailchimp-success end -->
<div class="mailchimp-error"></div><!-- mailchimp-error end -->
</div><!-- mailchimp-alerts end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!--newsletter area end-->

Чанк main_content

А в чанк main_content "складываем" всё остальное (код не буду приводить, слишком большой, думаю, и так понятно)

В итоге у нас должен получиться вот такой Шаблон "Главная страница" 

<!doctype html>
<html class="no-js" lang="en">

<head>
[[$head]]
</head>

<body>
<!--header area start-->
[[$menu_mobile]]
[[$header]]

[[$main_content]]

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

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