При создании основной части блога в разделе "Дизайн" используйте виджеты, чтобы добавить на страницу различные элементы, например фотографии или блогролл.
Типы тегов
В этом разделе описаны 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:title/> выводит на экран название виджета.
-
<data:photo.url/> – размер: <data.photo.width /> x <data.photo.height /> выводит атрибуты параметров фотографии, таких как url, высота и ширина. Точка (.) означает, что URL требуется именно для фотографии.
Дополнительные примеры
Полный список поддерживаемых тегов для оформления блога можно найти здесь.
Когда нужен 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
, 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: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>
Когда нужны выражения
Атрибут ехрг: используется для установки значения атрибутов на основе значений в словаре данных.
Примеры
<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
можно использовать для вычисления сложных выражений, которые не ограничиваются стандартным тегом 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 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'>
<selectexpr:id='data:widget.instanceId + "_select"'
><b:loop values='data:links' var='link'> <b:if cond='data:link.isCurrentPage'>
<optionexpr:value='data:link.href'
selected='selected'><data:link.title/></option><b:else/>
<optionexpr:value='data:link.href'
><data:link.title/></option></b:if> </b:loop>
</select> <span class='pagelist-arrow'>&#9660;</span><b:else/>
<ul><b:loop values='data:links' var='link'> <b:if cond='data:link.isCurrentPage'>
<li class='selected'> <aexpr:href='data:link.href'
><data:link.title/>
</a> </li> <b:else/> <li> <aexpr: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>