Пример использования b:includable и b:include

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

Из официальной документации мы знаем, что:

Includes are most useful if you have a section of code that you want to repeat multiple times in different places.
Вложения (вложенные секции) наиболее полезны тогда, когда необходимо повторить один и тот же код в разных местах.

И так:

• b:icludable - указывает, какие данные мы будем передавать внутри тега widget
• b:include - подключает наши данные внутри тега widget

К счастью, шаблон Blogger постороен на этом теге, и центральным местом в нём является гаджет (он же виджет) Blog1, который обеспечивает вывод статей и много всего другого в блоге.

Сочиним себе задачу - сделать над каждым сообщением в блоге фото автора с профилями соц.сетей:

1) Оформляем в редакторе поста (если не сильны в CSS) вот такой сниппет с ссылками и картинкой, переключаемся в html-режим и копируем в буфер обмена код.

2) Заводим его в b:includable, то есть создаём новую вложенную секцию и присваиваем ей id, например, Aldous.
Секцию для красоты и порядка, хотя и без разницы где, располагаем рядом с остальными в гаджете:

Сам вставленный код между includable не имеет значения, вставлять можно всё, что угодно, в пределах HTML, CSS и Javascript.
Формат примера:

<b:includable id='Aldous'>

         ...

</b:includable>

Теперь в пределах гаджета Blog, подключаем наш код (который мы вставили между b:includable) куда угодно.
Формат подключения:

<b:include name='Aldous'/>

В примере (см. самый первый скриншот), он вставлен сразу после даты:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

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

Полезные ссылки:
Страницы блога и условия в шаблонах