SEBLOD - Конструктор контента(CCK) для Joomla. Часть 11. Знакомство с шаблонами SEBLOD

Seblod не только позволяет создавать сложные типы контента, формы и фильтры поиска, но еще и гибко их оформлять. Оформление может быть гибким настолько, насколько это вообще возможно. К сожалению, за большую гибкость приходится платить высокой сложностью работы. В этой статье я расскажу о видах шаблонов Seblod, их позициях и переопределениях позиций.

Эта статья является базовой. Она позволит вам познакомиться с шаблонами Seblod и оценить, насколько глубоко вам позволяют погрузиться в них ваши знания.

К шаблонам Seblod очень подходит поговорка «Чем дальше в лес, тем больше дров». Понимайте ее, как хотите. В любом случае получится правильно. Всю работу с шаблонами Seblod я бы разделил на несколько уровней: «Базовый», «Средний», «Продвинутый». Каждый из уровней дает гораздо больше гибкости в оформлении сайта, но при этом требует и гораздо больше знаний в области web-технологий.

Базовый уровень. Виды шаблонов

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

Как вы, должно быть, помните из предыдущих статей, в Seblod есть типы контента и типы поиска. В соответствии с этим существуют и два вида шаблонов: шаблоны типов контента и шаблоны типов поиска. Эти шаблоны можно найти в менеджере шаблонов Joomla вместе со всеми остальными. Важно понимать: шаблоны Seblod не будут работать, как шаблоны Joomla, а шаблоны Joomla не будут работать, как шаблоны Seblod. Даже не пытайтесь назначить их в менеджере шаблонов таким образом.

По умолчанию с Seblod устанавливается 3 шаблона:

1. seb_one – основной шаблон типов контента
2. seb_blog – шаблон типов поиска, выводящий результаты поиска в виде блога.
3. seb_table – шаблон типов поиска, выводящий результаты поиска в виде таблицы/списка.

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

Базовый уровень. Позиции полей

В своей идее шаблоны Seblod похожи на шаблоны Joomla. Каждый их шаблонов Seblod имеет позиции, в которых можно размещать поля. Давайте посмотрим, как это выглядит:

Здесь мы видим шаблон типа контента. Его позиции соответствуют тем, которые есть в конструкторе.

Шаблоны типов поиска выглядят так:

seb_blog:

seb_table:

Шаблоны типов поиска можно выбрать только тогда, когда активирована вкладка List:

Позиции для них не задаются так, как для seb_one. Для шаблонов типов поиска мы можем указать только количество колонок, количество элементов, выводимых в каждой колонке, и.т.д.

А вот сейчас очень важная мысль (не упустите ее):

Шаблон типа поиска выводит список материалов, каждый их которых оформлен через шаблон типа контента.

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

Благодаря такому подходу мы получаем очень большую гибкость, совершенно не касаясь кода. Но есть одно неприятное последствие такого подхода: огромное количество кода html-разметки. Взгляните еще раз на рисунок шаблона seb_one. Видите, сколько позиций? А теперь представьте, что на странице показано 10 результатов поиска и каждый такой результат оформлен в отдельный seb_one. Затем добавьте парочку модулей, сделанных с помощью Seblod, и отображающихся подобным образом по бокам и добавьте еще пару десятков позиций модулей основного шаблона Joomla. Страшно представить, сколько html-кода придется переваривать браузерам пользователей, посетивших такой сайт. Но Seblod здесь не виноват. Все сделано максимально гибко. К сожалению, как раз за гибкость и приходится платить. Все можно сделать гораздо лучше, но для этого придется перейти уже на средний уровень, а может и на продвинутый.

Средний уровень. CSS-стили и вариации

Работа на среднем уровне подразумевает, что вы знаете HTML и CSS. Имея такие знания, уже не требуется каждый раз использовать монстра seb_one. Для сокращения количества html-кода  мы можем использовать гораздо более простой шаблон, а оформление делать исключительно через CSS. Благо, разработчики Seblod позаботились о том, чтобы каждая позиция, каждое поле, каждый тип поля имели свои уникальные идентификаторы и стили. На мой взгляд, позаботились даже слишком сильно. Здесь появляется такое понятие, как «Рендеринг полей». Походящего перевода для слова «rendering» я так и не подобрал.

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

Вот пример: у нас есть простое текстовое поле. Если его значение просто выводить в шаблон, то получится ерунда. Представьте: 3 текстовых поля со значениями «Один», «Два», «Три», выводятся в одну позицию шаблона Seblod. На выходе мы получим: «ОдинДваТри». Это не совсем то, что нам хотелось бы иметь, не правда ли? Именно поэтому нужно выводить не просто значение поля, а значение, каким-то образом оформленное, например, в контейнер <div>. Но если вывести просто в <div>, то возмутятся верстальщики: «Где CSS-классы и идентификаторы? Что нам делать, если поля нужно оформить по-разному?». Это будет совершенно логично. Потому добавим к каждому полю уникальный класс и идентификатор. «Ой! А у нас же есть еще и названия полей! Где они? Как их оформлять?» – это скажет еще кто-то. Ок – добавим лейблы и CSS-элементы к ним. Таким образом, к обычным значениям текстовых полей «Один», «Два», «Три», добавится еще обрамление в виде разметки.

Вы не обязательно должны использовать стандартную разметку. Можете создать свою собственную. Для этого в Seblod используются так называемые Вариации (Variaton) и Разметка полей (Markup).

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

Используя разметку полей, вы сможете добавить каждому полю каждого типа контента собственные CSS-классы для индивидуального оформления. Все это действительно удобно.

Подробнее про использование вариаций и разметки полей я расскажу в одной из следующих статей.  

Средний уровень. Упрощенные шаблоны Seblod

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

Ваш покорный слуга, в свое время, также создал упрощенный шаблон Seb_Simple, который содержит в себе всего 6 позиций, расположенных друг под другом. Все лишние элементы разметки удалены, оформления нет. Оставлено только самое необходимое. Шаблон рассчитан на людей, хорошо знающих CSS. Только они смогут его использовать, но за это будут вознаграждены более коротким кодом. Скачать и обсудить шаблон seb_simple можно в этой теме на форуме.

Также есть и много других шаблонов. Найти их можно здесь.

Продвинутый уровень. Переопределения

Продвинутый уровень рассчитан на пользователей, которые владеют не только CSS и HTML, но также и PHP. Иногда бывает так, что весь огромный функционал Seblod бессилен перед решением маленькой нетиповой задачки, которая решается на PHP в пару строк кода. На этот и другие подобные случаи разработчики Seblod предусмотрели переопределения. Раз уж вы начали читать продвинутый уровень, то наверняка должны знать, что такое переопределения в шаблонах Joomla (Joomla template overrides). В Seblod все аналогично, только для позиций и полей. Здесь вы можете уже не просто оформлять существующую разметку через CSS, но и писать свою собственную html-разметку со вставкой полей, как переменных PHP, да и любым другим PHP кодом. На официальном сайте есть хорошая статья на эту тему. А ребята с seblod.pro перевели ее на русский язык. Вот перевод. Если говорить коротко, то с помощью переопределений любую позицию можно представить, как отдельный php-файл, а поля в ней будут вставляться, как переменные. Сделать можно все, что душе угодно. Ограничения могут накладывать только знания PHP.

Заключение

Вот так обстоят дела с шаблонами Seblod. Несмотря на то, что я пытался писать максимально простым языком, многим статья может показаться сложной и непонятной. Не бойтесь этого, не бойтесь делать и пробовать. Гораздо проще все понять, когда разбираешься на реальном проекте, а не только читаешь статьи. Если возникают вопросы – задавайте. Сообщество для того и существует, чтобы все могли друг другу помогать.

Качайте бесплатно все самые нужные расширения Joomla для разработки своих сайтов, а так же читайте уроки Joomla в которых все расписано до мелочей.