Widget 1. Структура шаблонов и специальные теги Blogger

Если посмотреть на код шаблона Blogger (это можно сделать на странице «Дизайн» > «Изменить HTML» панели инструментов Blogger), то нетрудно заметить, что он очень похож на код обычной HTML страницы. Но кроме обычных HTML тегов в шаблоне Blogger присутствуют специальные теги. О них сегодня и пойдет речь.

Раздел <body> макета Blogger состоит из секций и виджетов (или гаджетов, что, в принципе, одно и то же). Секцииопределяют области страницы, такие как, боковая панель, нижний колонтитул и т. д. Виджеты - это отдельные интерфейсные элементы страницы, например, картинка, список и т. д. Список всех доступных виджетов можно увидеть и добавить в шаблон на странице «Дизайн» > «Элементы страниц». Вне секций шаблон Blogger может содержать любой HTML код.

Каждая секция в Вашем шаблоне имеет открывающий и закрывающий теги. Выглядят они примерно так:

Тег <b:section> имеет следующие параметры:

id - (обязательный) уникальный идентификатор, состоящий только из букв и цифр.
class - (необязательный) имя класса; общепринятые имена классов в шаблонах - 'navbar', 'header', 'main', 'sidebar'и 'footer'. Если Вы когда-нибудь решите перейти на другой шаблон, эти имена помогут Blogger определить, как правильно перенести содержимое секций в новый шаблон. Однако при желании Вы можете использовать и другие имена.
maxwidgets - (необязательный) максимальное количество виджетов, разрешенное в данной секции. Если параметр опущен, то количество виджетов не ограничено.
showaddelement - (необязательный) этот параметр определяет, будет или нет показываться ссылка «Добавить гаджет» для данной секции в режиме визуального редактирования шаблона (на вкладке «Дизайн» > «Элементы страницы» в панели инструментов Blogger). Параметр может иметь значения 'yes' (да, будет показываться ссылка «Добавить гаджет») или 'no' (нет). Значение по умолчанию - 'yes'.
growth - (необязательный) этот параметр определяет, в каком направлении будут выстраиваться виджеты внутри секции. Параметр может иметь значения 'horizontal' (горизонтальный) или 'vertical' (вертикальный). Значение по умолчанию - 'vertical'.

В секцию можно включать только виджеты; секция не может содержать в себе другие секции и любой другой код. Если Вы все же хотите вставить какой-то дополнительный код между виджетами, Вам придется разбить секцию на две или несколько секций.

В простейшей форме код виджета можно представить в виде одиночного тега, который, в сущности, лишь обозначает место для заполнения и указывает, каким образом данный элемент будет обрабатываться в режиме визуального редактирования шаблона (вкладка «Дизайн» > «Элементы страницы» в панели инструментов Blogger). Реальные данные для любого установленного виджета хранятся в базе данных Blogger, доступ к которым происходит в момент отображения виджета. Вот парочка примеров виджетов (первый виджет- заголовок страницы, второй - список):

Виджет может иметь следующие параметры:

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

Типы виджетов могут быть следующие:

Впрочем, в настоящее время список доступных виджетов весьма широк. Перечень их можно увидеть на вкладке «Дизайн» > «Элементы страницы» панели инструментов Blogger, если щелкнуть по ссылке «Добавить гаджет».

Код любого виджета может быть также записан в расширенной форме с полной детализацией разметки и содержимого данного виджета. Если вы посмотрите, к примеру, шаблон Вашего блога на вкладке «Дизайн» > «Изменить HTML» панели инструментов Blogger, то Вы увидите код виджетов именно в таком виде. Но обычно в такой форме записи нет нужды, поскольку гораздо проще вносить изменения в содержимое виджетов в режиме визуального редактирования на вкладке «Элементы страницы». Если же Вы хотите узнать больше о виджетах, им будет посвящен следующий пост.

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

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

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

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

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

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

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

Вложения

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

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

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

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

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

Данные

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

или

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

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

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

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

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

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

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

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

Тег 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.

Теги доступа к данным в шаблонах Blogger

Как было упомянуто в разделе выше "Теги виджетов в шаблонах Blogger", существует множество тегов, которые Вы можете использовать для включения в шаблон элементов данных блога. Эти теги имеют формат вида <data:name/> или <data:name1.name2/>, где name есть имя определенного элемента данных, который вы собираетесь использовать. В примере с name1.name2, name2 является свойством набора данных name1, например, photo.url.

Полный список доступных тегов данных приведен ниже. Для удобства он разбит по разделам, так как различные типы виджетов имеют различные типы данных.

Данные, доступные глобально
Заголовок страницы
Сообщения блога
Архив блога
Профиль
Текст / HTML / JavaScript
Канал
Картинка
Ярлыки
Список
Список ссылок
Логотип

Данные, доступные глобально

В отличие от данных, доступных для использования только в определенных виджетах, глобальные данные доступны в любом месте шаблона. На них следует ссылаться как на свойства глобального элемента данных blog, например, <data:blog.title/> и т. д.

title: Заголовок блога.
pageType: Тип текущей страницы. Может иметь одно из следующих значений: 'item' (сообщение), 'archive' (архив) или 'index' (индекс).
url: URL адрес текущей страницы.
homepageUrl: URL адрес главной страницы блога.
pageTitle: Заголовок текущей страницы. Заголовок текущей страницы может быть просто заголовком блога, но может содержать также дополнительную информацию на страницах архивов и сообщений.
encoding: Кодировка блога, например, UTF-8.
languageDirection: Направление языка. Может содержать значения значения ltr (слева направо) или rtl (справа на лево).
feedLinks: Ссылки глобальных каналов (фидов).

Заголовок страницы

Это довольно простой виджет, содержащий всего два свойства. На них можно ссылаться следующим образом: <data:title/> и <data:description/>.

title: Заголовок блога.
description: Описание блога.

Сообщения блога

Это центральная часть любого блога и при этом наиболее сложная часть. Написать всю начинку виджета «Сообщения блога» с нуля - непростая задача. Гораздо продуктивнее будет просто внести изменения в один из стандартных шаблонов Blogger. Однако, если у Вас все же есть желание поработать с кодом самостоятельно, перечень данных, доступных в этом виджете, приводится ниже.

feedLinks: Список каналов (фидов) данной страницы. На главной странице этот список будет содержать главные каналы блога; на страницах сообщений в нем также будут присутствовать каналы комментариев. У каждого элемента списка есть следующие свойства:

url: Адрес URL канала.
name: Имя канала (например, 'Posts' (сообщения) или 'Comments' (комментарии)).
feedType: Тип канала (Atom или RSS).
mimeType: Тип mime канала.

olderPageUrl: URL адрес страницы предыдущих сообщений, если таковые имеются в контексте текущей страницы. Данное свойство зависит от типа страницы - ссылка на предыдущие сообщения есть не у каждой страницы.
olderPageTitle: Заголовок для ссылки на страницу с предыдущими сообщениями.
newerPageUrl: URL адрес страницы следующих сообщений. Это свойство аналогично свойству olderPageUrl.
newerPageTitle: Заголовок для ссылки на страницу со следующими сообщениями. Аналогично olderPageTitle.
commentLabel: Фраза для подписи к количеству комментариев, например, «comments» или «комментариев».
authorLabel: Фраза для указания автора сообщения, например, «posted by» или «Автор».
timestampLabel: Фраза для указания времени публикации сообщения, например, «posted at» или «отправлено в».
postLabelsLabel: Фраза для подписи к списку ярлыков сообщения, например, «labels for this post» или «Ярлыки».
backlinksLabel: Фраза для описания обратных ссылок на сообщение, например, «links to this post» или «Ссылки на это сообщение».
posts: Список сообщений для данной страницы. Каждое сообщение имеет следующие свойства:

dateHeader: Дата сообщения; присутствует только в том случае, если это первое сообщение, опубликованное в этот день.
id: Числовой идентификатор сообщения.
title: Заголовок сообщения.
body: Содержание сообщения.
author: Отображаемое имя автора сообщения.
url: URL адрес текущего сообщения.
timestamp: Время публикации сообщения. В отличие от свойства dateHeader, timestamp есть у каждого сообщения.
labels: Список ярлыков сообщения. Каждый ярлык имеет следующие свойства:

name: Текст ярлыка.
url: URL ссылка на страницу, содержащую все сообщения с данным ярлыком в данном блоге.
isLast: True (истина) или false (ложь). Указывает, является ли данный ярлык последним в списке (полезно при расстановке запятых).

allowComments: 'True' (истина), если для данного сообщения разрешены комментарии.
numComments: Число комментариев к сообщению.
showBacklinks: Указывает, нужно ли показывать обратные ссылки для этого сообщения.
numBacklinks: Количество обратных ссылок для данного сообщения.
addCommentUrl: URL адрес формы 'Добавить комментарий' для данного сообщения.
emailPostUrl: URL адрес формы 'Отправить по почте' для данного сообщения.
editUrl: URL адрес формы редактирования данного сообщения.
feedLinks: Список каналов для данного сообщения. Этот список отличается от глобального списка feedLinks. Например, он может содержать канал. комментариев к сообщению. Каждый элемент списка имеет следующие свойства:

url: URL адрес канала.
name: Имя канала (например, 'Posts' (сообщения) или 'Comments' (комментарии)).
feedType: Тип канала (Atom или RSS).
mimeType: Тип mime канала.

comments: Список всех комментариев к данному сообщению (свойство актуально только для страницы сообщения). Каждый комментарий имеет следующие свойства:

id: Числовой идентификатор комментария.
body: Содержание комментария.
timestamp: Время создания комментария.
author: Отображаемое имя автора комментария, или 'Anonymous'.
authorUrl: URL адрес профиля автора комментария, если комментарий не анонимный.
deleteUrl: Ссылка для удаления комментария.
isDeleted: 'True' (Истина), если комментарий удален (текст удаленного комментария замещается заполняющим текстом, например «This post has been removed by the author»).

Архив блога

Стиль виджета «Архив блога» (простой список, иерархия, раскрывающееся меню) легко устанавливается в визуальном режиме на панели «Дизайн» > «Элементы страницы». Если Вы проектируете новую версию виджета, то проще установить в качестве стиля значение 'FLAT' (простой список), а затем уже вносить изменения в код.

title: Заголовок виджета.
style: Стиль архива; возможные значения 'MENU' (раскрывающееся меню), 'FLAT' (простой список), or 'HIERARCHY' (иерархия).
data: Список элементов архива; каждый элемент имеет свойства:

name: Наименование периода архива, например, «Август 2006».
url: Ссылка на страницу, содержащую сообщения данного периода.
post-count: Количество сообщений в данном периоде.

Профиль

Если у блога один единственный автор, то виджет «Профиль» содержит следующую информацию.

title: Заголовок виджета.
userUrl: URL адрес профиля автора.
location: Местонахождение из профиля автора.
aboutme: Информация «Обо мне» из профиля.
displayname: Отображаемое имя автора.
photo: Фото из профиля пользователя; свойства фото:

url: URL адрес фото.
width: Ширина фото в пикселах.
height: Высота фото в пикселах.
alt: Текст параметра alt для фото.

Обратите внимание, что для доступа к свойствам элемента данных photo, Вам нужно использовать формат записи <data:photo.url/>.

Для коллективного блога виджет «Профиль» содержит меньше информации:

title: Заголовок виджета.
authors: Список авторов, каждый элемент списка имеет следующие свойства:

displayname: Отображаемое имя автора.
userURL: URL адрес профиля автора.

Если Вы хотите, чтобы шаблон поддерживал как блоги с одним автором, так и коллективные блоги, Вы можете с помощью переменной data:team определить, с каким типом блога имеете дело. Например, вот так:

<b:if cond='data:team=="true"'>
   (отобразить список авторов)
</b:if>

Текст / HTML / JavaScript

Виджеты «Текст» и «HTML/JavaScript» работают одинаково и имеют два свойства.

title: Заголовок виджета.
content: Содержание виджета.

Канал

Содержимое виджета «Канал» подгружается автоматически с помощью Google AJAX API в момент загрузки страницы блога в браузере. Изменить вид виджета можно только с помощью таблиц стилей CSS.

title: Заголовок виджета.
feedUrl: URL адрес канала.

Картинка

Виджет «Картинка» содержит одно изображение и обеспечивает доступ к его свойствам.

title: Заголовок виджета.
sourceUrl: URL адрес изображения.
width: Ширина изображения в пикселах.
height: Высота изображения в пикселах.
caption: Подпись к изображению.

Ярлыки

Виджет «Ярлыки» содержит список всех ярлыков, используемых в блоге.

title: Заголовок виджета.
labels: Список ярлыков, каждый элемент списка имеет следующие свойства:

name: Текст ярлыка.
count: Количество сообщений для ярлыка.
url: Ссылка на страницу, содержащую сообщения с данным ярлыком.

Список

Это простейшая форма списка. Каждый элемент списка содержит только простой текст.

title: Заголовок виджета.
items: Список элементов.

Список ссылок

В списке ссылок каждый элемент списка имеет два свойства: текст и ссылку.

title: Заголовок виджета.
links: Список ссылок, каждая из которых имеет свойства:

name: текст ссылки.
target: URL адрес ссылки.

Логотип

Логотип Blogger. Этот виджет, пожалуй, самый простой - в нем всего один элемент данных.

fullButton: URL адрес выбранного логотипа Blogger.

Easythelog

С наступающим Новым Годом!

RegionAds

API в соц сетях