[Blogger.com] Язык шаблонов Blogspot: Тэги для описания элементов страницы.

Обновлено: 9 сентября 2015

Этот пост открывает серию публикаций, посвященных синтаксису шаблонов Blogspot.

---

Как устроен шаблон блога Blogspot

Шаблон блога на платформе Blogspot представляет собой XML-документ, содержащий в себе как обычные теги HTML, так и специальные теги шаблонизатора Blogspot. Эти специальные теги образуют особый язык программирования, который понимает движок блога.

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

После завершения обработки, на основе шаблона образуется документ HTML, содержащий все необходимые данные. Этот документ и отображается в браузере как страница вашего блога.

---

Секции и виджеты шаблона

Когда вы в панели управления блогом заходите на страницу «Дизайн», вы видите схематическое изображение страницы вашего блога, содержащее один или несколько столбцов («секций»). В этих столбцах содержатся виджеты. (Сейчас в русском переводе панели управления блога они почему-то названы «гаджеты», но в англоязычной документации везде фигурирует название widgets. Поэтому я буду называть их именно так.)

Виджеты — готовые строительные блоки, из которых состоит ваш блог. Самый главный виджет, отвечающий за отображение постов в вашем блоге, называется «Сообщения блога». Прочие виджеты носят вспомогательный характер, хотя среди них есть очень полезные, такие как архив блога и облако меток.

Важно понимать, что логика работы различных типов виджетов скрыта от нас, за неё отвечает движок сервиса Blogspot. Однако то, как виджет будет выглядеть на странице блога, определяется шаблоном, и мы можем влиять на отображение виджета, внося правки в шаблон.

Когда мы на странице «Дизайн» добавляем на страницу новый виджет, он добавляется в шаблон со своим стандартным оформлением. Если нам нужно внести изменения в шаблон добавленного виджета, мы можем перейти в панели управления блога на страницу «Шаблон» и вручную отредактировать шаблон.

Секции представляют собой области страницы, такие как боковая панель, подвал и т.д. Когда вы используете один из стандартных шаблонов Blogspot-а или закачиваете в блог готовый шаблон, найденный в интернете, вы получаете несколько секций, предусмотренных автором шаблона. Из панели управления невозможно добавить в шаблон новые секции или удалить существующие. Но можно добавить и удалить секции, а также изменить расположение секций, отредактировав шаблон вручную.

Для обозначения секции в коде шаблона используется парный тэг <b:section></b:section>, который может иметь следующие атрибуты:

• id — Обязательный атрибут. Уникальное имя секции. Допустимые символы: цифры и латинские буквы.
• class — Необязательный атрибут. Имя класса. При переключении блога с одного шаблона на другой эти имена помогают движку определить, куда в новом шаблоне следует перенести виджеты. Стандартные имена классов: navbar, header, main, sidebar, footer.
• maxwidgets — Необязательный атрибут. Максимальное количество виджетов, которое может быть размещено в данной секции. Не ограничено, если атрибут не указан.
• showaddelement — Необязательный атрибут. Может принимать значения 'yes' или 'no'. Значение по умолчанию: 'yes'. Определяет, будет ли на странице «Дизайн» отображаться ссылка «Добавить виджет» для данной секции.
• growth — Необязательный атрибут. Может принимать значения 'horizontal' или 'vertical'. Значение по умолчанию: 'vertical'. Определяет, располагаются ли виджеты в секции горизонтально или вертикально друг над другом.

Пример тэга, определяющего секцию:

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
</b:section>

Секция может содержать только виджеты, она не может содержать другие секции или произвольный код HTML. Если вам нужно поместить дополнительный код между виджетами, вам придётся разделить секцию на несколько отдельных секций.

В простейшем случае, виджет представлен одиночным тэгом <b:widget/>, на место которого подставляется содержимое виджета при выдаче страницы браузеру. Примеры виджетов:

<b:widget id="header" type='HeaderView' locked="yes"/>
<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>

Тег <b:widget/> может иметь следующие атрибуты:

• id — (обязательный) Каждый идентификатор виджета в шаблоне должен быть уникальным. Идентификатор не может быть сменён без удаления виджета и создания нового.
• type — (обязательный) Тип виджета, один из перечисленных ниже.
• locked — (необязательный) Принимает значения 'yes' или 'no', значение по умолчанию: 'no'. При значении 'yes' виджет не может быть перемещён или удалён при помощи страницы «Дизайн».
• title — (необязательный) Отображаемое имя виджета. Если не указано, будет использовано имя по умолчанию, такое как List1 и т.п.
• pageType — (необязательный) Может иметь значения 'all', 'archive', 'main', или 'item', значение по умолчанию: 'all'. Виджет будет отображаться только страницах соответствующего типа.
• mobile — (необязательный) Может иметь значения 'yes', 'no' или 'default'. Этот атрибут задаёт, будет ли виджет отображаться в мобильной версии сайта.

Допустимые типы виджетов:

• BlogArchive
• Blog
• Feed
• Header
• HTML
• SingleImage
• LinkList
• List
• Logo
• BlogProfile
• Navbar
• VideoBar
• NewsBar

Каждый виджет также может быть записан в расширенной форме, содержащей полную разметку и содержимое виджета. Расширенную форму виджетов вы увидите, например, если вы скачаете шаблон на вкладке «Шаблон». Более подробная информация о структуре виджетов содержится в статье «Тэги для содержимого виджетов».

Примечание: При отдаче странице блога браузеру все тэги <b:section> и <b:widget> заменяются на тэги <div>, имеющие соответствующий ID. Таким образом, можно соссылаться на них через div#header, div#myList и т.п. из CSS.

По материалам статьи Page Elements Tags for Layouts