Дорогие друзья, сегодня мы с вами сделаем лендинг на MODx Revo на основе HTML-шаблона из нашего магазина. Я думаю, что вы уже знаете, как устанавливать MODx Revo на сервер, поэтому я не буду на этом останавливаться. Если же все-таки среди вас есть тот, кто этого делать пока не умеет, то вот вам ссылка на статью “Как устанавливать MODx Revo”.
Если вы уже развернули MODx на сервере, то вам необходимо поставить следующие компоненты в разделе “Приложения -> Установщик”:
- Ace – редактор кода (официальный репозиторий)
- AjaxForm – компонент для отправки форм по технологии AJAX (репозиторий Modstore.pro)
- Filetranslit – для транслитерации наименовании файлов при загрузке (официальный репозиторий)
- FormIt – компонент для отправки форм (официальный репозиторий)
- frontendManager – для удобного администрирования сайта (репозиторий Modstore.pro)
- MIGX – для создания мульти TV-параметров (официальный репозиторий)
- pdoTools – пакет сниппетов для выборки ресурсов и пользователей (официальный репозиторий)
- TinyMCE – визуальный редактор (официальный репозиторий)
- sdStore – для добавления нового репозитория Modstore.pro (официальный репозиторий)
- Sendex – компонент для организации рассылок (репозиторий Modstore.pro)
- translit – для транлитерации URL (официальный репозиторий)
Установили? Если возникли вопросы, то вы сможете почитать статью “Первоначальная настройка MODx” и заодно вы сможете произвести базовую настройку нашей CMS.
Теперь непосредственно перейдем к самому основному. Если внимательно посмотреть шаблон, то мы увидим, что в папке “assets” лежат все необходимые файлы для отображения шаблона в браузере. Поэтому нам необходимо взять и загрузить все эти файлы в папку “assets” на нашем сервере. Выглядеть должно примерно так:
Сейчас нам с вами необходимо разбить наш HTML-шаблон на части. Если мы внимательно посмотрим, то у нас четко проявляются следующие элементы:
- часть кода между
- хедер нашего сайта: лого и меню
- футер нашего сайта
- часть кода со скриптами
Все эти части нам нужно выделить в отдельные чанки, которые мы назовем meta, header, footer и scripts соответственно. Перед тем как создавать данные чанки, я вам советую создать категорию “Элементы страниц” и при создании чанков указывать данную категорию, чтобы в дальнейшем в панели администратора был полный порядок. Вот, например, как у меня выглядит чанк “meta”
Здесь, я добавил некоторые теги от себя, мы к ним вернемся чуть позже. Код чанка получился следующий:
<base href="[[++site_url]]"/> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0"> <meta name="keywords" content="[[*seokeywords]]"/> <meta name="description" content="[[*seodescription]]"/> <title>[[*seotitle:default=`[[*pagetitle]]`]]</title> <link rel="shortcut icon" type="image/png" href="assets/images/favicon.png" /> <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/icofont.css"> <link rel="stylesheet" type="text/css" href="assets/css/magnific-popup.css"> <link rel="stylesheet" type="text/css" href="assets/css/bootsnav.css"> <link rel="stylesheet" type="text/css" href="assets/css/style.css"> <link rel="stylesheet" type="text/css" href="assets/css/responsive.css"> <script src="assets/js/modernizr.custom.js"></script> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Следющий чанк у нас будет называться “header”, это часть шаблона с логотипом и меню:
<!--Start Header--> <header id="header"> <nav class="navbar navbar-default bootsnav" data-spy="affix" data-offset-top="10"> <!--Start Container--> <div class="container"> <!-- Start Atribute Navigation --> <div class="attr-nav"> <a href="">Buy Now</a> </div> <!-- End Atribute Navigation --> <!-- Start Header Navigation --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu"> <i class="icofont icofont-navigation-menu"></i> </button> <a class="navbar-brand" href="[[++site_url]]"><img src="assets/images/logo.png" class="logo" alt=""></a> </div> <!-- End Header Navigation --> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-menu"> <ul class="nav navbar-nav navbar-right" data-in="fadeIn" data-out="fadeOut"> <li class="active"><a href="#header">Home</a></li> <li><a href="#about-area">About</a></li> <li><a href="#features-area">Features</a></li> <li><a href="#product-area">Product</a></li> <li><a href="#testimonial-area">Testimonial</a></li> <li><a href="#faq-area">FAQ</a></li> <li><a href="#contact-area">Contact</a></li> </ul> </div> <!-- /.navbar-collapse --> </div> <!--End Container--> </nav> <div class="clearfix"></div> </header> <!--End Header-->
Чанк “footer”:
<!--Start Contact Area--> <section id="contact-area"> <!--Start Container--> <div class="container"> <!--Start Heading Row--> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="section-heading text-center"> <h2>Have Any Question ?</h2> <p>Send us a email with your questions</p> </div> </div> </div> <!--End Heading Row--> <!--Start Contact Row--> <div class="row"> <!--Start Contact Form--> <div class="col-md-6 col-md-offset-2 col-sm-8"> <div class="contact-form"> <form action="#" method="post"> <div class="form-group"> <input type="text" class="form-control" placeholder="Name"> </div> <div class="form-group"> <input type="email" class="form-control" placeholder="Email"> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Subject"> </div> <div class="form-group"> <textarea class="form-control" cols="30" rows="10"></textarea> </div> <button type="submit">Submit</button> </form> </div> </div> <!--End Contact Form--> <!--Start Contact Info--> <div class="col-md-3 col-sm-4"> <div class="contact-info"> <!--Start Contact Info Single--> <div class="contact-info-single"> <h6><i class="icofont icofont-phone"></i> Call Us :</h6> <p>+01 12345 67890 <br> +02 12345 67890</p> </div> <!--End Contact Info Single--> <!--Start Contact Info Single--> <div class="contact-info-single"> <h6><i class="icofont icofont-email"></i> Mail Us :</h6> <p>info@yourmail.com <br> support@yourmail.com</p> </div> <!--End Contact Info Single--> <!--Start Contact Info Single--> <div class="contact-info-single"> <h6><i class="icofont icofont-phone"></i> Find Us :</h6> <p>25 Royal View Road <br> New York, USA</p> </div> <!--End Contact Info Single--> <!--Start Contact Social--> <div class="contact-social"> <h6>Follow Us :</h6> <ul> <li><a href=""><i class="icofont icofont-social-facebook"></i></a></li> <li><a href=""><i class="icofont icofont-social-twitter"></i></a></li> <li><a href=""><i class="icofont icofont-brand-linkedin"></i></a></li> <li><a href=""><i class="icofont icofont-social-pinterest"></i></a></li> </ul> </div> <!--End Contact Social--> </div> </div> <!--End Contact Info--> </div> <!--End Contact Row--> </div> <!--End Container--> </section> <!--End Contact Area--> <!--Start Footer--> <footer id="footer" class="bg-gray"> <div class="container"> <p class="text-center">© Copy 2018 All Rights Reserved</p> </div> </footer> <!--End Footer-->
В чанк футер я еще включил блок с контактами. И, наконец, у нас остался чанк “scripts”:
<script src="assets/js/jquery.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <script src="assets/js/owl.carousel.min.js"></script> <script src="assets/js/magnific-popup.min.js"></script> <script src="assets/js/bootsnav.js"></script> <script src="assets/js/custom.js"></script>
Отлично! Теперь нам нужно вставить код шаблона в “Начальный шаблон”, который я переименую в главную страницу и добавлю ему иконку домика.
Я не буду здесь приводить полный код шаблона, который у меня получился, так как он занимает достаточно много места. В шаблоне я заменил те части кода, которые мы вынесли в чанки, на конструкцию вида [[$meta]], где meta – это наименование чанка.
Если мы сейчас перейдем на наш сайт, то увидим, что наш шаблон уже грузится, но в нем нет функциональных частей. Нам с вами предстоит их реализовать. Остальные части я разобью на отдельные статьи.