3 ноября 2009 г.

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

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

Код шаблона Blogger

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментировать в ВКонтакте

Комментировать в Facebook

Комментировать в Blogger

15 комментариев:

  1. Спасибо! Интересная статья.

    ОтветитьУдалить
  2. собственно передо мной стоит задача, которую я никак не могу решить. в свой блог (http://www.nidaapartamentai.blogspot.com/)между шапкой и всем остальным я хочу вставить виджет, состоящий из 5 картинок расположенных горизонтально, которые, в свою очередь, должны выполнять роль навигационной панели. прочитала у вас все статьи по этой теме, попробовала изменить html-код шаблона, но ничего из этого не получилось. помогите решить проблему!

    ОтветитьУдалить
  3. В том же Minima есть секция crosscol-wrapper между шапкой и контентом. Код ее обычно выглядит так (без виджетов):
    <div id='crosscol-wrapper' style='text-align:center'>
    <b:section class='crosscol' id='crosscol'/>
    </div>
    Если в Вашем шаблоне ее нет, добавьте такой код. Потом уже можно добавлять виджеты на закладке "Элементы страницы".

    ОтветитьУдалить
  4. да, такая секция есть. единственное отличие в наличии параметра showaddelement='no'
    я изменила содержание параметров. они стали выглядеть так:
    но в элементах страницы виджеты добавляются не горизонтально, как мне нужно, а вертикально :(

    ОтветитьУдалить
  5. Попробуйте добавить для секции параметр growth со значением horizontal, вот так:
    <div id='crosscol-wrapper' style='text-align:center' growth='horizontal'>
    <b:section class='crosscol' id='crosscol'/>
    </div>

    ОтветитьУдалить
  6. картинки все равно вертикально выстраиваются.
    icq - 129860486

    ОтветитьУдалить
  7. Параметр growth определяет, в каком направлении будут выстраиваться виджеты внутри секции, горизонтальном или вертикальном. Если картинки выстраиваются строго вертикально в пределах виджета, то дело в нем, в виджете. То есть виджет вертикально-ориентированный.

    ОтветитьУдалить
  8. спасибо за ответ.
    но тут не совсем понятно. "параметр growth определяет, в каком направлении будут выстраиваться виджеты внутри секции". в моем случае виджет - картинка. по вашим словам получается, что все дело в картинке. то есть картинки у меня вертикально ориентирована. ???????
    возможно ли с вами пообщаться иным способом? не хочется сводить в комментариях все к одной теме.
    icq - 129860486
    leoneeds@gmail.com

    ОтветитьУдалить
  9. Я хотел сказать, что, возможно, все картинки у Вас в одном виджете, и он их выстраивает вертикально.

    ОтветитьУдалить
  10. хорошо написано, подскажите, как можно увеличить(растянуть) основную часть блога на весь экран, чтобы слева и справа не было темных полос?
    адрес http://hour-for-bytime.blogspot.com/

    ОтветитьУдалить
  11. Привет, впервые тут и на первый взгляд очень интересно. Появился вопрос, возможно он уже рассматривался, в этом случае прошу ткнуть меня :) буду только рад.

    Так вот, вопрос следующий:
    - в моем блоге появилась потребность разнести информацию на страницы. Добавил виджет "Список страниц", а вот как на второй и последующих страницах размещать необходимую мне информацию и скажем добавить те или иные виджеты именно на эти страницы - вопрос открытый!
    Буду очень благодарен за совет бывалых!!

    ОтветитьУдалить
  12. Вопрос. Вверху "Название сайта" и "Описание сайта" нужно поместить в одну таблицу, чтобы справа по центру написать адрес сайта, чтобы было красиво. С таблицей проблем нет, как найти "Название сайта" и "Описание сайта"?
    Адрес http://oftheday.msk.ru

    ОтветитьУдалить
  13. Очень полезная статья. Огромное спасибо!

    ОтветитьУдалить
  14. Нужный пост! Спасибо! Подскажите где можно найти полный код стандартного шаблона, включая настройки тела сообщения, комментарии и прочее?

    ОтветитьУдалить
  15. подскажите пожалуйста, почему при переходе в панель инструментов BLOGGER выходит белый лист? Связанно ли это как-то с поисковиком гугл-хром? Установила его, потом пришлось удалить...

    ОтветитьУдалить