Теги виджетов

При создании основной части блога в разделе "Дизайн" используйте виджеты, чтобы добавить на страницу различные элементы, например фотографии или блогролл.

Типы тегов

В этом разделе описаны HTML-теги, которые можно использовать внутри закрывающих тегов.

Тег подключаемого сегмента (b:include)

Когда нужен b:include

Этот тег пригодится, если фрагмент кода нужно повторить в разных местах или использовать при определенных условиях.

Добавьте код в тег b:includable. Затем разместите b:include в нужном месте.

Формат

 

<b:includable id='main' var='thiswidget'>
  [нужный код]
</b:includable>

 

Атрибуты

• id (обязательный): уникальный идентификатор из латинских букв и цифр. Каждый виджет должен содержать один подключаемый сегмент с атрибутом id='main'.
• var (необязательный): идентификатор из латинских букв и цифр, который позволяет ссылаться на данные внутри этого сегмента.

Сегменты с различными идентификаторами не отображаются автоматически. Чтобы показать сегмент с id='new', нужно добавить в главный сегмент тег <b:include name='new' />.

Атрибуты тега b:include:

• name (обязательный): идентификатор из латинских букв и цифр. Он должен соответствовать ID тега b:includable в том же виджете.
• data (необязательный): выражение или фрагмент данных, передаваемые в сегмент. Этот элемент станет значением атрибута var в сегменте.
• cond (необязательный): выражение, которое подключает сегмент только при выполнении заданного условия. Действует так же, как атрибут b:if.

Пример

Пример использования тегов b:includable и b:include.

Следует понять главное: как сегмент "main" включает сегмент "post". Он передает сообщение под названием "p", и подключенный сегмент ссылается на него в качестве атрибута var "post", затем выводится название.

Обратите внимание, что подключаемый сегмент активизируется, только когда индекс меньше 10, поэтому в примере ниже будут обработаны только 10 сообщений (начальный индекс равен 0).

 

<b:includable id='main'>
  <b:loop var='p' index='index' values='posts'>
    <b:include name='post' data='p' cond='index < 10'/>
  </b:loop>
</b:includable>
<b:includable id='post' var='post'>
  Название: <data:post.title/>
</b:includable>

 

Вывод данных (data:)

Примеры

• <data:title/> выводит на экран название виджета.

• <data:photo.url/> – размер: <data.photo.width /> x <data.photo.height /> выводит атрибуты параметров фотографии, таких как url, высота и ширина. Точка (.) означает, что URL требуется именно для фотографии.

Дополнительные примеры

Полный список поддерживаемых тегов для оформления блога можно найти здесь.

 

Тег цикла (b:loop)

Когда нужен b:loop

Тег b:loop позволяет повторить фрагмент кода несколько раз. Обычно он используется, чтобы вывести каждое сообщение, комментарий, метку и т. д.

Формат

Тег имеет следующий формат:

 

<b:loop var='identifier' values='set-of-data'>
  [код, который будет повторяться в цикле]
</b:loop>

 

Части "identifier" (i) можно присвоить любое имя, которое будет использоваться для каждого нового элемента списка на каждой итерации цикла. В значениях могут быть указаны любые данные, представленные в виде списка, которые описаны в этой статье.

Например, в виджете сообщений блога элемент posts будет представлять список сообщений. Код, схожий с указанным ниже, будет повторяться в каждом сообщении, выводя его название внутри тегов заголовка.

 

<b:loop var='i' values='data:posts'>
  <h2><data:i.title/></h2>
</b:loop>

 

Обратите внимание, как "i" принимает значение каждого сообщения, так что вы можете увидеть его название.

Диапазон чисел

Тег цикла позволяет совершать итерации в диапазоне от числа A до числа B включительно (например, от 1 до 3 или от -3 до -9), в которых значение переменной принимает значение данного числа. Ниже представлен код маркированного списка со значениями 1, 2 и 3.

 

<b:loop var='i' values='1 to 3'>
  <li><data:i /></li>
</b:loop>

 

Атрибут индекса

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

 

<ul>
  <b:loop var='number' index='index' values='9 to 7'>
    <li>Индекс: <data:index />, число: <data:number /></li>
  </b:loop>
</ul>

 

В этом примере создается следующий маркированный список:

• Индекс: 0, число: 9
• Индекс: 1, число: 8
• Индекс: 2, число: 7

Теги if, elseif и else (b:if)

Когда нужны теги if, elseif и else

Теги b:if, b:elseif и b:else используются для отображения конкретного содержания в указанных случаях (например, если вы хотите, чтобы на главной странице блога появлялся один текст, а на страницах сообщений – другой).

Формат

 

<b:if cond='условие'>
  [содержимое, которое появляется, если условие выполнено]
<b:elseif cond='другое условие'/>
  [содержимое, которое появляется, если предыдущие условия не выполнены, а это условие выполнено]
<b:else/>
  [содержимое, которое появляется, если другие условия не выполнены]
</b:if>

 

Теги b:elseif и b:else не являются обязательными. Если их не использовать, отобразится либо содержимое сегмента с тегом b:if, либо ничего. В любом случае для закрытия сегмента нужно ставить тег </b:if>.

В качестве условия может быть использовано любое выражение, принимающее значение true или false. Некоторые теги могут принимать значения true/false сами по себе, например тег комментария к сообщению allowComments. Другие фрагменты данных можно сравнивать с конкретными значениями, чтобы получить в результате true или false. Вот несколько примеров:

• <b:if cond='data:post.showBacklinks'>
  Верно, если текущее сообщение отображает обратные ссылки.
• <b:if cond='data:blog.pageType == "item"'>
  Верно, если текущая страница является страницей элемента (страницей сообщения).
• <b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
  Верно, если текущая страница является страницей элемента (страницей сообщения), а текущее сообщение отображает обратные ссылки.
• <b:if cond='data:displayname != "Иван"'>
  Верно, если "Иван" не является отображаемым именем.
• <b:if cond='data:displayname == "Иван" or data:blog.pageType == "static_page"'>
  Верно, если "Иван" – это отображаемое имя или если текущая страница является статичной, то есть на ней нет сообщений.
• <b:if cond'data:post.numComments > 1'>
  Верно, если к текущему сообщению оставлено больше одного комментария.
• <b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
  Верно, если текущая страница содержит конкретное сообщение или является страницей определенного типа.

Переключатели (b:switch)

Когда нужен переключатель

Тег b:switch можно использовать вместо тега b:if, у которого есть несколько тегов b:elseif. Преимущество этого тега заключается в том, что не требуется повторять имя переменной. Такая конструкция легко читается и упрощает работу с отдельными значениями.

Формат

<b:switch var='[Выражение]'>
<b:case value="[Значение 1]" />
 [Содержимое, которое появляется, если переменная принимает значение 1]
<b:case value="[Значение 2]" />
 [Содержимое, которое появляется, если переменная принимает значение 2]
[… любые другие значения]
<b:default />
 [Содержимое, которое появляется в том случае, если значение переменной не равно ни одному значению, указанному с помощью тега b:case]
</b:switch>

Пример

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

<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
  <h1>Страница</h1>
<b:case value="item" />
  <h1>Сообщение</h1>
<b:default />
  <h2>Сообщения блога</h2>
</b:switch>

Атрибут выражения (expr:)

Когда нужны выражения

Атрибут ехрг: используется для установки значения атрибутов на основе значений в словаре данных. 

Примеры

• <a expr:href='data:blog.homepageUrl'>Home</a>
  Главная ссылка с URL главной страницы блога.
• <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a>
  Ссылка с URL RSS-канала записи. Оператор "+" объединяет две строки.
• <a expr:class='data:post.allowComments ? "comment" : "no-comment">Comment</a>
  Ссылка на класс "comment", если комментарии включены, или "no-comment", если отключены. Тернарный оператор (?:) принимает данное логическое значение и выбирает первое значение (после ?), если логическое значение верно, или второе значение (после :), если неверно.

Вычисляемые выражения (b:eval)

Когда нужны вычисляемые выражения

Тег b:eval можно использовать для вычисления сложных выражений, которые не ограничиваются стандартным тегом data.

Формат

<b:eval expr='[Выражение]' />

Примеры

• min-height: <b:eval expr="data:newWidth * data:height / data:width" />px;
  Выводит значение относительной высоты на основе нового значения ширины.
• <b:eval expr="data:post.labels[0].url" />
  Выводит URL первого ярлыка сообщения.
• <b:eval expr='data:post.allowComments ? "Комментарий" : "Комментарии отключены" />
  Выводит "Комментарий", когда комментарии разрешены, и "Комментарии отключены", когда они запрещены. Обратите внимание, что в этом выражении используется тернарный оператор.

Псевдоним переменной (b:with)

Когда нужен псевдоним переменной

Тег b:with можно использовать для временного хранения значения вычисленного выражения, что позволяет обойтись без сложных встраиваемых конструкций.

Формат

<b:with var='myComputedValue' value='[Выражение]' />

Примеры

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

<b:with var='style'
       value='"background-image: url(\"" + data:sourceUrl "\"); "
           + " width: " + data:width + "px; " '>
 <div id='header-outer'>   
   <div id='header-inner' expr:style='data:style'>
     <h1>Мой заголовок</h1>
   </div>
 </div>
</b:with>

Обратите внимание, что переменная будет существовать только для дочерних узлов тега b:with.

Пример

Нажмите на ссылку ниже, чтобы увидеть пример использования всех перечисленных тегов в HTML для виджета PageList вашего блога.

Пример

В этом виджете показаны примеры использования тегов b:widget, b:includable (и b:include), b:if (и b:else), а также b:loop.

 

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
  <b:includable id='main'>
    <b:if cond='data:title != ""'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <b:if cond='data:mobile'>
        <select expr:id='data:widget.instanceId + "_select"'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option> 
          </b:if>
        </b:loop>
        </select>
        <span class='pagelist-arrow'>&amp;#9660;</span>
      <b:else/>
        <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          <b:else/>
            <li>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          </b:if>
        </b:loop>
        </ul>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>