Теги виджетов в шаблонах Blogger

Основы применения тегов <b:widget> для создания виджетов мы рассмотрели в статье «Структура шаблонов и специальные теги Blogger». Если Вы собираетесь работать с виджетами в визуальном режиме на вкладке «Дизайн» > «Элементы страницы», тогда это все, что Вам нужно знать. Если же Вы предпочитаете работать непосредственно с кодом шаблона на вкладке «Дизайн» > «Изменить HTML» в режиме «Расширить шаблоны виджета», тогда эта статья для Вас.

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

<b:widget [...параметры...] />

должно получиться:

<b:widget [...параметры...]>
</b:widget>

Теперь давайте поговорим о том, что можно поместить между этими тегами.

Вложения

Содержимое виджета заключается внутри секций includable, которые имеют такой формат:

<b:includable id='main' var='thiswidget'>
    [здесь можно вставлять любой контент]
</b:includable>

Параметры тега следующие:

• id - (обязательный) уникальный идентификатор из буквенно-цифровых символов.
• var - (необязательный) идентификатор из буквенно-цифровых символов для обращения к данным внутри секции. Порядок работы с данными описан ниже.

У любого виджета должна быть одна главная includable-секция с идентификатором id='main'. Она обычно содержит большую часть всего содержимого, отображаемого для данного виджета, и, в большинстве случаев, этой секции бывает достаточно.

Если же Вы создадите несколько секций includable с различными идентификаторами ID, то автоматически они отображаться не будут. Однако, если Вы, например, создадите секцию includable с идентификатором id='new', то Вы можете сослаться на нее из главной секции с помощью конструкции <b:include name='new' /> и таким образом отобразить ее содержимое.

Параметры тега b:include следующие:

• name - (обязательный) буквенно-цифровой идентификатор, соответствующий ID одной из существующий секций b:includable в том же виджете.
• data - (необязательный) выражение или данные для передачи в секцию includable. Значение параметра data будет передано в параметр var includable-секции.

Далее следует простой пример, демонстрирующий использование b:includable и b:include. Порядок работы с циклами и данными будет описан позднее. Главное, что нужно понять из этого примера, каким образом секция «post» отображается внутри секции «main». В данном примере в цикле из массива сообщений posts выбираются отдельные сообщения i и в теге include через параметр data сообщения передаются в секцию includable с id = 'post'. Вложенная секция, ссылаясь на полученное сообщение через параметр var='p', печатает его заголовок.

<b:includable id='main'>
   <b:loop var='i' values='posts'>
      <b:include name='post' data='i'/>
   </b:loop>
</b:includable>

<b:includable id='post' var='p'>
   Title: <data:p.title/>
</b:includable>

Вложения наиболее полезны в тех случаях, когда у Вас есть некоторый код, который Вы хотите повторить несколько раз в разных местах. Вы можете написать это код только один раз, вложить его в секцию b:includable, а затем с помощью b:include использовать этот код там, где Вам нужно. Если же перед Вами не стоит такая задача, тогда Вы можете обойтись единственной includable-секцией. Заметьте, что главная includable-секция включается в код виджета автоматически. Писать <b:include name='main'/> вручную нет необходимости.

Данные

Тег data: tag, вероятно, один из самых важных, поскольку именно с помощью него вы получаете доступ к содержимому блога. Вот парочка примеров использования этого тега:

<data:title/>

или

<data:photo.url/>

Первый пример самый простой и будет работать в большинстве виджетов, так как у большинства виджетов есть заголовки (title). Все, что он делает, это печатает заголовок виджета. Второй пример иллюстрирует сложную переменную, из которой мы выбираем определенное свойство. Фото, скажем в виджете «Профиль», может иметь такие свойства как url (адрес), height (высота) и width (ширина). Использование символа точки «.» указывает на то, что мы хотим получить адрес именно фото, а не чего-нибудь другого.

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

Оператор цикла

Тег b:loop позволяет многократно повторить некоторый контент. Обычно он используется для вывода на печать списка сообщений для данной страницы, списка комментариев или списка ярлыков и т. д. Основной формат тега для использования циклов таков:

<b:loop var='identifier' values='set-of-data'>
   [повторяемый контент]
</b:loop>

В качестве переменной 'identifier' может быть любое выбранное Вами имя. В процессе выполнения цикла в эту переменную будут передаваться элементы набора данных 'set-of-data'. Традиционно этой переменной дают имя i. Набор данных 'set-of-data', указываемый в параметре values, может быть любым элементом данных списочного типа (полный список тегов data: будет рассмотрен в следующей статье). Например, в виджете «Сообщения блога» сообщения (posts) представляют собой список. Код, приведенный в следующем примере, перебирает в цикле все сообщения, выводя на печать заголовок каждого сообщения, заключенный в теги заголовка <h2>.

<b:loop var='i' values='data:posts'>
   <h2><data:i.title/></h2>
</b:loop>

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

Условный оператор If / Else

Теги условного оператора b:if и b:else можно использовать для отображения содержимого при выполнении определенного условия. Основной формат условного оператора выглядит следующим образом:

<b:if cond='condition'> 
   [содержимое, отображаемое при выполнении условия cond]
<b:else/>
   [содержимое, отображаемое при невыполнении условия cond]
</b:if>

Тег b:else необязательный. При его отсутствии результатом работы условного оператора будет либо содержимое секции b:if, либо ничего. Однако закрывающий тег </b:if> обязателен в любом случае.

В качестве условия «condition» можно использовать любые выражения, которые могут иметь значения либо true (истина), либо false (ложь). Некоторые теги данных сами по себе возвращают значения true/false, например allowComments (показать комментарии) для сообщения. Другие элементы данных можно сравнивать с определенными значениями, чтобы в результате получить true или false. Вот несколько примеров:

• <b:if cond='data:post.showBacklinks'> Истина, если для текущего сообщения установлено свойство «Показать обратные ссылки».
• <b:if cond='data:blog.pageType == "item"'> Истина, если текущая страница - страница сообщения.
• <b:if cond='data:displayname != "Fred"'> Истина, если имя автора отлично от Fred.
• <b:if cond='data:post.numComments > 1'> Истина, если у текущего поста более одного комментария.

Источник: Widget Tags for Layouts.