Вступление
В Сети, как оказалось, не так уж и много информации относительно того, как создавать свои собственные темы оформления для блоговой платформы от Google, во всяком случае, в Рунете. Есть какие-то куцые посты про то, как настроить отдельное свойство конкретного виджета, да и только. Посему, в этой статье я решил консолидировать знания на данную тему.
Базовые элементы шаблона
В общем случае шаблон Blogger представляет собой XML-файл, содержащий описание HTML-страницы (CSS-форматирование также включено в этот файл). Выглядит это примерно так (некоторые детали опущены для простоты):
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> <title> ... </title> <b:skin> ... </b:skin> <b:template-skin> ... </b:template-skin> </head> <body> ... </body> </html> Блоки <b:skin> и <b:template-skin>, отвечающие за CSS-оформление, я рассматривать не буду, поскольку лично я для создания темплейтов использую фреймворк Twitter Bootstrap. Сейчас лучше займемся той частью, которая отвечает за отображение контента.
Итак, основной составляющей любого шаблона Blogger является его тело — <body>. Оно состоит преимущественно из секций и виджетов. Секциями являются ключевые элементы страницы: шапка, боковое меню, подвал и тому подобные. Ну, а виджеты – это индивидуальные кирпичики страницы, такие как сообщение, картинка или любой другой элемент, который можно добавить на вкладке «Элементы страницы» в редакторе шаблона. Секции может окружать любой пользовательский HTML-код, который требуется.
Каждая секция в шаблоне открывается и закрывается специальным тегом, выглядит это примерно так:
<b:section id='header' class='header' maxwidgets="1" showaddelement="no"> </b:section>Тег <b:section> может иметь следующие атрибуты (обязательным является только id):
- id – уникальное имя, состоящее только из букв и цифр;
- class – обычное название класса в терминах HTML;
- maxwidgets – как видно из названия, это максимальное количество виджетов, которые могут присутствовать в данной секции;
- showaddelement – булевое поле, которое может принимать значения «yes» или «no» («yes» — по-умолчанию), определяя, может ли на вкладке «Элементы страницы» отображаться кнопка «Добавить элемент страницы» в данной секции;
- growth – последняя опция с возможными значениями «horizontal» или «vertical» («vertical» — по-умолчанию), которая определяет, как будут располагаться виджеты в данной секции.
Секции могут содержать только виджеты: если нужно вставить дополнительный код между виджетами в рамках одной секции, то эту секцию придется разбить на несколько частей.
Виджет, по сути, представляет собой одинарный тег, который вставляется в том месте, где на странице должно отобразиться содержимое этого виджета: само наполнение хранится в базе данных Blogger’а и извлекается оттуда во время рендеринга на стороне сервера. Ниже представлено несколько примеров виджетов:
<b:widget id="header" type='HeaderView' locked="yes"/> <b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/> <b:widget id="BlogArchive1" locked="false" mobile="yes" title="Blog Archive" type="BlogArchive"/> Виджет может иметь следующие атрибуты (только первые два из которых являются обязательными):
- id – уникальный идентификатор виджета, не может быть изменен без удаления виджета и создания нового;
- type – определяет тип виджета из списка допустимых типов (об этом чуть ниже);
- locked – булевое поле («no» — по-умолчанию), определяющее, может ли данный виджет быть перемещен или удален на вкладке «Элементы страницы»;
- title – заголовок виджета;
- pageType – может быть «all», «archive», «main», или «item» (с «all» по-умолчанию), указывает, на каких страницах блога будет отображаться данный виджет;
- mobile – может принимать значения «yes», «no» или «only» («default» по-умолчанию) и определяет, будет ли данный виджет отображаться в мобильной версии блога.
А вот и обещанные типы виджетов, которые вы можете использовать в своем шаблоне:
- BlogArchive
- Blog
- Feed
- Header
- HTML
- SingleImage
- LinkList
- List
- Logo
- BlogProfile
- Navbar
- VideoBar
- NewsBar
Каждый из них может быть описан в краткой (представленной выше) или расширенной форме, детализируя содержимое. О том, как настроить и видоизменить тот или иной виджет, речь пойдет в следующем разделе. Пока что хочу отметить, что после применения шаблона к блогу все элементы <b:section> и <b:widget> будут заменены на div’ы с определенными идентификаторами, то есть к элементам можно свободно обращаться в CSS, например, div#header или div#myList.
Расширение и модификация виджетов
Просто натыкать виджетов в тему – не интересно. Интересно кастомизировать их в соответствии со своими нуждами. Для этого, прежде всего, необходимо заменить одинарный тег на двойной:
<b:widget [...attributes...]> ... </b:widget> О том, что можно поместить посредине, речь пойдет дальше.
Вставки
Наполнение виджета содержится в блоке «includable» в следующем формате:
<b:includable id='main' var='thiswidget'> ... </b:includable> Атрибутов всего два: id и var. C id мы знакомы, а var – это еще один идентификатор, который служит для того, чтобы ссылаться на данный блок во внутренних секциях (об этом чуть дальше).
Каждый виджет должен иметь один includable с id=’main’. Чаще всего это будет единственный элемент, который будет содержать всю необходимую информацию. Если вы опишете больше одного внутреннего блока, то они не будут отображаться автоматически. Например, если вы создали блок с id=’new’, то для его отображения в main вам нужно будет написать <b:include name='new' />.
Тег b:include может иметь следующие атрибуты: name (обязательный) и data. Name должен совпадать с id одного из существующих includable, а data – это выражение или данные, которые будут переданы в includable (в качестве значения var).
Ниже представлен простой пример комбинации includable-блоков (о циклах речь пойдет чуть ниже):
<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> Один блок includable может вставляться в нескольких местах страницы или не вставляться нигде, если пока его не нужно отображать.
Данные
Итак, мы добрались до ключевого элемента из тех, которые нас интересуют, до данных:
<data:title/><data:photo.url/>- и т.д.
Это несколько примеров того, как просто можно использовать тег data. В первом случае мы просто подставляем значение заголовка в необходимом месте, а во втором — атрибут url элемента photo (это похоже на доступ к полю объекта в ООП). То, какие «поля» есть у каких «объектов» в Blogger мы рассмотрим чуть позже.
Циклы
Для записи циклов в шаблонах Blogger используется тег b:loop, имеющий следующий синтаксис:
<b:loop var='identifier' values='set-of-data'> ... </b:loop> Как видим, все довольно просто: в качестве var указывается переменная, служащая итератором, а в values мы записываем коллекцию, которую будем перебирать. Наглядный пример:
<b:loop var='i' values='data:posts'> <h2><data:i.title/></h2> </b:loop> Ветвление
Условия, как не парадоксально, в Blogger записывают с помощью тегов b:if и b:else. Общий формат условий имеет такой вид:
<b:if cond='condition'> [content to display if condition is true] <b:else/> [content to display if condition is false] </b:if> Тега b:else, впрочем, может и не быть, если контр-условие нам не нужно.
В качестве условия может быть использовано любое выражение, принимающее значения true или false. Несколько примеров напоследок:
<b:if cond='data:post.showBacklinks'><b:if cond='data:blog.pageType == "item"'><b:if cond='data:displayname != "Fred"'><b:if cond='data:post.numComments > 1'>
Data-теги
Как было сказано ранее, существует множество предопределенных тегов, позволяющих извлекать данные из базы Blogger’a. Все они записываются в виде: <data:name/> или <data:name1.name2/>, в зависимости от глубины вложенности той или иной информации.
Важно помнить, что data-теги, касающиеся определенного виджета, могут быть доступны исключительно в рамках этого виджета: например, нельзя, обратиться к photo.url, находясь внутри виджета BlogArchive, потому что он «не знает» ни о какой фотографии, а тем более о ее адресе. Однако существует исключение – так называемые, глобально доступные данные. Информацию из этой категории можно получить в любом месте шаблона, обращаются к ней в такой форме: <data:blog.*/> (где вместо звездочки записывается интересующий нас атрибут). В данную категорию входят следующие атрибуты:
- title – заголовок блога;
- pageType – тип страницы, может быть «item», «archive» или «index»;
- url – адрес текущей страницы;
- homepageUrl – адрес домашней страницы;
- pageTitle – заголовок страницы;
- encoding – кодировка блога, например, UTF-8;
- languageDirection – направление текста, может быть «ltr» (слева направо) или «rtl» (наоборот);
- feedLinks – автоопределяемые ссылки для заголовка страницы.
Остальные теги данных не являются глобальными и делятся на категории в соответствии с существующими в Blogger’е виджетами:
- Page Header
- Blog Posts
- Blog Archives
- Profile
- Text / HTML / JavaScript
- Feed
- Picture
- Labels
- List
- Link List
- Logo
Я не буду описывать каждую из категорий, так как все они очень похожи. Прочитать подробно про них можно здесь.
Заключение
Вот, пожалуй, и все. Теперь вы имеет общее представление об архитектуре темы оформления для Blogger. На всякий случай подскажу, где можно увидеть примеры шаблонов, и как загрузить свой. Для этого необходимо зайти в настройки вашего блога, в раздел «Шаблон». Там нужно нажать на кнопку «Редактировать HTML». Вуаля – перед вами откроется окно с кодом примененного на данный момент шаблона.
Надеюсь, статья оказалась для кого-то полезной. Большую часть информации я почерпнул из следующих источников:
ссылка на оригинал статьи http://habrahabr.ru/post/166073/
Добавить комментарий