Хозяину на заметку
20 Октября 2020
Хочу научиться делать сайты! Часть 9 ModX Evolution - создаём шаблоны основных документов в нашем блоге.

Хочу научиться делать сайты! Часть 9 ModX Evolution - создаём шаблоны основных документов в нашем блоге.

В седьмой части мы сделали шаблон главной страницы нашего блога. Теперь продолжаем её усовершенствовать и начинаем делать шаблоны для остальных страниц сайта. Используем сниппеты, плейсхолдеры и знакомимся с TV.

Самый важный и главный шаблон – это шаблон документа внутренней страницы сайта. Этот шаблон будет отвечать за вывод информации, которую мы, как будущие авторы, будем писать в блоге. Давайте найдём его в нашем скаченном архиве и попытаемся интегрировать в админку.

Нам нужен файл single-standard.html. Именно он загружается, когда мы кликаем на название той или иной статьи. Открываем этот файл в редакторе и смотрим код.

ModX Evolution - создаём шаблоны основных документов в нашем блоге.

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

Удаляем не нужные блоки и вместо них вызываем соответствующие чанки:

{{head}}

{{header}}

{{footer}}

{{scripts}}

Вставляем вызов чанков в шаблоне

А теперь, пришло время познакомиться с ещё одним важным плейсхолдером Evolution – Content.

Плейсхолдеры – это своего рода переменные, которые подставляют значения из базы данных сайта в нужное место на странице при выводе (генерации) контента. Эти плейсхолдеры заранее известны и подробно описаны в документации. Из всего разнообразия практическое применение заслуживают несколько, и один из них, самый важный, это content. Вместо этого плейсхолдера во время генерации страницы подставляется содержимое поля «Контент», которое вы видите в админке. В это поле мы будем писать все тексты для нашего блога.

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

Вызов плейсхолдеров осуществляется очень просто – в нужно место шаблона нужно вставить название плейсхолдера в квадратных скобках и со звёздочками:

[*content*]

Вставляем плейсхолдер Content

Сохраняем наш новый шаблон. Для того, чтобы назначить этот шаблон документам их надо сначала создать. Этим и займёмся, создадим демо структуру сайта и посмотрим, что из этого получится. Раскрываем в дереве ресурсов (в админке) папку «категории» и кликнув правой кнопкой мышки на документ «Стиль жизни» из выпадающего меню выбираем «дочерний ресурс». Таким образом из обычного документа мы создали папку, что не мешает нашему документу по-прежнему оставаться обычном документом, но при этом иметь ещё и вложенные документы. Дадим нашему новому документу название и укажем шаблон.

ModX Evolution - создаём шаблоны основных документов в нашем блоге.

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

ModX Evolution - создаём шаблоны основных документов в нашем блоге.

Внимательный «зритель» увидит в центре текст, который мы написали в админке. Это и есть результат работы плейсхолдера content. Значит шаблон мы сделали правильно, но на странице есть много других элементов, мало того, что они на английском, так они ещё и статичны.

Сделаем копию нашего нового документа с пометкой 02 в той же папке и создадим заранее ещё по парочке документов в каждом разделе.

Теперь нам нужно подкорректировать вызов меню. Дочерние элементы в разделе «стиль жизни» и аналогичные не должны появляться, это противоречит дизайну шаблона сайта. Чтобы они не появлялись мы ограничим показ уровней меню с помощью параметра level у сниппета Wayfinder, который отвечает у нас за генерацию пунктов меню. Добавим новый параметр в вызов:

&level=`2`

Напомню, что вызов Wayfinder находится в чанке «header». В результате у нас вызов меню будет уже вот таким:

[!Wayfinder? &startId=`0` &outerClass=`header__nav` &parentClass=`has-children` &innerClass=`sub-menu` &selfClass=`current` &level=`2`!]

Снова обновляем страницу нашего сайта и смотрим на результат.

Создание меню в ModX Evolution

Все наши созданные документы перестали показываться в меню и это хорошо, но как нам увидеть наш документ? – всё просто. Список документов из раздела должен выводиться в основном поле сайта, где сейчас находится статичный демо контент. А это значит, что нам нужно сделать шаблон для страниц-папок! В нашем случае за это отвечает файл category.html. Открываем его, копируем содержимое, вставляем в админку, заменяем куски кода на чанки и сохраняем новый шаблон под названием «Категории».

Теперь в админке всем документам/папкам в разделе «Категории» присваиваем шаблон «Категории», т.е. у «Стиль жизни», «Здоровье» и пр. ставим шаблон «Категории». Тем самым по клику на эти пункты меню на сайте у нас будет подгружаться страница с шаблоном «Категории» внутри которого будет генериться свой уникальный контент, соответствующий данному разделу.

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

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

<h1 class="h2">Category: Design</h1>

Это заголовок, т.к. он заключён в HTML тэги H1. Бывают ещё заголовки H2, H3, H4 и т.д. до 6. Нам сейчас важно то, что написано внутри. Во- первых по английский, а во-вторых статично. Добавим динамики. Заголовок страницы в Evolution выводится плейсхолдером pagetitle. Приступим:

плейсхолдер pagetitle

Если теперь мы обновим страницу нашего сайта и нажмём на первую «категорию» в меню, то увидим, что в заголовке отобразилось её название.

ModX Evolution - создаём шаблоны основных документов в нашем блоге.

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

Подправив проблемы с отображением меню и отложив на время шаблон «категории» вернёмся к страницам с контентом.

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

Возвращаемся на шаблон «Страница статьи». Первым делом выведем её заголовок и вместо «This Is A Standard Format Post.» вставим плейсхолдер [*pagetitle*]. Затем укажем автора [*createdby*] и вместо «By» просто напишем «автор» и поставим плейсхолдер даты публикации документа [*pub_date*].

Откроем в адиминке наш документ для редактирования (шаблон которого мы только что правили) и посмотрим, как он выглядит:

ModX Evolution - создаём шаблоны основных документов в нашем блоге.

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

Изучая код шаблона замечаем вот это

<a href="#0">Marketing</a><a href="#0">Management</a>

Это две ссылки, которые помогают сориентироваться читателю в каком разделе находится документ. Нам нужно всего лишь вывести имя родительского раздела.

Стандартными средствами движка мы можем получить только ID (уникальный индентификатор) раздела, но никак не его имя. На помощь приходит сниппет DocInfo. Для его запуска напишем в коде шаблона его вызов и укажем пару параметров:

[!DocInfo? &docid=`[*parent*]` &field=`pagetitle`!]

 

Параметр «field» отвечает за название поля, которое нужно вывести и в нашем случае это заголовок – pagetitle.

Параметр «docid» отвечает за уникальный ID документа в котором нужно искать поля для вывода.

По-русски вызов сниппета переводится так: Взять документ с ID = «ID родителя текущего документа» и вывести содержимое поля «Заголовок». Здесь, при вызове сниппета встроенный плейсхолдер [*parent*] автоматически подставляет ID родителя текущего документа. Вместо [*parent*] может стоять ID (указан в скобках рядом с названием в админке) любого документа.

Учитывая, что полученный результат должен быть ссылкой, а не просто текстом вставим его в теги <a> как и было в шаблоне сайта и получим запись вот такого вида:

<a href="[~[*parent*]~]">[!DocInfo? &docid=`[*parent*]` &field=`pagetitle`!]</a>

А на сайте это будет выглядеть вот так:

Выводим название родительской папки

Давайте подведём некоторые итоги. Мы уже познакомились с двумя сниппетами: Wayfinder и DocInfo. Научились вызывать их с параметрами. Узнали что такое плейсхолдеры (PlaceHolder) и как они могут облегчить жизнь при создании динамических шаблонов для страниц.

Последние, что мы сделаем сегодня – добавим заглавное изображение к нашему одиночному документу. В шаблоне оно находится в верхней части страницы, т.е. оторвано от контентной части с текстом, а значит прикрепить его к документу можно только одним, но штатным способом – через  Template Variable (Переменная шаблона). Да, в Evolution у шаблонов документов могут быть переменные, т.е. некоторые поля для определённых типов данных и количество этих полей не ограничено. Изначально никаких переменных у шаблона нет, но мы их быстренько и просто создадим. Сокращённо эти переменные называются TV.

Создаём TV параметр 

Заходим в админку и создаём новый TV. Даём ему название «image_doc», указываем заголовок, который будет виден при редактировании документа «Картинка» и заполняем описания, чтобы в дальнейшем не запутаться «Заглавная картинка к документу». Далее указываем тип ввода, т.е. каким способом будет указываться содержимое этого параметра - в нашем случае это картинка и выбираем «image». В данном случае, при заполнении этого поля откроется файловый менеджер и вы сможете загрузить картинку на сервер и прикрепить её к документу.

Визуальный компонент – отвечает за код, который будет генерировать система при сборке страницы. Для простоты укажем тоже «image», это означает что в том месте где мы укажем вызов этого TV параметра будет сгенерирован код:

<img src="путь до картинки" alt="описание">

В котором будут прописаны все данные нашего изображения. Из дополнительных параметров можем указать что писать внутри тега «Alt» - обязательный атрибут изображений. В поле «Alternate Text» (появится при выборе визуального компонента «image») напишем, то что первое приходит в голову – заголовок страницы: [*pagetitle*]

И последнее, что нужно сделать – это указать к какому шаблону мы хотим прикрепить изображение. Ставим галочку у «Страница статьи». Теперь сохраняем наш первый TV параметр.

Вывод изображений в ModX Evolution

Тепер нужно указать в коде шаблона в каком месте мы хотим видеть картинку. Находим нужный кусок и заменяем всё что относится к изображению (HTML тег <Img src="…. ) вызовом нашего TV параметра [*image_doc*]. Обратите внимание, что TV переменные/параметры вызываются так же как и стандартные плейсхолдеры.

<div class="entry__post-thumb">
    [*image_doc*]
</div>

Сохраняем шаблон. Открываем наш первый тестовый документ и под полем с контентом обнаруживаем, что появился новый блок - Параметры (TV). А внутри наше поле с названием «картинка». Нажимаем «вставить» и в появившемся окне файлового менеджера кликнув правой кнопкой в левой части на папку «images» создадим новую подпапку «test». Теперь кликая на новую папку test оказываемся внутри неё. Там сейчас пусто. Воспользуемся файлами, которые шли вместе с шаблоном, возьмём оттуда любую картинку и закачаем к себе на сервер. Кликаем «загрузить», видим свой компьютер и выбираем изображение. Я выбрал «wheel-2000.jpg».

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

Прикрепляем изображение к документу

Теперь сохраняем документ и смотрим на сайте что получилось. Вуаля – наша картинка теперь на странице с документом. Если вам нужно будет заменить картинку, то достаточно просто закачать её на сервер и указать при редактировании документа.

ModX Evolution - создаём шаблоны основных документов в нашем блоге.

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

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

Maxim.Zone

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