четверг, 24 декабря 2009 г.

Виджет заголовка Blogger

Заголовок, описание блога

Виджет Заголовок (Header) включен в шаблон блога по-умолчанию. С виду этот виджет «висит себе и жрать не просит», но он далеко не так прост, как может показаться. В этой статье я разобрал «по деталям» код виджета заголовка. Попутно рассмотрев такие конструкции шаблона как b:section, b:widget и b:includable. И сделав, пожалуй, самый подробный разбор виджета «Заголовок». Во всяком случае, этой информации пока нет даже в официальной справке.


В результате получилось очень много букв. Но все рассмотрено на конкретном примере, разобрано как целиком, так и по фрагментам, поэтому думаю будет не сложно.



Содержание



§ Три состояния виджета «заголовок»


В настройках виджета можно задать название блога, добавить описание и загрузить изображение для заголовка.


Настроить заголовокНастройка виджета «заголовок»

Заголовок может отображаться тремя разными способами:


  1. Изображение вместо заголовка и описания – только изображение

  2. Изображение после названия и описания* – изображение + текст

  3. Без изображения – только текст

* – С недавних пор изображение добавляется как фон заголовка, под текстом названия блога и описания.


Все три варианта отображения заголовка учитываются в коде виджета


§ Код виджета «Заголовок»


Чтобы посмотреть код виджета заголовок нужно перейти на вкладку редактирования шаблона Blogger (Дизайн → Изменить HTML) и нажать «Расширить шаблоны виджета».


# Листинг 1: Код виджета «Заголовок» (с моими комментариями).


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Успешный блог (заголовок)' type='Header'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<!-- Использовать изображение -->
<b:if cond='data:imagePlacement == &quot;REPLACE&quot;'>
<!-- 1. Изображение: Вместо заголовка и описания -->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
</div>
<b:else/>
<!-- 2. Изображение: После названия и описания
Изображение как фон текста
-->
<div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot; +
&quot;background-position: &quot; + data:backgroundPositionStyleStr + &quot;; &quot; +
data:widthStyleStr + &quot;min-height: &quot; + data:height + &quot;px;&quot; + &quot;_height: &quot; +
data:height + &quot;px;&quot; + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/><!-- Включить вложение 'title' -->
</h1>
</div>
<b:include name='description'/><!-- Включить вложение 'description' -->
</div>
</b:if>
<b:else/>
<!-- 3. Без изображения -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/><!-- Включить вложение 'title' -->
</h1>
</div>
<b:include name='description'/><!-- Включить вложение 'description' -->
</div>
</b:if>
</b:includable>

<!-- Код вложения 'title' -->
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>

<!-- Код вложения 'description' -->
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>


§ Условия выбора варианта отображения

# Листинг 2: Упрощенный («условный») код виджета «Заголовок».


<b:if cond='data:useImage'> <!!-- Если: Использовать изображение -->
<b:if cond='data:imagePlacement == &quot;REPLACE&quot;'> <!-- Если: Режим == Замена -->
<!-- только изображение -->
<b:else/><!-- Иначе -->
<!-- изображение + текст -->
</b:if><!-- Конец условия -->
<b:else><!-- Иначе -->
<!-- только текст -->
</b:if><!-- Конец условия -->

§ Подробнее о Секциях и Виджетах


b:section

b:sectionсекция шаблона Blogger. Это контейнер для виджетов (гаджетов).


<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<!-- ... -->
</b:section>

Атрибуты section:


  • classCSS класс элемента (секции);

  • id – уникальный идентификатор элемента в DOMОбъектной модели документа

  • maxwidgets – максимальное количество виджетов в секции

  • showaddelement – отображать пункт «Добавить гаджет». Значения: yes|no|maybe (да/нет/для блондинок**)

** – Автор шутит. Только yes или no.


b:widget

b:widget – код виджета или гаджета. Это небольшой, ограниченный блок страницы, который содержит собственный контент.


<b:widget id='Header1' locked='true' title='Успешный блог (заголовок)' type='Header'>
<!-- ... -->
</b:widget>

Атрибуты widget:


  • id – уникальный идентификатор элемента в DOM

  • locked – разрешено ли перемещение виджета. Значения: true|false (запрещено/разрешено)

  • title – заголовок виджета

  • typeтип виджета. Бывают виджеты разных типов: Header, HTML, Label, BlogArchive, LinkList...

b:includable

b:includable – Подключаемый блок в виджете. Небольшая, повторяющаяся часть кода виджета.


Имеет единственный атрибут:


  • id – уникальный идентификатор вложения

Подключается командой b:include с атрибутом name='идентификатор включаемого вложения'.


Вложение с id='main' включено в виджет по-умолчанию – это основной блок виджета.


# Листинг 3: Упрощенный код виджета «Заголовок» с вложениями.


<b:widget id='Header1' locked='true' title='Успешный блог (заголовок)' type='Header'>
<b:includable id='main'>
<!-- ... -->
<h1 class='title'>
<b:include name='title'/><!-- Включить вложение 'title' -->
</h1>
<!-- ... -->
</b:includable>

<!-- Код вложения 'title' -->
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Если открыта главная страница блога -->
<data:title/><!-- Отобразить текст заголовка -->
<b:else/>
<!-- Иначе -->
<!-- Отобразить ссылку на главную страницу блога -->
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>

Теперь можно рассмотреть фрагменты кода подробнее.


§ 1. Изображение вместо заголовка и описания


Про условия выбора я рассказал чуть выше. Следующий код для разбора такой:


# Листинг 4: Фрагмент кода виджета для варианта 1 – только изображение.


<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

Что такое expr

expr – это команда движку Blogger, что следующая строка является вычислимым выражением. Например, строка в моем шаблоне:

<a expr:href='data:blog.homepageUrl'>Главная</a>

В коде HTML на выводе (после вычисления) будет выглядеть так:
<a href='http://dotrb.blogspot.com'>Главная</a>


data

Значения data из приведенного кода виджета Заголовка.


  • data:blog.homepageUrlURL адрес главной страницы блога;

  • data:title – название блога;

  • data:height – вычисленная высота изображения для заголовка;

  • data:widget.instanceIdid виджета (см. раздел Секции и Виджеты для справки);
    Код
    expr:id='data:widget.instanceId + &quot;_headerimg&quot;'

    даст:
    id='Header1_headerimg'

  • data:sourceUrlURL адрес изображения в заголовке;

  • data:width – вычисленная ширина изображения для заголовка.

§ 2. Изображение после названия и описания


На самом деле, в современных шаблонах Blogger картинка вставляется как фоновое изображение под текстом заголовка и описания блога.


В этом блоке содержится небольшой комментарий дизайнера шаблонов. Кому интересно, мой приблизительный перевод:


Отобразить изображение как фон под текстом. Вы не сможете достаточно точно вычислить ширину в JS поскольку отступы (margins) не принимаются во внимание ни одним из clientWidth, offsetWidth или scrollWidth, поэтому мы не можем четко задать минимальную ширину если пользователь использует уменьшенное изображение.
Эти результаты ширины отступов получены ценой обрезанных пикселей. Если пользователь не использует уменьшенное изображение, мы расширяем заголовок.

# Листинг 5: Фрагмент кода виджета для варианта 2 – текст и фоновое изображение.


<!-- создается блок div с фоновым изображением -->
<div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot; +
&quot;background-position: &quot; + data:backgroundPositionStyleStr + &quot;; &quot; +
data:widthStyleStr + &quot;min-height: &quot; + data:height + &quot;px;&quot; + &quot;_height: &quot; +
data:height + &quot;px;&quot; + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/><!-- Включить вложение 'title' -->
</h1>
</div>
<b:include name='description'/><!-- Включить вложение 'description' -->
</div>

Значения data

  • data:sourceUrlURL адрес фонового изображения в заголовке;

  • data:backgroundPositionStyleStr – строка задания background-position (left center);

  • data:widthStyleStr – вычисленная ширина;

  • data:height – вычисленная высота.

Честно говоря, не особо я надеюсь на «автоматику» и этот блок предпочел бы отредактировать самостоятельно через редактор шаблона.


Про b:include я уже рассказывал в разделе про секции и виджеты.


§ 3. Только текст


Самый простой вариант заголовка.


# Листинг 6: Фрагмент кода виджета для варианта 3 – только текст.


<!-- 3. Без изображения -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/><!-- Включить вложение 'title' -->
</h1>
</div>
<b:include name='description'/><!-- Включить вложение 'description' -->
</div>

Тут используются стандартные теги HTML и два инклудавложения. Инклуды я уже описал в разделе Секции и Виджеты.


© 2009 dotRB.blogspot.com

13 Комментариев :

Ramin Mazur комментирует...

То есть вы предлагаете для облегчения сайта, при варианте одного изображения-заголовка удалять стандартный код и вставлять ваш вариант?

Croaker комментирует...

На самом деле – нет. Это был подробный разбор структуры виджета «Заголовок». Так сказать, – «база».

Полный код виджета приведен в листинге 1.

В зависимости от того, какой вариант размещения выбран в настройках виджета, ту часть и следует изменять (если нужно).

В листингах 4, 5 и 6 приведены фрагменты кода для каждого из трех вариантов заголовка соответственно:
только изображение,
изображение + текст,
только текст.

Виджет «Заголовок», как и любой другой виджет Blogger, можно изменять по своему усмотрению; то, что я называю «тюнинговать». А вот следующих статьях я расскажу что, зачем и как редактировать в виджете заголовка блога.

Ramin Mazur комментирует...

С нетерпением жду!!!

Ruy комментирует...

Уважаемый Ruby,посколько никаких ваших контактов не найти,пишу в комментариях.
предлагаю вам обмен ссылками с моим сайтом:


набор качественных и нужных гаджетов для blogger с подробными инструкциями установки
http://all-blogger-widgets.blogspot.com/

Croaker комментирует...

Привет, Ruy!

Связаться со мной можно через мой twitter или FriendFeed; или Friend Connect в конце концов… Хотя и в комментариях тоже сойдет ;)

Блогом я давно не занимался, поэтому про обмен ссылками пока ничего конкретного не скажу. Еще надо привести в порядок все накопившееся за время моего отсутствия. Держись на связи.

Анонимный комментирует...

Здравствуйте.

Подскажите пожалуйста:

У меня изображение хедера расположено в SCC,

в ШТМЛ он имеет вид:

(!-- header --)
(див id='header')

(b:section class='header-text' id='header' maxwidgets='1' showaddelement='no')
(b:widget id='Header1' locked='true' title='**** ***** (заголовок)' type='Header')
(b:includable id='title')
(b:if cond='data:blog.url == data:blog.homepageUrl')
(data:title/)
(b:else/)
(a expr:href='data:blog.homepageUrl')(data:title/></a)
(br/)(див id='header-desc')(data:description/)(/див)
(/b:includable)
(/b:widget)
(/b:section)

(/див)
(!-- /header --)"

(круглые скобки - это "спешиал фор Блоггер")

Скажите пожалуйста, как корректно убрать из хедера название блога и сделать из картинки хедера ссылку на главную страницу блога (желательно чтобы ссылка работала только когда пользователь находится НЕ на главной странице блога), а то я прочитал всю статью несколько раз, перепробовал с десяток вариантов, а так как надо все не работает.

Если можно объясните подробно (для чайников и блондинок :) ) или просто приведите код, который надо вставить для достижения желаемого.. Заранее благодарен.

Еще один "чайник".

antonkw комментирует...

Не знаю уж, в тему или нет, но я делал проще: в "locked='true'" ставил false. Через UI удалял сам виджет, вставлял виджет HTML-кода и через дримвивер за пару минут состряпал желаемый заголовок.

jaroslavna комментирует...

Спасибо. Воткнула шапку легко и быстро!

4ezaglory комментирует...

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

MrMakerLive комментирует...

А можно совсем удалить заголовок? Не хочу чтобы он занимал столько места, из-за него менюшка на весь экран не влазит..

Кирилл Непомнящих комментирует...

Я себя на блоге ни чего не стал менять)

sgushhenka комментирует...

Подскажите, пожалуйста, можно ли как-то убрать ссылку с заголовка/названия блога? Где это редактируется?

Croaker комментирует...

Нужно искать в настройках "Шаблон", "Список виджетов" — виджет Header1 или типа того. Внутри тега b:widget … type='Header' будет и искомая ссылка.

Отправить комментарий

Жги!