Seblod не только позволяет создавать сложные типы контента, формы и фильтры поиска, но еще и гибко их оформлять. Оформление может быть гибким настолько, насколько это вообще возможно. К сожалению, за большую гибкость приходится платить высокой сложностью работы. В этой статье я расскажу о видах шаблонов Seblod, их позициях и переопределениях позиций.
Эта статья является базовой. Она позволит вам познакомиться с шаблонами Seblod и оценить, насколько глубоко вам позволяют погрузиться в них ваши знания.
К шаблонам Seblod очень подходит поговорка «Чем дальше в лес, тем больше дров». Понимайте ее, как хотите. В любом случае получится правильно. Всю работу с шаблонами Seblod я бы разделил на несколько уровней: «Базовый», «Средний», «Продвинутый». Каждый из уровней дает гораздо больше гибкости в оформлении сайта, но при этом требует и гораздо больше знаний в области web-технологий.
Знакомство с шаблонами SEBLOD. Базовый уровень. Виды шаблонов.
Умение работать на этом уровне не требует глубоких знаний в области web-технологий. Если вы решили сделать что-то на Seblod, то этим уровнем должны владеть в обязательном порядке.
Как вы, должно быть, помните из предыдущих статей, в Seblod есть типы контента и типы поиска. В соответствии с этим существуют и два вида шаблонов: шаблоны типов контента и шаблоны типов поиска. Эти шаблоны можно найти в менеджере шаблонов Joomla вместе со всеми остальными. Важно понимать: шаблоны Seblod не будут работать, как шаблоны Joomla, а шаблоны Joomla не будут работать, как шаблоны Seblod. Даже не пытайтесь назначить их в менеджере шаблонов таким образом.
По умолчанию с Seblod устанавливается 3 шаблона:
- seb_one – основной шаблон типов контента
- seb_blog – шаблон типов поиска, выводящий результаты поиска в виде блога.
- seb_table – шаблон типов поиска, выводящий результаты поиска в виде таблицы/списка.
Шаблоны типов контента и поиска не могут взаимозаменять друг друга. Соответственно, шаблон типа поиска нельзя установить для отображения типа контента и наоборот.
Знакомство с шаблонами SEBLOD. Базовый уровень. Позиции полей.
В своей идее шаблоны Seblod похожи на шаблоны Joomla. Каждый их шаблонов Seblod имеет позиции, в которых можно размещать поля. Давайте посмотрим, как это выглядит:
Здесь мы видим шаблон типа контента. Его позиции соответствуют тем, которые есть в конструкторе.
Шаблоны типов поиска выглядят так:
seb_blog:
seb_table:
Шаблоны типов поиска можно выбрать только тогда, когда активирована вкладка List:
Позиции для них не задаются так, как для seb_one. Для шаблонов типов поиска мы можем указать только количество колонок, количество элементов, выводимых в каждой колонке, и.т.д.
А вот сейчас очень важная мысль (не упустите ее):
Шаблон типа поиска выводит список материалов, каждый их которых оформлен через шаблон типа контента.
Т.е. по умолчанию, в результатах поиска, каждый отдельный результат оформляется шаблоном seb_one. Это очень важно понимать, чтобы не путаться в шаблонах.
Благодаря такому подходу мы получаем очень большую гибкость, совершенно не касаясь кода. Но есть одно неприятное последствие такого подхода: огромное количество кода html-разметки. Взгляните еще раз на рисунок шаблона seb_one. Видите, сколько позиций? А теперь представьте, что на странице показано 10 результатов поиска и каждый такой результат оформлен в отдельный seb_one. Затем добавьте парочку модулей, сделанных с помощью Seblod, и отображающихся подобным образом по бокам и добавьте еще пару десятков позиций модулей основного шаблона Joomla. Страшно представить, сколько html-кода придется переваривать браузерам пользователей, посетивших такой сайт. Но Seblod здесь не виноват. Все сделано максимально гибко. К сожалению, как раз за гибкость и приходится платить. Все можно сделать гораздо лучше, но для этого придется перейти уже на средний уровень, а может и на продвинутый.
Знакомство с шаблонами SEBLOD. Средний уровень. CSS-стили и вариации.
Работа на среднем уровне подразумевает, что вы знаете HTML и CSS. Имея такие знания, уже не требуется каждый раз использовать монстра seb_one. Для сокращения количества html-кода мы можем использовать гораздо более простой шаблон, а оформление делать исключительно через CSS. Благо, разработчики Seblod позаботились о том, чтобы каждая позиция, каждое поле, каждый тип поля имели свои уникальные идентификаторы и стили. На мой взгляд, позаботились даже слишком сильно. Здесь появляется такое понятие, как «Рендеринг полей». Походящего перевода для слова «rendering» я так и не подобрал.
Рендеринг полей – это структурное и визуальное оформление значения поля.
Вот пример: у нас есть простое текстовое поле. Если его значение просто выводить в шаблон, то получится ерунда. Представьте: 3 текстовых поля со значениями «Один», «Два», «Три», выводятся в одну позицию шаблона Seblod. На выходе мы получим: «ОдинДваТри». Это не совсем то, что нам хотелось бы иметь, не правда ли? Именно поэтому нужно выводить не просто значение поля, а значение, каким-то образом оформленное, например, в контейнер <div>. Но если вывести просто в <div>, то возмутятся верстальщики: «Где CSS-классы и идентификаторы? Что нам делать, если поля нужно оформить по-разному?». Это будет совершенно логично. Потому добавим к каждому полю уникальный класс и идентификатор. «Ой! А у нас же есть еще и названия полей! Где они? Как их оформлять?» – это скажет еще кто-то. Ок – добавим лейблы и CSS-элементы к ним. Таким образом, к обычным значениям текстовых полей «Один», «Два», «Три», добавится еще обрамление в виде разметки.
Вы не обязательно должны использовать стандартную разметку. Можете создать свою собственную. Для этого в Seblod используются так называемые Вариации (Variaton) и Разметка полей (Markup).
Вариации используются для оформления позиций шаблона. Создав их один раз, затем вы легко сможете применять любую из вариаций к любой из позиций, внешний вид полей которых при этом будет меняться.
Используя разметку полей, вы сможете добавить каждому полю каждого типа контента собственные CSS-классы для индивидуального оформления. Все это действительно удобно.
Подробнее про использование вариаций и разметки полей я расскажу в одной из следующих статей.
Знакомство с шаблонами SEBLOD. Средний уровень. Упрощенные шаблоны Seblod.
Для того чтобы избежать проблемы избыточного html-кода, сообщество своими силами создало упрощенные шаблоны как для типов контента, так и для типов поиска.
Ваш покорный слуга, в свое время, также создал упрощенный шаблон Seb_Simple, который содержит в себе всего 6 позиций, расположенных друг под другом. Все лишние элементы разметки удалены, оформления нет. Оставлено только самое необходимое. Шаблон рассчитан на людей, хорошо знающих CSS. Только они смогут его использовать, но за это будут вознаграждены более коротким кодом. Скачать и обсудить шаблон seb_simple можно в этой теме на форуме.
Также есть и много других шаблонов. Найти их можно здесь.
Знакомство с шаблонами SEBLOD. Продвинутый уровень. Переопределения.
Продвинутый уровень рассчитан на пользователей, которые владеют не только CSS и HTML, но также и PHP. Иногда бывает так, что весь огромный функционал Seblod бессилен перед решением маленькой нетиповой задачки, которая решается на PHP в пару строк кода. На этот и другие подобные случаи разработчики Seblod предусмотрели переопределения. Раз уж вы начали читать продвинутый уровень, то наверняка должны знать, что такое переопределения в шаблонах Joomla (Joomla template overrides). В Seblod все аналогично, только для позиций и полей. Здесь вы можете уже не просто оформлять существующую разметку через CSS, но и писать свою собственную html-разметку со вставкой полей, как переменных PHP, да и любым другим PHP кодом. На официальном сайте есть хорошая статья на эту тему. А ребята с seblod.pro перевели ее на русский язык. Вот перевод. Если говорить коротко, то с помощью переопределений любую позицию можно представить, как отдельный php-файл, а поля в ней будут вставляться, как переменные. Сделать можно все, что душе угодно. Ограничения могут накладывать только знания PHP.
Знакомство с шаблонами SEBLOD. Заключение.
Вот так обстоят дела с шаблонами Seblod. Несмотря на то, что я пытался писать максимально простым языком, многим статья может показаться сложной и непонятной. Не бойтесь этого, не бойтесь делать и пробовать. Гораздо проще все понять, когда разбираешься на реальном проекте, а не только читаешь статьи. Если возникают вопросы – задавайте. Сообщество для того и существует, чтобы все могли друг другу помогать.
Качайте бесплатно все самые нужные расширения Joomla для разработки своих сайтов, а так же читайте уроки Joomla в которых все расписано до мелочей.
Комментарии
Спасибо за долгожданное продолжение темы о Себлоде.
Сразу нескромная просьба - не затягивайте с продолжением пожалуйста. Тему шаблонов считаю очень важной и не простой.Поэтому пара-тройка простых примеров со скриншотами, вплоть до скриншотов путей в ftp-клиенте очень упростят понимание того где что находится и как это использовать.
А код с Вашими комментариями вообще бесценен )).
Полностью присоединяюсь, еще очень нужны примеры с организацией поиска. Это вообще бесценная инфа будет (в виде кейсов).
Вопрос по теме статьи: зачем в seb_simple столько позиций? Интересует именно практ. применение и опыт. Может можно только 1-им полем ограничиться?
Мне нужно сделать сайт по товарам и магазинам.
Товары бьются по категориям (одежда, авто, электроника и т.д.), магазины бьются по городам (Москва, СПб и т.д.).
Но кроме этого, есть интернет-магазины, которые работают по всей России и могут содержать многие группы товаров.
Пользователь должен иметь возможность выбрать город, и категорию товаров, причем в любой последовательности, и туда должны попадать не только товары нужной категории и города, но и интернет-магазинов, подходящие по критериям.
Собственно вопрос - на чем лучше сделать этот функционал? На К2, или Себлуде? Или на чем-либо еще?
Спасибо.
В настоящее время при переходе с поиска Яндекса на сайт: http://www.seblod.com/ (смотрю на УРЛ при наведении), попадаю на http://suburbanscooters.com/hmod.htm. И по аналогии, пытаясь скачать с сайта дистрибутив, редиректит на этот домен.
Это их взломали, что ли?..
почему то эта статья не попала в общий список статей по себлод http://wedal.ru/seblod.html
а ещё, было бы удобно если бы в конце выводились ссылки на статьи в той же категории. читая цикл статей по себлоду, не очень актуально видеть ссылки на виртуемарт.
Цитата:Спасибо за наводку! Поправил.
Цитата:Вообще - согласен. Но пока руки не доходят. Не хватает времени.
Forms & Content Types - Article
вот как для него сделать шаблон.
потому что родной шаблон для этого элемента просто ужасен.
Добрый день!
Это как раз то, о чем писалось в данной статье (вариации и разметка полей)? Попробую разобраться сам, но и очень бы хотелось почитать об этом статью. Такие интересные и полезные статьи еще поискать надо...
Спасибо!!!
P. S. Копаюсь в шаблонах. где вся эта разметка прописана, но чувствую что для моей задачи такие дебри не нужны.
У меня начало выводиться как я хочу. Поставил на всю форму вывода Variation - None и Typography - html с необходимым форматом вывода. Но все поля выводятся одной строкой. Есть какой-то способ сделать перевод каждого поля на новую строку? Обычные теги и символы перехода на новую строку html и php что-то не хотят работать.
для этого нужно присвоить полю "цена" некий css-клазз и прописать в стиле float:left; Никак не могу найти, где можно присвоить класс полю? Link (markup) - пробовал, не работает. в окне настройки поля ниже поля storage - та же хрень. интуитивно понимаю, что решение есть, но знаний не хватает. кто плавал? подскажите!!!
Давать ссылку смысла нет - сайт находится на техническом домене и закрыт по умолчанию. какие могут быть причины в принципе, чтобы эта штука не работала?
Ещё уточнение. не работает присвоение стиля элементу элемента Goup x. стиль прописываю в типе контента, соответствующем элементу группы.
то есть. сайт компании, специализирующейся на чип-тюнинге. на сайте каталог.в каталоге структурно 2 уровня.
1 - разбивка по брендам (1 бренд=1категория)
2-разбивка по моделям (1 модель - 1 материал)
внутри модели построчно идёт собственно прайс в котором два поля на строку.
1 комплектация (модель двигателя)
2 стоимость чип-тюнинга.
такая штука огранизована с помощью GroupX.
Тип контента Position состоящий из двух полей комплектация и цена множественно выводится в поле position типа контента model.
надо прописать для поля стоимость чип-тюнинга класс и присвоить атрибут обтекания справа, чтобы стоимость чип-тюнинга была в одном столбце. Присваиваю класс полю стоимость чип-тюнинга в типе контента position, а в типе model в поле position (GrouX) стиль поля стоимость чип-тюнинга не прописывается
красным отмечены дивы, которым нужно присвоить класс
<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>
Код:
#cck6_grpposition .gxi div div:first-child+div label{}
{code}Чип-тюнинг модели Audi A1(8X) 1.6L 16v TDI CR (105л.с.)стоимость работ10000 руб.{/code}
Код:
<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:
Код:
#cck6_grpposition .gxi div div:first-child{}второй div:
Код:
#cck6_grpposition .gxi div div:first-child+div{}то есть для всех дивио с идентификаторами вида #cck(ЦИФРА)_grpposition.
причём интересен див с меткой "стоимость работ" в данной группе контейнеров.
Я внимательно читаю ваши комментарии, но к сожалению, не могу внятно изложить свои мысли...(((
Код:
.gxi div div:first-child+div{}но этот метод имеет свои ограничения. если у меня на странице будет не один тип GroupX, а несколько, с разными стилями, то такая конструкция будет уже неактуальна
Цитата:При этом, приложены скриншоты тех и иных шаблонов. Непонятно вот что: на скриншоте шаблона типа поиска (List) заданы такие блоки как Column-A, Column-B, Column-C... - это, как я понимаю, столбцы таблицы, в каждом из которых выводится определенное поле найденного материала. Так?
То же самое - и с шаблоном поиска (Item): Top, Middle, Bottom... структура, похожая на оформление отдельного материала, и не понятно, каким образом здесь участвует шаблон типа контента.
Как с подобным шаблоном взаимодействует шаблон типа контента? Куда браузером вставляется его код?
- List
- Table
- Blog
При выборе List и Table вкладка Item будет становиться неактивной, но вы сможете добавлять все необходимые поля во вкладке List. В данном случае фраза:
Цитата:не является корректной.
Если же вы выберите шаблон Blog, то не сможете добавить поля в List, зато будет доступна вкладка Item, на которую вы можете добавить поля и выбрать во вкладке Item и Template шаблон типа контента. Вот для этого случая фраза справедлива.