Հատկություններ օգտագործումը տեմպլեյթներում

Շատ Twig տեմպլեյթներ կունենան մեկ կամ մի քանի Attribute օբյեկտ, որոնք փոխանցվում են որպես փոփոխականներ։ Attribute օբյեկտի նպատակն է պահել HTML հատկանիշների հավաքածու, ծրագրավորողին տրամադրելով օգտակար մեթոդներ տվյալների հետ աշխատելու համար և հեշտությամբ տպելու հատկանիշները։ Օրինակ՝ attribute.addClass('myclass') հեշտացնում է մի դաս ավելացնելը առանց տեքստերի կոնկատենացիայի մասին անհանգստանալու։

Սովորաբար հատկանիշները տեմպլեյթում պետք է ունենան այսպիսի տեսք՝

<div{{ attributes }}></div>

Էլեմենտի անունը և Twig սինտաքսի միջև չպետք է լինի բացատ։ Drupal 8-ի արմատում ներառված stable թեման ունի բազմաթիվ հատկանիշների օրինակներ։

Բոլոր տեմպլեյթների համար լռելյայն հասանելի են հետևյալ Attribute օբյեկտների փոփոխականները՝ attribute, title_attributes և content_attributes։

Կարող եք օգտագործել ձեր դեբագի օգնականները (kint(), dump(), dpm() և այլն)՝ տեսնելու, թե ինչ հասանելի է։ Ստորև օրինակ է՝ {{ kint(attribute) }} node.html.twig ֆայլում։

Attribute օբյեկտի մեթոդներ

Ահա մի քանի օգտակար մեթոդներ, որոնք կարող եք օգտագործել Attribute օբյեկտի հետ․

attributes.addClass()

Ավելացնում է դասեր կամ միացնում է դրանք CSS-ի գոյություն ունեցող դասերի զանգվածին։

Միակ դաս՝

<div{{ attributes.addClass('my-class') }}></div>

Բազմաթիվ դասեր՝

{%
  set classes = [
    'red',
    'green',
  ]
%}
<div{{ attributes.addClass(classes) }}></div>

վերծանում է՝ <div class="red green"></div>։

attributes.removeClass()

Հեռացնում է CSS դաս Attribute օբյեկտից։ Օգտագործվում է addClass-ի նման։ Հիմնականում, եթե փոփոխական դասեր եք ստանում նախապատրաստման ֆունկցիայից կամ այլ տեղից։

{% set classes = [ 'red', 'green', 'blue' ] %}

<div{{ attributes.addClass(classes).removeClass('green') }}></div>

վերծանում է՝ <div class="red blue"></div>։

attribute.setAttribute($attribute, $value)

Սահմանում է հատկանիշի արժեքը՝ ըստ բանալիի։

<div{{ attributes.setAttribute('id', 'myID') }}></div>

վերծանում է՝ <div id="myID"></div>

attributes.removeAttribute($attribute)

Հեռացնում է հատկանիշ Attribute օբյեկտից։

<div{{ attributes.removeAttribute('id') }}></div>

attributes.hasClass($class)

Ստուգում է, թե արդյոք դասերի զանգվածում կա նշված CSS դասը։

{% if attributes.hasClass('myClass') %}
  {# կատարեք գործողություններ #}
{% endif %}

Twig-ում հատկանիշների ստեղծում

Նորից Drupal 8.3.x-ից հասանելի է create_attribute() Twig ֆունկցիան։ Տեսեք փոփոխությունների գրառումը՝ https://www.drupal.org/node/2818293։

Սա տրամադրում է նոր դատարկ Attribute օբյեկտ՝ հատկանիշներ ստեղծելու համար։

{% set my_attribute = create_attribute() %}
{%
  set my_classes = [
    'kittens',
    'llamas',
    'puppies',
  ]
%}
<div{{ my_attribute.addClass(my_classes).setAttribute('id', 'myUniqueId') }}>
  {{ content }}
</div>

<div{{ create_attribute({'class': ['region', 'region--header']}) }}>
  {{ content }}
</div>

Այլ օգտակար հատվածներ

Դասերը և փոփոխականները կարող են վերագրավորվել․

{% set classes = ['red', 'green', 'blue'] %}
{% set my_id = 'specific-id' %}
{% set image_src = 'https://www.drupal.org/files/powered-blue-135x42.png' %}

<img{{ attributes.addClass(classes).removeClass('green').setAttribute('id', my_id).setAttribute('src', image_src) }}>

վերծանում է՝ <img id="specific-id" class="red blue" src="https://www.drupal.org/files/powered-blue-135x42.png">

without ֆիլտրի օգտագործում

Twig-ի without ֆիլտրը հատկանիշների որոշ մասը հանում է՝

<div class="myclass {{ attributes.class }}"{{ attributes|without('class') }}></div>

Նշում․ Քանի որ addClass() ֆունկցիան ավելի անվտանգ է և հարմար, առավել հաճախ պետք է նախընտրել այն փոխարենը նման կոդի օգտագործման։

Շատ զգուշացեք հատկանիշները ձեռքով սահմանելիս Twig տեմպլեյթներում։ Համբերատարորեն օգտագործեք հատկանիշների արժեքները կրկնակի հղումներով, հակառակ դեպքում կայքը կարող է ենթարկվել XSS հարձակումների։ Twig-ը ավտոմատ կերպով էքսկեյփ անում կրկնակի հղումների պարունակությունը և պաշտպանում XSS-ից։

Այս Twig տեմպլեյթը՝

<b class={{ attributes.class }}>Hello<b>

Օգտագործողի ներմուծմամբ՝

foo onclick=alert(bar)

Արդյունքը կլինի՝

<b class=foo onclick=alert(bar)>Hello</b>

Այս Twig տեմպլեյթը՝ կրկնակի հղումներով՝

<b class="{{ attributes.class }}">Hello<b>

Արդյունքը կլինի՝

<b class="foo &quot; onclick=&quot;alert(bar)">Hello</b>

without հատկանիշի փոփոխում

{% set attributes = attributes.addClass('my-class') %}
<div{{ attributes }}></div>