(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Анатомия шаблонов Blogger

Источник: habrahabr
drtitoff

Вступление

В Сети, как оказалось, не так уж и много информации относительно того, как создавать свои собственные темы оформления для блоговой платформы от 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". Вуаля - перед вами откроется окно с кодом примененного на данный момент шаблона.

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 29.01.2013 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
Zend Server with Z-Ray Developer Edition - Standard
FastReport FMX 2 Single
Quest Software. SQL Navigator for Oracle
FastReport.Net Professional Edition Single License
Компонент NetworkLock - от 1 ПК до 24 ПК
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
eManual - электронные книги и техническая документация
Один день системного администратора
Программирование на Visual С++
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Отличается ли ДрифтКазино от беттинга? (23)
Друзья, давно заметил, что на Дрифте уже несколько месяцев во всю рекламируется и предлагается...
 
Особенности покупки программного обеспечения - легальный софт vs. кряки/crack, keygen и пр. (4)
А Linux не пробовали? Там ЛЮБОГО добра хватает :) Без всяких кряков, кейгенов и т.д. При этом...
 
Создавая свой веб-сайт, не превращайте его в призрака (3)
Если автор имел что сказать, то почему он этого не сказал. Если не имел, то с какой целью он...
 
Игровые автоматы на настоящие деньги (3)
Только играя в интернет-заведении с лицензией...
 
Детейлинг центр (1)
Ездили в отпуск в Москву, сломалась выхлопная система - отремонтировали здесь:...
 
 
 



    
rambler's top100 Rambler's Top100