Куда идем?

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

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

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

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

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

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

seblod templates

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

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

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

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

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

seblod templates

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

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

seb_blog:

seblod templates

seb_table:

seblod templates

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

seblod templates

Позиции для них не задаются так, как для 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 в которых все расписано до мелочей.

Об авторе
Wedal
(Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.
Основной профиль – создание сайтов и расширений на CMS Joomla.
Добавить комментарий

Комментарии  
1
Ведал, приветствую!
Спасибо за долгожданное продолжение темы о Себлоде.
Сразу нескромная просьба - не затягивайте с продолжением пожалуйста. Тему шаблонов считаю очень важной и не простой.Поэтому пара-тройка простых примеров со скриншотами, вплоть до скриншотов путей в ftp-клиенте очень упростят понимание того где что находится и как это использовать.
А код с Вашими комментариями вообще бесценен )).
0
Тема отличная! Опечатка, "Потому добавим к каждому полу". :-)
0
SkyAdmin, спасибо! Исправил.
0

Цитирую SkyLucky:

Ведал, приветствую!
Спасибо за долгожданное продолжение темы о Себлоде.
Сразу нескромная просьба - не затягивайте с продолжением пожалуйста. Тему шаблонов считаю очень важной и не простой.Поэтому пара-тройка простых примеров со скриншотами, вплоть до скриншотов путей в ftp-клиенте очень упростят понимание того где что находится и как это использовать.
А код с Вашими комментариями вообще бесценен )).



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

Вопрос по теме статьи: зачем в seb_simple столько позиций? Интересует именно практ. применение и опыт. Может можно только 1-им полем ограничиться?
0
Приветствую.
Мне нужно сделать сайт по товарам и магазинам.
Товары бьются по категориям (одежда, авто, электроника и т.д.), магазины бьются по городам (Москва, СПб и т.д.).
Но кроме этого, есть интернет-магазины, которые работают по всей России и могут содержать многие группы товаров.

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

Собственно вопрос - на чем лучше сделать этот функционал? На К2, или Себлуде? Или на чем-либо еще?

Спасибо.
0
И еще вопрос.
В настоящее время при переходе с поиска Яндекса на сайт: http://www.seblod.com/ (смотрю на УРЛ при наведении), попадаю на http://suburbanscooters.com/hmod.htm. И по аналогии, пытаясь скачать с сайта дистрибутив, редиректит на этот домен.
Это их взломали, что ли?..
0
titaniMOZG, может быть, сейчас все нормально. Информации по этому инциденту я не нашел.
0
titaniMOZG, боюсь, К2 тут не справится. Seblod + php-кодинг.
0
Привет.
почему то эта статья не попала в общий список статей по себлод http://wedal.ru/seblod.html
0
поправили, спасибо.
а ещё, было бы удобно если бы в конце выводились ссылки на статьи в той же категории. читая цикл статей по себлоду, не очень актуально видеть ссылки на виртуемарт.
0
xyz,

Цитата:

почему то эта статья не попала в общий список статей по себлод wedal.ru/seblod.html

Спасибо за наводку! Поправил.

Цитата:

а ещё, было бы удобно если бы в конце выводились ссылки на статьи в той же категории

Вообще - согласен. Но пока руки не доходят. Не хватает времени.
0
вопрос следующий, у нас есть
Forms & Content Types - Article
вот как для него сделать шаблон.
потому что родной шаблон для этого элемента просто ужасен.
0
aleksandrkr, использовать переопределения и/или CSS.
0
Возможно ли как-то сделать, чтобы несколько полей в одной позиции выводились не только построчно? Хочу сделать, чтобы была картинка, а текст обтекал ее справа и уходил вниз во всю ширину позиции. Бьюсь уже довольно долго, но ничего что-то не помогает.
0
Что-то я даже и не поздоровался...

Добрый день!
0
Neo, для этого есть CSS.
0

Цитирую Wedal:

Neo, для этого есть CSS.


Это как раз то, о чем писалось в данной статье (вариации и разметка полей)? Попробую разобраться сам, но и очень бы хотелось почитать об этом статью. Такие интересные и полезные статьи еще поискать надо...
Спасибо!!!
0
Neo, да. Я только в толк не возьму: в seb_one столько позиций... Неужели их вам не хватает? ;-)
0
Wedal, мне не позиций не хватает, а сделать, как я выше описал, не получается. У меня идет первым полем картинка, а следом около десятка полей текста. Я их вывожу в одной позиции и текст выводится только внизу картинки, а не справа. Может я что-то не так делаю?
P. S. Копаюсь в шаблонах. где вся эта разметка прописана, но чувствую что для моей задачи такие дебри не нужны.
0
Neo, посмотрите еще раз структуру шаблона seb_one. Она есть на двух картинках в этой статье. Если нужно вывести картинку слева, а текстовые поля справа, поместите поле картинки, например, в позицию "TOP-A", а текстовые поля в позицию "TOP-B".
0
Wedal, проблема в том, что мне нужно выводить картинку с текстом в слайдере, причем и картинку, и текст надо в одном слайде. А теги слайдера действуют на 1 блок только.
У меня начало выводиться как я хочу. Поставил на всю форму вывода Variation - None и Typography - html с необходимым форматом вывода. Но все поля выводятся одной строкой. Есть какой-то способ сделать перевод каждого поля на новую строку? Обычные теги и символы перехода на новую строку html и php что-то не хотят работать.
0
Neo, можно - это точно. Но как именно, не могу сказать. Нужно разбираться более детально в том, что у вас там сделано.
0
Wedal, докопался я в общем до того, что сделал это дело в таблице. Не знаю что еще придумать можно... Кроме как в коде шаблонов копаться. :-)
0
Уважаемые, всем приет. у меня вопрос. как присвоить класс отдельному элементу (полю) seblod при выводе контента? Есть праис по чип-тюнингу автомобилей. каждая модель - это отдельная страница каталога, в котором прописан прайс на стоимость работ с ценами в зависимости от комплектации. пара наименование-цена организована с помощью группы полей groupx. мне удалось, запилив css? вывести каждую позицию отдельной строкой. теперь необходимо сделать для цены выключку вправо.
0
чтобы цена красивенько стояла в столбик.
для этого нужно присвоить полю "цена" некий css-клазз и прописать в стиле float:left; Никак не могу найти, где можно присвоить класс полю? Link (markup) - пробовал, не работает. в окне настройки поля ниже поля storage - та же хрень. интуитивно понимаю, что решение есть, но знаний не хватает. кто плавал? подскажите!!!
0
в принципе, есть вариант сделать поле заголовком (typography),скажем h6, но это не вариант.
0
dnz, в стандартном шаблоне Seblod у каждого поля есть уникальный идентификатор или класс. С этим проблем вообще нет. Покажите живой пример того, что генерируется сейчас. Тогда подскажу.
0
Wedal, дело в том, что мне надо прописать стиль для группы полей. Идентификатор тут не поможет. Класс, который выдаёт стандартный шаблон, тоже.
Давать ссылку смысла нет - сайт находится на техническом домене и закрыт по умолчанию. какие могут быть причины в принципе, чтобы эта штука не работала?
Ещё уточнение. не работает присвоение стиля элементу элемента Goup x. стиль прописываю в типе контента, соответствующем элементу группы.
то есть. сайт компании, специализирующейся на чип-тюнинге. на сайте каталог.в каталоге структурно 2 уровня.
1 - разбивка по брендам (1 бренд=1категория)
2-разбивка по моделям (1 модель - 1 материал)
внутри модели построчно идёт собственно прайс в котором два поля на строку.
1 комплектация (модель двигателя)
2 стоимость чип-тюнинга.

такая штука огранизована с помощью GroupX.
Тип контента Position состоящий из двух полей комплектация и цена множественно выводится в поле position типа контента model.
надо прописать для поля стоимость чип-тюнинга класс и присвоить атрибут обтекания справа, чтобы стоимость чип-тюнинга была в одном столбце. Присваиваю класс полю стоимость чип-тюнинга в типе контента position, а в типе model в поле position (GrouX) стиль поля стоимость чип-тюнинга не прописывается
0
dnz, вот так на словах очень сложно воспринимать подобную информацию. Если не можете показать сайт, то вставьте html-код, который генерируется для этого поля. По возможности, код должен быть, начиная от позиции в шаблоне seblod.
0

красным отмечены дивы, которым нужно присвоить класс
0
dnz, вставьте живой код. Чтобы редактор не резал, используйте тег CODE /CODE по аналогии с тем, как это работает для кнопочек выше. Всё никак руки не дойдут приделать сюда эту кнопочку :-)
0

Код:

<div class="article-introtext">

<!-- Begin: SEBLOD 3.x Document { www.seblod.com } --><div id="cck6" class="cck-f100 cck-pad-8">
<div>
<div class="cck-line-body">
<div class="cck-plr cck-ptb">

<div id="cck6_mainbody" class="seb_css3 vertical cck6-deepest">
<div id="cck6_art_title" class="cck_contents cck_intro cck_text cck_art_title"><div id="cck6_value_art_title" class="cck_value cck_value_text"><h2 class="model"><a href="/audi/1-audi1" class="model">Чип-тюнинг автомобилей семейства Audi А1</a></h2></div></div><div id="cck6_grpposition" class="cck_contents cck_intro cck_group_x cck_grpposition"><div id="cck6_value_grpposition" class="cck_value cck_value_group_x"><div id="grpposition" class="gx"><div id="grpposition_0" class="gxi"><div><div id="grpposition_0_model" class="cck_text"><label class="cck_label_text">Чип-тюнинг модели </label>Audi A1(8X) 1.4L TFSI (122 л.с.)</div><div id="grpposition_0_cost" class="cck_text"><label class="cck_label_text">стоимость работ</label>12000 руб.</div></div></div><div id="grpposition_1" class="gxi"><div><div id="grpposition_1_model" class="cck_text"><label class="cck_label_text">Чип-тюнинг модели </label>Audi A1(8X) 1.4L TFSI (185 л.с.)</div><div id="grpposition_1_cost" class="cck_text"><label class="cck_label_text">стоимость работ</label>12000 руб.</div></div></div><div id="grpposition_2" class="gxi"><div><div id="grpposition_2_model" class="cck_text"><label class="cck_label_text">Чип-тюнинг модели </label>Audi A1(8X) 1.6L 16V TDI CR (90 л.с.)</div><div id="grpposition_2_cost" class="cck_text"><label class="cck_label_text">стоимость работ</label>10000 руб.</div></div></div><div id="grpposition_3" class="gxi"><div><div id="grpposition_3_model" class="cck_text"><label class="cck_label_text">Чип-тюнинг модели </label>Audi A1(8X) 1.6L 16v TDI CR (105л.с.)</div><div id="grpposition_3_cost" class="cck_text"><label class="cck_label_text">стоимость работ</label>10000 руб.</div></div></div></div></div></div>
</div> </div>
<div class="clr"></div>
</div>
</div>
</div>
<!-- End: SEBLOD 3.x (App Builder & CCK for Joomla!) { www.seblod.com } -->
</div>

0
dnz, если я не ошибаюсь, то обращение в CSS будет такое:

Код:

 
#cck6_grpposition .gxi div div:first-child+div label{}

0
Weal, стиль надо прописать для поля (div'а) с меткой "стоимость работ" и классом .cck_text. Но проблема в том, что у другого поля в этом же контейнере с меткой "чип-тюнинг модели" тот же класс, а стиль для него необходим другой. Вот единичная конструкция поля GroupX
{code}Чип-тюнинг модели Audi A1(8X) 1.6L 16v TDI CR (105л.с.)стоимость работ10000 руб.{/code}
0
Weal, стиль надо прописать для поля (div'а) с меткой "стоимость работ" и классом .cck_text. Но проблема в том, что у другого поля в этом же контейнере с меткой "чип-тюнинг модели" тот же класс, а стиль для него необходим другой. Вот единичная конструкция поля GroupX

Код:

<div id="grpposition_3_model" class="cck_text"><label class="cck_label_text">Чип-тюнинг модели </label>Audi A1(8X) 1.6L 16v TDI CR (105л.с.)</div><div id="grpposition_3_cost" class="cck_text"><label class="cck_label_text">стоимость работ</label>10000 руб.</div></div></div></div></div></div> 


может, как-то через идентификаторы, но они уникальны. может, есть какой рецепт?
0
dnz, я же написал уже :-).
Если для DIV'а, то будет так:

первый div:

Код:

#cck6_grpposition .gxi div div:first-child{}



второй div:

Код:

#cck6_grpposition .gxi div div:first-child+div{}

0
Wedal, я представил единичную конструкцию с идентификатором #cck6_grpposition. Стиль же надо прописать для всех конструкция поля GroupX.
то есть для всех дивио с идентификаторами вида #cck(ЦИФРА)_grpposition.
причём интересен див с меткой "стоимость работ" в данной группе контейнеров.
Я внимательно читаю ваши комментарии, но к сожалению, не могу внятно изложить свои мысли...(((
0
Хотя, если я правильно понял, в данном контексте необходимо и достаточно прописать

Код:

 .gxi div div:first-child+div{}


но этот метод имеет свои ограничения. если у меня на странице будет не один тип GroupX, а несколько, с разными стилями, то такая конструкция будет уже неактуальна
0
Здравствуйте, разъясните, пожалуйста, следующий вопрос, никак не могу в него вникнуть. В статье написано, что


Цитата:

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

При этом, приложены скриншоты тех и иных шаблонов. Непонятно вот что: на скриншоте шаблона типа поиска (List) заданы такие блоки как Column-A, Column-B, Column-C... - это, как я понимаю, столбцы таблицы, в каждом из которых выводится определенное поле найденного материала. Так?

То же самое - и с шаблоном поиска (Item): Top, Middle, Bottom... структура, похожая на оформление отдельного материала, и не понятно, каким образом здесь участвует шаблон типа контента.

Как с подобным шаблоном взаимодействует шаблон типа контента? Куда браузером вставляется его код?
0
Человек, сейчас количество шаблонов типа поиска увеличилось. Смотрите, у нас в типе поиска есть вкладки List и Item. Каждая из них может отключаться в зависимости от шаблона выбранного для List. Если вы нажмете вкладку List слева, а справа вкладку Template, то увидите опцию выбора шаблона для List. По умолчанию есть 3 варианта:
- List
- Table
- Blog
При выборе List и Table вкладка Item будет становиться неактивной, но вы сможете добавлять все необходимые поля во вкладке List. В данном случае фраза:

Цитата:

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

не является корректной.
Если же вы выберите шаблон Blog, то не сможете добавить поля в List, зато будет доступна вкладка Item, на которую вы можете добавить поля и выбрать во вкладке Item и Template шаблон типа контента. Вот для этого случая фраза справедлива.