[[*pagetitle]]

Создание сайта на Modx Revolution. Урок 1. HTML шаблон сайта

Здравствуйте. Это первый урок по созданию сайта на Modx Revolution для начинающих. Мы не будем здесь разбирать, как нарисовать и отверстать в HTML свой собственный сайт. Мы будем учиться на базе уже готого шаблона, который можно скачать бесплатно или купить на специальных сервисах. Здесь я опубликую HTML шаблон из нескольких основных страниц: Главная, О компании, Новости, Галерея, Контакты. Также здесь будет Блог, небольшой личный кабинет и. интернет-магазин. Мы будем идти от простого к сложному. Но я специально подобрал шаблон со всеми всевозможными страницами и даже такими как страница 404-ой ошибки или страницы входа в аккаунт, чтобы в конце мы научились делать как простой сайт так и интернет-магазин с личным кабинетом. Поверьте, в этом нет ничего сложного.

Мы будем использовать вот этот шаблон. Здесь 28 страниц, включая 5 разновидностей Главной, каталог с товарами, страницу товара, ленту блога, страницу поста с комментариями, страниц о компании, сервисе, 404 ошибки, личного кабинета и прочих. В общем это максимально расширенная версия шаблона, который позволит нам сделать крупный интернет-магазин. Но начнем мы с простого: сайт с главной страницей, о компании, услуги, контакты. И первое что нам надо будет сделать — это вычленить эти страницы из данного шаблона.

Главная страница

Я решил использовать 3-ий вариант главной страницы. Там, как мне кажется, красивее слайдер и уместный приветственный блок после слайдера.

Страница «О компании»

На этой странице мы дадим полную информацию о нашей компании. Описание, отзывы, парнеры, отличительные качества. И всё это будет редактируемым через админку.

Страница «Услуги»

Здесь будут представлены какие-то наши услуги и обязательно сделаем так, чтобы их можно было добавлять и редактировать

Страница «Часто задаваемые вопросы»

Раздел, на котором мы будем размещать часто задаваемые клиентами вопросы и отвечать на них. Соответственно, этот раздел тоже будет полностью администрируемым

Страница Контактов

На этой странице мы поработаем над картой, контактной информацией и формой обратной связи.

Страница 404 ошибки

Эта страница, как пример технической страницы. 404 ошибка нужна для информирования посетителя о несуществующей странице. Также мы создадим sitemap.xml и страницу результатов поиска

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

Редактирование шаблона у себя на компьютере

Для начала вам нужно скачать редактор HTML и CSS кода. Для Mac OS я рекомендую Coda2 или Sublime Text. Для Windows — программу Notepad++. Установите любую из программ себе на компьютер. Теперь скачайте архив www (ссылка на скачивание также будет внизу по кнопке «Скачать») и откройте файл index.html с помощью установленого редактора кода.

Вы увидите вот такую картину (я пользуюсь Coda2)

Здесь я предлагаю поменять следующее:

1. Убрать блок с товарами

Так как мы на данном этапе не делаем интернет-магазин я предалагаю убрать лишний блок с товарами. Находим вот этот код (product area start)

и полностью удаляем этот блок (с product area start по product area end)

2. Удаление миникорзины и иконки корзины

Также я удалю иконку корзины и весь всплыващий блок с миникорзиной

Мы обязательно еще вернемся к этому, когда будем делать на основе этого сайта интернет-магазин, но на данном этапе нам этот блок будет только мешать. Находим код:

и удаляем его. Находим блок mini cart

И также удаляем целый блок. Если обновим шаблон в браузере, то увидим такую картину:

3. Заменяем иконку юзера и сердечка на номер телефона

Предлагаю заменить иконку человечка и сердечка на номер телефона. Блок:

удаляем и вставляем на его место

И здесь начинается самое интересное. Особенно для тех, кто впервые видит HTML код. Мы сейчас попробуем поработать над стилями. Создайте в папке assets/css файл custom.css

И подключите его в блоке head после

и добавьте в этот файл строчку

теперь обновляем наш шаблон в браузере и вуаля

4. Поменяем логотип на наш собственный

Для этого нам понадобится пробграмма Photoshop СС или другой редактор изображений. Открываем в Photoshop изображение из папки img/logo logo.png

выбираем инструмент выделение

и нажимаем backspace. Теперь у нас пустое поле. Здесь вы можете разместить свой логотип. я же просто напишу Лого и вставлю какой-нибудь значок

Сохраняем изображение в папку img/logo поверх старого logo.png

и обновляем сайт. У нас обновилось лого в шапке,

5. Редактируем меню сайта

Предлагаю сразу поработать над меню. Русифицировать его и оставить только нужные страницы. Находим в файле index.html с помощью сочетаний клавиш Ctrl+F (Windows) или Cmd+F: . У меня это 210 строчка

В этом блоке у нас содержится главное меню. Меняем весь блок

Тут же в блоке сразу заменю Search product. на Поиск по сайту. Смотрим результат:

Взглянем, что там у нас в мобильнйо версии — Правой кнопкой мыши в любом месте сайта / Просмотреть код. Откроется инспектор

Нажмем на кнопку отображения адаптивной версии

Чтобы удобнее было просматривать мобильную версию нажмем сюда

Выберем Iphone 6/7/8 Plus и выставим удобное увеличение. У меня это 82%

Теперь можно работать с мобильной версией. Откроем меню и посмотрим что там

Меню очень удобное, но мы видим, что десктопная изменения, которыен мы сделали для десктопной версии не затронули мобильную. Исправляем. Находим offcanvas menu area start, у меня это 46 строчка

Выделяем до . Удаляем. Вместо этого блока вставляем

Мы убрали лишние элементы (можете их не убирать, их можно использовать), оставили только страницы, которые определили для этого сайта (Главная, О компании, Услуги, Вопрос-ответ, 404 ошибка, Контакты), убрали лишние соц. сети, добавил VK и Instagram и вот что у нас получилось

Тоже самое можно проделать с остальными страницами, но я этого делать не буду, так как составлять чанки я буду из главное страницы. Что такое чанки — мы узнаем в следующих уроках. А на сегодня, наверное, хватит. На этом работу с шаблоном закончим. В следующих уроках разберем как установить систему Modx Revolution, настроить её и вставить наш HTML шаблон в сайт.

Источник

MODX — Шаблоны

Шаблон — это элемент MODX, представляющий собой заготовку, на основании которой может осуществляться вывод любого количества ресурсов. Для того чтобы шаблон использовался для вывода некоторого ресурса, он (шаблон) должен быть связан с ним (ресурсом).

Подключение шаблона к ресурсу осуществляется через поле «Шаблон».

После этого подключенный (выбранный) шаблон будет использоваться для вывода этого ресурса.

Понять назначение шаблона и то, как он связан с ресурсами очень просто, если представить шаблон домом, а ресурс человеком, живущим в этом доме. Дом, так же как и шаблон (страница) состоит из множества деталей (крыша — шапка страницы, стены – каркас страницы, основная часть фасада – основное содержимое страницы, подвал – нижняя часть страницы и т.д.).

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

Внимание: Каждый ресурс (страница) в MODX Revolution может использовать в качестве своего вывода только один шаблон. Т.е. MODX не разрешает для вывода ресурса одновременно использовать несколько шаблонов. Но в любое время ресурсу можно назначить другой шаблон. Для этого необходимо на странице редактирования ресурса выбрать нужное значение из раскрывающего списка «Шаблон» и нажать на кнопку «Сохранить». После этого вывод ресурса уже будет осуществляться на основании указанного (другого) шаблона.

Где находятся шаблоны в админке

В админке (менеджере) шаблоны находятся на левой панели во вкладке «Элементы».

Шаблоны состоят из полей: имя, описание, иконка, код шаблона (html) и др.

Основные поля шаблона — это имя и код шаблона (HTML). Имя — это название шаблона. Код шаблона — это его содержимое, на основании которого и будет осуществляться вывод ресурса. Код шаблона в большинстве случаев представляет собой обычную HTML-страницу с наличием в ней специальных тегов MODX (полей ресурса, TV-переменных, чанков, плейсхолдеров, ссылок, системных переменных, вызовов сниппетов). Эти специальные теги и выполняют всю магию. Они выводят данные (значения любых полей) текущего ресурса, формируют динамическое меню страницы, а также любой другой контент, который может быть связан или нет с этим (текущим) ресурсом.

Создание шаблона

Создание шаблона в админке осуществляется посредством выполнения следующих шагов:

1. Открыть в левой панели админки вкладку «Элементы».
2. Нажать на значок «+» напротив заголовка «Шаблоны».
3. В поле имя ввести название шаблона (например, Шаблон1).
4. В поле код шаблона (HTML) ввести необходимое содержимое.
   Например:

    
[[*longtitle]]
 ID (идентификатор) страницы: [[*id]] 
Аннотация (введение): [[*introtext]] 
Заголовок ресурса в меню: [[*menutitle]] 
[[*content]]  

Внимание: После создания шаблон автоматически не назначается ресурсам. Указание шаблона определённым ресурсам производится через их редактирование. Т.е. необходимо будет произвести изменения в каждом ресурсе, а именно открыть ресурс, выбрать из раскрывающего списка созданный шаблон и нажать на кнопку «Сохранить».

Редактирование шаблона

Редактирование шаблона в админке осуществляется следующим образом:

1. Открыть в левой панели админки вкладку «Элементы».
2. Раскрыть содержимое раздела «Шаблоны», нажав на значок треугольника.
3. Нажать левой кнопкой мыши на название необходимого шаблона.
4. Внести изменения в необходимые поля шаблона.
5. Нажать на кнопку «Сохранить».

Где хранятся шаблоны

Шаблоны MODX по умолчанию хранятся в таблице базы данных modx_site_templates (modx — это префикс для таблиц, назначаемый во время установки системы).

Начиная с версии MODX 2.2.x появилась также возможность хранить код шаблона в файле.

Чтобы это сделать необходимо на странице создания/редактирования шаблона выполнить следующее:

1. Установить галочку в поле «Статичный».
2. Выбрать из раскрывающего списка «Источник файлов для статичного файла» базовый каталог. Базовый каталог — это каталог относительно которого будет указываться расположение статичного файла.
3. Указать в поле «Статичный файл» расположение файла относительного базового каталога.
4. Нажать на кнопку «Сохранить».

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

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

Использование полей ресурса в шаблоне

Получение значений полей ресурса в шаблоне осуществляется посредством следующего синтаксиса:

Список доступных полей ресурса можно посмотреть здесь. Например, вывести значение поля pagetitle текущего ресурса в тег title:

Например, вывести содержимое текущего ресурса:

Теги, предназначенные для вывода значений полей ресурса, могут также как и другие теги MODX, иметь фильтры вывода. Например, выведем значение поля «introtext» в блок div с классом intro, используя 2 фильтра. Первый фильтр вывода будем использовать для исключения из содержимого поля introtext любых HTML-тегов. Второй фильтр будем использовать для того чтобы вводить на экран не всё содержимое этого поля, а только первые 200 символов. Если данное поле будет иметь большее количество символов, то в конце строчки отобразить знак многоточия (. ).

 
[[*introtext:stripTags:ellipsis=`200`]]
 

TV-переменные в шаблонах

Если шаблон сравнивать с домом, то TV-переменные (переменные шаблона) можно представить как комнаты этого дома. Добавление TV-параметра — это получается как добавление новой комнаты в дом.

TV-переменные — это дополнительные поля, которые может иметь ресурс. Привязываются TV-поля к ресурсу через шаблон. MODX позволяет добавить к ресурсам бесконечное число дополнительных полей (TV-переменных) посредством шаблона.

Например, необходимо добавить ко всем ресурсам, имеющим шаблон «city», дополнительное поле photo. Чтобы это осуществить необходимо выполнить следующие действия:

1. Необходимо создать TV-переменную photo.
2. Установить этой переменной на соответствующих вкладках в качестве типа ввода и вывода необходимое значение. Например, изображение.
3. На вкладке «Доступно для шаблонов» установить галочку напротив шаблона «city».

После этого у ресурсов, имеющих шаблон «city» появится дополнительное поле.

Для того чтобы вывести значение поля (TV-параметра) city в шаблоне необходимо использовать следующую конструкцию:

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

Источник