Мелкие "полезности" при работе с XSL

Мелкие "полезности" при работе с XSL
Мелкие "полезности" при работе с XSL

Заметка для тех, кто начинает работать с языком XSLT. Небольшие хитрости, которые моут быть полезны при написании сайтов.

Для тех, кто не знает XSL (eXtensible Stylesheet Language) — семейство рекомендаций консорциума W3C, описывающее языки преобразования и визуализации XML-документов. Состоит из трех частей: * XSL Transformations (XSLT) — язык преобразований XML-документов. Информация взята из Wikipedia.

Подробную информацию о языке XSL можно узнать в онлайн учебнике на сайте w3schools.com.

Вернемся к нашим «хитростям».

1. Задать определенный стиль вывода для последнего элемента в строке

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

<xsl:if test="position() mod 4 = 0 and position  () > 3">
 <xsl:attribute name="class">last</xsl:attribute>
 </xsl:if>

2. Простановка знаков препинания после элемента строки, если он не последний

<xsl:if test="position()! = last  ()"><xsl:text>, </xsl:text></xsl:if></xsl:template>

3. Перевод строки после заданного элемента

Т.е. задание определенного количества элементов в строке. В моем примере — 4. 

Для нумерованных списков:

 <xsl:if test="position() mod 4 = 0 and position  ()! = last()">
 <xsl:text disable-output-escaping="yes">
 &lt;/ul&gt;
 &lt;ul class="shop_table"&gt;
 </xsl:text>
 </xsl:if>

Для таблиц:

<xsl:if test="position() mod 4 = 0">
 <xsl:text disable-output-escaping="yes">
 &lt;/tr&gt;
 &lt;tr valign="top"&gt;
 </xsl:text>
 </xsl:if>

Для верстки на DIVах:

 <xsl:if test="position() mod 2 = 0 and position()! = last()">
 <xsl:text disable-output-escaping="yes">
 &lt;/div&gt;
 &lt;div class="shop_table"&gt;
 </xsl:text>

Из примеров видно, что элементы строки будут заключены либо в <ul class= «shop_table»>, либо в тег строки таблицы <tr>, либо в <div class= «shop_table»>.

Еще вариант для верстки на DIVах:

 <xsl:if test="position() mod 3 = 0 and position()! = last()">
 <span class="table_row"></span>
 </xsl:if>

4. Пример для меню — применение стиля к заданному элементу структуры

Проверяем выводимые элементы структуры по id и применяем определенный стиль, если id совпало с указанным. В моем примере id=151. Например, таким образом можно выделить цветом элемент структуры меню, к которому нужно привлечь внимание пользователей.

 <a href="#">
 <xsl:variable name="style">
 <xsl:choose>
 <xsl:when test="@id=151">color:red;</xsl:when>
 <!-- Иначе обычный вывод с пустым стилем →
 <xsl:otherwise></xsl:otherwise>
 </xsl:choose>
 </xsl:variable>
 <xsl:value-of disable-output-escaping="yes" select="name"/>
 </a>

5. Проверка, какое выводить изображение элемента

Пример для HostCMS. Проверяем наличие загруженных изображений у элемента, например, инфосистемы — большое, малое или его нет вовсе. В зависимости от результатов проверки выводим определенное изображение.

 <xsl:choose>
 <xsl:when test="image_large! = ''"> <!--Если загружено большое изображение→
 <a href="{dir}{image_large}" title="{name}" target="_blank"><img src="{dir}{image_small}" alt="{name}" /></a>
 </xsl:when>
 <xsl:when test="image_small! = ''"> <!--Если загружено только малое изображение→
 <img src="{dir}{image_small}" alt="{name}" />
 </xsl:when>
 <xsl:otherwise> <!--Когда нет загруженных изображений→
 <img src="/images/no-image.png" alt="{name}" />
 </xsl:otherwise>
 </xsl:choose>

6. Назначаем разные классы для крайне правого и крайне левого элементов строки

Полезно, если нам нужно их выделить цветом или применить какие-то другие стили.

 <xsl:attribute name="class">
 <xsl:choose>
 <xsl:when test="position() mod 4 = 0">right</xsl:when>
 <xsl:otherwise>left</xsl:otherwise>
 </xsl:choose>
 </xsl:attribute>

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Вас может заинтересовать:

HOSTCMS v.6. Правильная семантическая микроразметка
HOSTCMS v.6. Правильная семантическая микроразметка
Не будем углубляться в терминологию и описание того, что означает микроразметка, т.к. об этом уже много чего написано и я беру за аксиому, что вы об этом уже знаете, раз читаете данную статью. Задача статьи описать более конкретный случай, а именно - использование микроразметки в XSL шаблонах HostCMS...

HostCMS v.6. Вертикальное меню на jQuery
HostCMS v.6. Вертикальное меню на jQuery
Простой пример левого вертикального выпадающего меню для групп товаров интернет магазина. Простая установка и настройка...

HOSTCMS v.6. Красивое горизонтальное выпадающее меню на CSS
HOSTCMS v.6. Красивое горизонтальное выпадающее меню на CSS
Меню адаптированно к использованию на сайтах под администрированием редакции HostCMS v.5 для вывода элементов каталога товаров. В выпадающем меню также выводится изображение подгруппы.

HOSTCMS v.6. Поиск по сайту с показом карточки товара
HOSTCMS v.6. Поиск по сайту с показом карточки товара
Небольшая доработка стандартного XSL шаблона «Поиск» для сайтов на HostCMS

Вертикальное выпадающее меню на jQuery для HostCMS
Вертикальное выпадающее меню на jQuery для HostCMS
Простое вертикальное меню с плавно выпадающим подменю для сайтов на HostCMS. Работает на jQuery…

HOSTCMS v.6. Краткая корзина в модальном окне
HOSTCMS v.6. Краткая корзина в модальном окне

Предлагаю вариант показа отложенного товара и содержимого краткой корзины в модальном окне в момент, когда Пользователь откладывает товар для совершения покупки. Решение делалось на основе встроенного в HostCMS адаптивного шаблона с подключеной библиотекой Bootstrap...


Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.