Перейти к основному содержимому

Расширение HeadStyle

Компонент HeadStyle расширяет Placeholder

HTML-элемент <style> используется для встраивания CSS-стилей в HTML-элемент <head>.

Примечание: Используйте HeadLink для подключения CSS-файлов. HeadLink следует использовать для создания элементов <link> для подключения внешних таблиц стилей. HeadStyle используется, когда вы хотите определить свои таблицы стилей встроенно:

  • appendStyle($content, $attributes = [])
  • offsetSetStyle($index, $content, $attributes = [])
  • prependStyle($content, $attributes = [])
  • setStyle($content, $attributes = [])

Во всех случаях $content — это фактические CSS-декларации. $attributes - это любые дополнительные атрибуты, которые вы хотите указать для тега <style>: lang, title, media или dir — все это допустимо.

Примечание: Настройка условных комментариев HeadStyle позволяет оборачивать тег стиля в условные комментарии, что позволяет скрывать его от конкретных браузеров. Чтобы добавить условные теги, передайте условное значение как часть параметра $attributes в вызовах методов.

HeadStyle с условными комментариями​

{# добавление стилей #}  
{% do pimcore_head_style().appendStyle(styles, {'conditional': 'lt IE 11'}) %}

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

Наконец, вы также можете использовать метод headStyle() для быстрого добавления деклараций элементов; его сигнатура такова: headStyle($content, $placement = 'APPEND', $attributes = []). Параметр $placement должен быть либо APPEND, либо PREPEND, или SET.

HeadStyle переопределяет каждый из методов append(), offsetSet(), prepend() и set(), чтобы обеспечить использование специальных методов, перечисленных выше. Внутренне он хранит каждый элемент как токен stdClass, который впоследствии сериализуется с помощью метода itemToString(). Это позволяет выполнять проверки на элементах в стеке и при необходимости изменять их, просто изменяя возвращаемый объект.

Основное использование​

Вы можете указать новый тег стиля в любое время:

{# добавление стилей #}  
{% do pimcore_head_style().appendStyle(styles) %}

Порядок очень важен для CSS; вам может потребоваться убедиться, что декларации загружаются в определённом порядке из-за каскадности; используйте различные директивы append, prepend и offsetSet для облегчения этой задачи:

{# Установка стилей в порядке #}  
{# размещение на определённом смещении: #}  
{% do pimcore_head_style().offsetSetStyle(100, customStyles) %}  
  
{# размещение в конце: #}  
{% do pimcore_head_style().appendStyle(finalStyles) %}  
  
{# размещение в начале #}  
{% do pimcore_head_style().prependStyle(firstStyles) %}

Когда вы, наконец, будете готовы вывести все декларации стилей в своем скрипте верстки, просто используйте помощник:

{{ pimcore_head_style() }}

Захват деклараций стилей​

Иногда вам необходимо сгенерировать декларации стилей CSS программно. Хотя вы можете использовать конкатенацию строк, heredocs и подобное, часто легче сделать это, создавая стили и добавляя теги Twig. HeadStyle позволяет делать именно это, захватывая его в стек:

{% do pimcore_head_style().captureStart() %}  
    body {  
        background-color: red  
    }  
{% do pimcore_head_style().captureEnd() %}

Допускаются следующие предположения:

Декларации стилей будут добавлены в стек. Если вы хотите, чтобы они заменили стек или были добавлены в верхнюю часть, вам нужно будет передать SET или PREPEND соответственно в качестве первого аргумента в captureStart().

Если вы хотите указать дополнительные атрибуты для тега <style>, передайте их в массиве в качестве второго аргумента к captureStart().

Примечание: Методы captureStart() и captureEnd() устарели с версии Pimcore 11.4.0. Используйте комбинацию set и pimcore_head_script для достижения аналогичного результата.

{% set inlineStyle %}  
    body {  
        background-color: red  
    }  
{% endset %}  
{% do pimcore_head_style().appendStyle(inlineStyle) %}  
  
{# Пример, если вы хотите указать дополнительные атрибуты для тега <style> #}  
{% do pimcore_head_style().appendStyle(inlineStyle, {"media": "screen"}) %}

Вы можете предложить улучшение документации или задать вопрос в комментариях.
Если вам нужна полноценная консультация — вы можете заказать её на нашем сайте.