Хозяину на заметку
25 Октября 2020
Хочу научиться делать сайты! Часть 7 Установка шаблона на ModX Evolution.

Хочу научиться делать сайты! Часть 7 Установка шаблона на ModX Evolution.

Попробуем интегрировать обычный шаблон HTML в Evolution и начнём знакомиться со служебными тегами, чанками и пр.

Чем примечательна CMS Evolution и её параллельная ветка ModX Revolution, так это тем, что для них не надо создавать специальных шаблонов со специфическими вставками непонятного кода. Достаточно взять любой, чистый, HTML шаблон сайта и интегрировать его в систему. Т.е. если вы заказали дизайнеру нарисовать сайт, а потом заказали верстальщику HTML вёрстку этого дизайна, т.е. воплощение дизайна в коде, то вы без проблем получите именно то, что вам нарисовали и сверстали. Ни одной лишней строчки кода на сайте не будет, только то что вам нужно. Никаких нагромождений непонятных стилей и неизвестных вам скриптов в коде не будет – всё просто и прозрачно.

У этой медали есть и обратная сторона, куда же без неё. Установить шаблон в один клик не получится, но это даёт вам полный контроль над всеми элементами шаблона, который вы сами адаптируете в процессе интеграции под Evolution. При этом вы имеете легкий доступ ко всем элементам шаблона страницы (шапке сайта, футеру, слайдерам и пр.) и возможность их легко изменять как душе угодно в последующем. В популярных WordPress, Drupal и не говоря уже про Joomla изменить часть шаблона (а идеально подходящего шаблона под ваши нужды не бывает) очень сложно и часто приводит к непредсказуемым последствиям. Наём нужного специалиста потребует денег и всё это вместе отнимет время. К тому же, вы будете ограничены только совместимыми с данными системами слайдерами, галереями, формами и пр. элементами. А ничто не ценится так высоко, как свобода выбора, и в электронном мире тоже.

Ранее, вы уже скачали бесплатный HTML шаблон сайта и сейчас мы начнём его интегрировать и параллельно изучать саму систему и HTML (специальный язык разметки на котором создаются всё веб страницы).

Распаковываем скачанный архив с шаблоном и смотрим на файлы. Куча всего и не понятно, что к чему. Давайте разбираться. Мы видим два типа файлов (если вы не видите расширения (тип) у файлов, то включите этот режим в windows). Первый тип – это сами HTML файлы, в данном случае статичные страницы-шаблоны и второй тип – изображения (PNG, ICO). Теперь обращаем внимание на папки – CSS, IMAGES и JS. В первой папке находятся стили – специальные файлы, отвечающие за визуальное представление HTML элементов на странице сайта, по-простому, эти файлы отвечают за красоту и имеют расширение CSS. Во второй папке находятся изображения – это обычные файлы с картинками или фотографиями, обычный контент сайта и в данном случае это демо-контент для шаблона плюс туда же автор шаблона добавил и иконки. И последняя папка JS – в этой папке находятся скрипты, написанные на языке Java. Именно файлы такого типа отвечают за интерактивную красоту на сайтах – галереи, слайдеры и пр. анимация. Ява скрипт позволяет взаимодействовать с HTML кодом страницы и при необходимости его динамически менять, не перезагружая саму страницу.

Запускаем наш FTP клиент и копируем три папки в корень нашего сайта (в папку public_html).

Хочу научиться делать сайты! Часть 7

Туда же, в корень сайта копируем файлы с иконками.

Хочу научиться делать сайты! Часть 7

Размещать вспомогательный файлы для сайта в специально отведённые для них папки это хорошая практика, которая позволяет отделить системные файлы самой CMS от файлов шаблона.

Ну а теперь начинается самое главное таинство – делаем первый шаблон и начнём с главной страницы сайта. Заходим в админку (если у вас там что-то открыто, то можете не закрывать, система позволяет работать в нескольких вкладках одновременно) и в меню «Элементы» выбираем шаблоны -> Новый шаблон.

Хочу научиться делать сайты! Часть 7

Вписываем имя нашего шаблона - «Главная страница» и заполняем описание – «шаблон главной страницы сайта». Описание рекомендую заполнять у всех вновь создаваемых элементов в админке, чтобы в будущем вы могли легко вспомнить для чего они создавались и какую функцию выполняют.

Теперь в любом текстовом редакторе (лучше всего в Notepad++) открываем файл index.html. Выделяем всё содержимое файла, копируем и вставляем в тёмное поле админки «Код шаблона»

Хочу научиться делать сайты! Часть 7

Нажимаем «сохранить + продолжить». Поздравляю, вы создали свой первый шаблон в CMS Evolution! На самом деле это получился не совсем шаблон, дело в том, что шаблон на то и шаблон что часть его элементов статичная, а часть динамически меняется в зависимости от отображаемого контента, т.е. шаблон это HTML каркас для контента и у разных по назначению страниц сайта эти шаблоны могут (и должны) быть разные. Сейчас мы этим и займёмся, но сначала назначим наш шаблон, т.е. правила отображения, главной странице нашего сайта. В левом поле со структурой нажимаем на заголовок страницы - «Evolution CMS Install Success» и открываем содержимое главной страницы. В поле «шаблон» указываем наш, только что созданный шаблон «Главная страница». Если у вас в выпадающем списке на появился новый шаблон, то просто пересохраните главную страницу. Сохраните страницу ещё раз, после изменения шаблона и нажмите на иконку «просмотр».

Вот и ваш сайт во всей красе, но только одна, главная страница, да и к тому же со статичным контентом. Продолжаем создавать (или редактировать) наш шаблон, чтобы он стал динамическим. Возвращаемся и открываем шаблон главной страницы для редактирования.

Смотрим на эти непонятные строки и постараемся их понять, заодно немного выучим теги HTML, без которых никуда, если вы хотите научиться делать сайты, конечно. Поехали:

<!DOCTYPE html>

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

Далее идёт:

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

- тег сообщающий браузеро что это HTML доумент и заодно кодировку языка, отсутствие указания языка никак не скажется на работе сайта, но для валидности (соблюдения правил и стандартов верстки) мы его оставим, но изменим на RU (русский):

<html class="no-js" lang="ru">

Теперь у нас «на пути»:

<head>

Это специальный тэг обозначающий начало служебного заголовка страницы. Здесь сразу хочу обратить внимание, что в основном все тэги в HTML бываю открывающие и закрывающие. Различаются они только наличием слэша (косой черты) перед названием у закрывающего тэга. Т.е. выглядит это так:

<head>. . . . .</head>

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

В служебных заголовках страниц (внутри head) обычно размещают ещё различные «служебные» тэги (которые не всегда имеют закрывающий элемент), там прописывают (указывают) путь где расположены стилевые файлы, подключают некоторые скрипты и пр. Всё что находится внутри <head> на сайте не отображается – это служебная информация для браузеров, чтобы они знали, что нужно загрузить и где взять для правильного и корректного отображения вашей страницы.

Хочу научиться делать сайты! Часть 7

Вся эта служебная информация для всех страниц сайта почти всегда одинаковая и поэтому работать с ней удобнее из одного места, не перепрыгивая с шаблона на шаблон, для этого мы её «вырежем» из кода шаблона и поместим в «chank». Запоминаем новое слово – чанк. Чанк это кусочек HTML кода который мы можем вставлять в любое место шаблона (и не только шаблона) просто написав название этого чанка в двойных фигурных скобках:

{{chank}}

Давайте попробуем это сделать.  Выделяем в нашем шаблоне мышкой всё от <head> до </head> и копируем. В верхнем меню выбираем Элементы/Чанки/Новый чанк. В появившейся вкладке в поле “Код чанка» вставляем наш скопированный код.

Хочу научиться делать сайты! Часть 7

Не забываем дать чанку название (только латинские буквы), например, “head” чтобы не путаться и заполним описание – «секция head для всех страниц» и сохраняем. Теперь нужно вернуться обратно в код шаблона и убрать всё от <head> до </head>, а вместо этого куска кода написать просто:

{{head}}

Хочу научиться делать сайты! Часть 7

Постарайтесь понять этот не сложный момент по замене или подстановке повторяющихся участков кода и считайте, что вы как минимум наполовину умеете делать сайты на Evolution. Вся наша дальнейшая работа будет сводится именно к этому – поиску и замене тех кусков кода, которые встречаются во всех шаблонах. Таких кусков как правило 3: служебный заголовок, который мы с вами только что сделали, шапка сайта и подвал (футер). Основное тело страницы у каждого шаблона уникально, для этого их и делают, поэтому шаблон со служебным заголовком, шапкой и футером можно считать универсальным шаблоном для конкретного сайта. Можете сами постараться сделать универсальный шаблон для нашего сайта удалив основное тело страницы и сделав чанки с шапкой и подвалом.

Дам подсказку, шапку сайта заключают в тег <header> а подвал в <footer>.

Ну а тем, кто ленится или не до конца понял я подскажу. Находим открывающий и закрывающий тэг header и копируем всё что внутри включая и сами тэги. Затем находим и открываем чанк header  (да, он уже есть в системе по умолчанию, но не совсем с тем содержимым которое нам нужно) удаляем всё что там есть и вставляем наш скопированный участок кода. Можно и просто удалить существующий Header и создать новый. Удаляем старое описание и вместо него пишем «шапка сайта». В поле «Новая категория» запишем новую категорию (создастся автоматически и подставится в поле "категория") – Шапка сайта. Жмём сохранить.

Возвращаемся в чанк «head» добавим несколько метатегов в параметры которых вставим специальные тэги Evolution и заодно с ними познакомимся.

Первый и самый важный тэг Evolution -

[(site_url)]

Это служебный тэг Evolution и вместо него при генерации страницы автоматически подставляется домен сайта. Вместе с HTML тэгом base этот тэг сообщает браузеру относительный путь для изображений и ссылок (относительно домена) и в случае переезда сайта на другой домен ничего править не нужно, всё подставится автоматически. Результат будет выглядеть так:

<base href="http://www.vasya_pupkin.ru"/>

Хочу научиться делать сайты! Часть 7

Возвращаемся на страницу шаблона и удаляем уже ненужный кусок от <header> до </header> и вместо него пишем {{header}}.

Листаем шаблон вниз и находим секцию footer. Аналогичным образом копируем всё содержимое этой секции в новый чанк (догадайтесь, с каким названием?) и вместо этой секции пишем {{footer}}.

И последнее из глобальных вещей, которые мы сегодня сделаем, это создадим чанк для скриптов, чтобы все они были в одном месте и при добавлении или изменении их состава не приходилось бы править все шаблоны. Делаем чанк {{scripts}} и помещаем туда строки, которые отвечают за вызов скриптов, а сам вызов чанка размещаем на их месте в шаблоне главной страницы.

Хочу научиться делать сайты! Часть 7

Вы, наверное заметили в коде шаблона вот такие строки «<!-- …. -->», это комментарии, которые игнорируются браузерами, но помогают людям понять чужой код страницы. Если они вам не нужны их можно удалить или дописать самим что-то.

В следующей части мы продолжим создавать и редактировать свой шаблон и займёмся меню, которое находится у нас в чанке “header” и которое присутствет на всех страницах сайта.

Комментарии (показать/скрыть)

Maxim.Zone

Ещё статьи по теме "Интернет"