О теге widget и условиях для гаджетов

Опубликовано:
Тег widget используется во всех шаблонах Blogger для построения гаджетов (синоним - виджетов).
В то время, как вы создаёте новый гаджет (предположим, что это HTML/Javascript гаджет) в админ-интерфейсе Blogger, в шаблоне он будет выглядеть вот так: 

  <b:widget id='HTML1' locked='false' title='' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
А так же зарегистрируется в таком виде (смотрите исходный код страницы любого блога на Blogger в самом низу:

Гаджеты в Blogger
Гаджеты блога в исходном коде шаблона

Тег widget имеет следующее внутреннее строение:

<b:widget [ вложенная секция + данные ] />
Или: 

<b:widget [ вложенная секция + данные ]> </b:widget>
С закрывающим тегом, чтобы не путаться.

О вложенной секции (b:includable и b:include), циклах (loops) и данных (data) можно узнать здесь (отличный перевод официальной статьи). И наглядный пример, как использовать b:includable и b:include.

Как правило, пользователям достаточно простейших манипуляций:
  • редактирования заголовков гаджета/ изменения данных внутри гаджета
  • написания условия для отображения гаджетов

Каждое условие для конкретных типов страниц (сообщения, статические, архивные страницы и т.д.) описано в этой статье.

Большинство нужных условий (условных конструкций if, "если условие выполняется") b:if в гаджетах сосредоточено на равенстве или не равенстве.

Например, этот гаджет HTML13 будет отображаться только на главной странице: 

<b:widget id='HTML13' locked='false' title='' type='HTML'>
    <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h4 class='title'><data:title/></h4>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
</b:includable>
  </b:widget>
Обратите внимание, как и куда ставится условие.

Все внутренние данные - заголовок (data:title) и содержимое гаджета (data:content) в данном примере попадают внутрь условия: url страницы блога (data:blog.url) = url домашней страницы (data:blog.homePageUrl).

Всё, что находится в data:title и data:content вносится и хранится непосредственно в настройках гаджета в админ-интерфейсе. Естественно, что этот код можно изменить на свой и не зависеть от админки.
По аналогии используются и другие условия для любых типов страниц.

Для чего это нужно?
Примеры:
  • отображать гаджеты и различные фрагменты кода на разных страницах (кнопки социальных показывать сетей только на страницах сообщений; форму обратной связи только на странице 404; популярные сообщения только на домашней странице и т.д.)
  • не отображать гаджеты и различные фрагменты  на определённых страницах (не показывать блоки Adsense на статических страницах, не показывать кнопки социальных сетей на статических страницах и т.д.)

Согласно тегу условия b:if (условие выполняется) есть тег условия b:else (условие не выполняется):

<b:if cond='условие'>
[отображается, если условие выполняется]
<b:else/>
[отображается, если условие не выполняется]
</b:if>
Тег b:else не обязателен, и в случае его отсутствия и невыполнения условия ничего не отобразится.

Шаблон, используемый на Блогопоиске, целиком и полностью построен на всевозможных условиях. Таким образом мы скрываем не только гаджеты, но и сайдбар там, где он не нужен.

Полезные ссылки:
Post Includable

Ярлыки:
Редактор: | Издатель: +BlogopoiskRu |