Бесплатные шаблоны для вашего сайта, в свободном доступе

Повторяющиеся элементы шаблона сайта на Modx. Шапка и меню на Modx.


Когда все подготовительные моменты закончены, перейдем непосредственно к тому, чтобы проанализировать скачанный шаблон, выделить в нем основные повторяющиеся части, такие как шапка, подвал, меню, левое меню, если оно есть, и натянуть их на CMS Modx. Ведь мы здесь и собрались для того, чтобы разобраться, как же получить бесплатный шаблон для Modx. Первым делом откройте шаблон Arbitrary, который мы скачивали в предыдущей статье и рассмотрите какие html файлы там есть. Для нас имеют значение файлы about, contact, gallery, index, services. Файл codes нас мало интересует, потому что содержит в себе различные типографские и функциональные единицы, к нему стоит обращаться по необходимости. Видим, что подвал, шапка и меню у страниц в основном одинаковое, отличается только главная страница, т.к. на ней под меню имеется слайдер, с нее и начнем. 

В админке Modx переходим на вкладку Элементы-Шаблоны, видим шаблон BaseTemplate, переименовываем его в Главная. Оставляем содержимое шаблона вида:

<!DOCTYPE html>
<html>
<head>
[[$head]]
</head>
<body>
<!-- Banner -->
<div class="banner">
[[$header]]
[[$slider]]
</div>
<!-- //Banner -->
<!-- Footer -->
[[$footer]]
<!-- //Footer -->
[[$scripts]]
</body>
</html>

Именно такой код станет основой для будущего шаблона главной, разбила я его на такие составные элементы не просто так. Здесь отражены основные части, которые не меняются из страницы в страницу. Единственный специфичный элемент, присущий главной это слайдер. А теперь по порядку создадим каждый чанк и разберемся, что же он будет содержать в себе, и как адаптировать его содержимое для Modx. Надеюсь все знают, что чанк это html код, который может использоваться много раз на нашем сайта. Чтобы по несколько раз не копировать один и тот же код, такие чанки и создаются.

Оформление head в Modx. Как выделить head из шаблона сайта.

Начнем с чанка head. Предварительно создадим три TV поля для SEO, это поля seokeyw, seodesc и seoh1. Эти поля необходимы, для заполнения SEO информации о страницах нашего сайта. Расскажу на примере keyw, как создать поле, а далее по аналогии. Заходим Дополнительные поля-Новое дополнительное поле, имя  seokeyw, подпись Keywords, параметры ввода оставляем по умолчанию Текст, доступно для шаблонов отмечаем Главная, других пока нет, но эти поля должны быть во всех видах шаблонов. Далее создаем оставшиеся 2 поля и для них категорию SEO, Дополнительные поля-Новая категория. Теперь у созданных полей отметим эту самую категорию.

Двигаемся дальше. Заходим Элементы-Чанки-Новый чанк. Имя head, далее копируем туда все, что содержит между тегами head из нашего скачанного шаблона. Но это еще не все, необходимо переписать пути к файлам, вынести скрипты в отдельный чанк scripts перед закрывающимся тегом body и приспособить title,keyword и description к Modx. Ко всем путям добавляем assets/, т.к. мы помним, что картинки, css и js заливали именно в эту папку. Затем добавляем конструкцию:

<base href="[[!++site_url]]" />

Она необходима для правильного отображения ссылок сайта и ЧПУ. Далее удаляем содержимое title и вставляем следующую конструкцию:

[[*longtitle:is=``:then=`[[*pagetitle]]`:else=`[[*longtitle]]`]]

Она означает, что, если значение longtitle пусто, то выводим pagetitle, в противном случае longtitle. Это стандартные поля Modx, которые есть у каждого ресурса. Надеюсь, все знают, что это за поля. Далее по аналогии вставляем конструкцию с участием уже созданных нами SEO полей, если их значения пусты, то будет выводиться стандартный заголовок страницы, если же заполнены, то новые данные.

<meta name="description" content="[[*seodesc:is=``:then=`[[*pagetitle]]`:else=`[[*seodesc]]`]]">
<meta name="keywords" content="[[*seokey:is=``:then=`[[*pagetitle]]`:else=`[[*seokey]]`]]">

Теперь вынесем все скрипты(кроме jquery.min.js, ведь это инициализация jquery) в новый чанк scripts, который расположен перед закрывающемся тегом body, это улучшает скорость загрузки страницы, ведь скрипты подтягиваются немного позже, а страница не будет долго "зависать"  в неприглядном виде. В итоге получим содержимое чанка Head:

<base href="[[!++site_url]]" />
<title>[[*longtitle:is=``:then=`[[*pagetitle]]`:else=`[[*longtitle]]`]]</title>
<!-- For-Mobile-Apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="[[*seodesc:is=``:then=`[[*pagetitle]]`:else=`[[*seodesc]]`]]">
<meta name="keywords" content="[[*seokey:is=``:then=`[[*pagetitle]]`:else=`[[*seokey]]`]]">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //For-Mobile-Apps -->
<!-- Custom-Stylesheet-Links -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css" media="all"/>
<link rel="stylesheet" href="assets/css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/css/flexslider.css" type="text/css" media="screen" />
<!-- //Custom-Stylesheet-Links -->
<!-- Web-Fonts -->
<link href='//fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
<!-- //Web-Fonts -->
<!--JS for animate-->
<link href="assets/css/animate.css" rel="stylesheet" type="text/css" media="all">
 <script type="text/javascript" src="assets/js/jquery.min.js"></script>

А содержимое чанка Scripts:

<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<!--gallery-->
<!--JS for animate-->
<script src="assets/js/wow.min.js"></script>
<script>
new WOW().init();
</script>
<!--//end-animate-->

Создание меню на MODX, шаблоны для пунктов меню.

Следующим этапом будет создание чанка header. По аналогии с чанком head создаем чанк и даем ему название header, затем копируем в него содержимое блока с классом header из нашего шаблона для Modx. В данном шаблоне в шапке отсутствую картинки, к которым нужно переписать пути, в логотипе содержится текст. Изменим содержимое этого логотипа на слово Test и в ссылку поставим слеш, это будет переход на главную. Следующим этапом будет созданием меню на Modx. Для этого можно использовать Wayfinder или pdoMenu, возьмем последний вариант. Для генерации простого меню, как в шаблоне, достаточно будет использовать весьма несложный вызов, но у нас есть определенный вид у пунктов меню, поэтому используем еще и шаблоны для оформления. И получим следующий код для вывода нашего меню:

[[!pdoMenu?
&parents=`0`
&tplOuter=`@INLINE <ul>[[+wrapper]]</ul>`
&tpl=`@INLINE <li[[+classes]]><a href="[[+link]]" [[+attributes]]><span data-hover="[[+menutitle]]">[[+menutitle]]</span></a>[[+wrapper]]</li>`
&tplHere=`@INLINE <li><a [[+classes]] href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
]]

Шаблоны в отдельные чанки не выносила для экономии времени, но это не воспрещается, потом в параметрах вызова нужно будет только прописать нужные названия чанков. Полная документация по PdoMenu доступна по ссылке, там очень много параметров для вывода, подойдут почти для любого случая, если будут вопросы, вы всегда можете обратиться за помощью. В итоге получаем содержимое чанка  header:

<!-- Header -->
<div class="header">
<div class="container">
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid"> <div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand wow fadeInLeft animated" data-wow-delay=".5s" href="/">Test</a>
</div> <div class="navbar-collapse collapse hover-effect wow fadeInRight animated" data-wow-delay=".5s" id="navbar">
[[!pdoMenu?
&parents=`0`
&tplOuter=`@INLINE <ul>[[+wrapper]]</ul>`
&tpl=`@INLINE <li[[+classes]]><a href="[[+link]]" [[+attributes]]><span data-hover="[[+menutitle]]">[[+menutitle]]</span></a>[[+wrapper]]</li>`
&tplHere=`@INLINE <li><a [[+classes]] href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
]]
</div>
</div>
</nav>
<!-- //Navbar -->
</div>
</div>

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


Дата публикации: .