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

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

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

Содержание

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


• Код виджета «Заголовок»
  
  • Условия в коде виджета


• Подробнее о Секциях и Виджетах
  
  • b:section
  • b:widget
  • b:includable


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


• 2. Изображение после названия и описания
  
  • Значения data


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

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

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

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

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

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:

• class – CSS класс элемента (секции);


• 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.homepageUrl – URL адрес главной страницы блога;


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


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


• data:widget.instanceId – id виджета (см. раздел Секции и Виджеты для справки);
  Код
  

  expr:id='data:widget.instanceId + "_headerimg"'

  
  даст:
  

  id='Header1_headerimg'



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


• 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:sourceUrl – URL адрес фонового изображения в заголовке;


• 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