(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
ESET NOD32 Антивирус - продление лицензии на 2 года на 3ПК
Антивирус ESET NOD32 Antivirus Business Edition newsale for 5 user, лицензия на 1 год
AutoCAD LT 2019 Commercial New Single-user ELD Annual Subscription
Kaspersky Internet Security для всех устройств. 3-Device 1 year Base Download Pack
ABViewer Professional пользовательская
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
Один день системного администратора
Новости мира 3D-ускорителей
Работа в Windows и новости компании Microsoft
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Нормальные казино в 2021 году (6)
После долгих поисков все таки смог найти хорошие игровухи, хотя и ушла куча времени, пока я...
 
Отличается ли ДрифтКазино от беттинга? (35)
Друзья, давно заметил, что на Дрифте уже несколько месяцев во всю рекламируется и предлагается...
 
Реклама (6)
Добрый день. Какое продвижение сделать собственному бизнесу?
 
Бесплатные прогнозы на спорт (1)
Сейчас много мошеннических прогнозистов, которые занимаются так называемыми раскрутками счетов,...
 
Топ рейтинг слотов 2021 года (4)
Среди огромного выбора азартных слотов...
 
 
 



    
rambler's top100 Rambler's Top100