टेम्पलेट्स में विशेषताओं (Attributes) का उपयोग
कई Twig टेम्पलेट्स में एक या एक से अधिक Attribute ऑब्जेक्ट्स होंगे, जिन्हें वेरिएबल्स के रूप में पास किया जाता है। Attribute ऑब्जेक्ट का कार्य HTML विशेषताओं (attributes) के एक सेट को स्टोर करना है, जिससे डेवलपर को इन डेटा के साथ इंटरैक्ट करने के लिए उपयोगी मेथड मिलते हैं और आसानी से attributes को प्रिंट किया जा सकता है। उदाहरण के लिए, attribute.addClass('myclass') एक क्लास जोड़ना आसान बना देता है, बिना स्ट्रिंग्स को सही तरीके से जोड़ने की चिंता किए।
आमतौर पर टेम्पलेट में attributes कुछ इस तरह दिखने चाहिए:
<div{{ attributes }}></div>
टैग नाम और Twig सिंटैक्स के बीच कोई स्पेस नहीं होना चाहिए। Drupal 8 के कोर में शामिल "stable" थीम में attributes सीखने के लिए बहुत से उदाहरण हैं।
डिफ़ॉल्ट रूप से सभी टेम्पलेट्स में निम्न attribute ऑब्जेक्ट वेरिएबल्स उपलब्ध हैं: attributes, title_attributes और content_attributes।
आप अपने डिबगिंग टूल (जैसे kint(), dump(), dpm() आदि) का उपयोग कर सकते हैं यह देखने के लिए कि क्या उपलब्ध है। नीचे node.html.twig फ़ाइल में {{ kint(attributes) }} के उपयोग का उदाहरण दिया गया है।
Attribute मेथड्स
यहाँ कुछ उपयोगी मेथड्स दिए गए हैं जिन्हें आप Attribute ऑब्जेक्ट के साथ उपयोग कर सकते हैं:
attributes.addClass()
क्लासेस जोड़ता है या उन्हें मौजूदा CSS क्लासेस के array में मर्ज करता है।
सिंगल क्लास:
<div{{ attributes.addClass('my-class') }}></div>
एक से अधिक क्लास:
{%
set classes = [
'red',
'green',
]
%}
<div{{ attributes.addClass(classes) }}></div>
आउटपुट: <div class="red green"></div>।
attributes.removeClass()
Attribute ऑब्जेक्ट से क्लास हटाता है। इसका उपयोग addClass जैसा ही होता है। मान लीजिए आपको कहीं और से, जैसे प्री-प्रोसेस फ़ंक्शन से, क्लासेस का वेरिएबल मिलता है।
{% set classes = [ 'red', 'green', 'blue' ] %}
<div{{ attributes.addClass(classes).removeClass('green') }}></div>
आउटपुट: <div class="red blue"></div>।
attribute.setAttribute($attribute, $value)
किसी attribute की key के लिए वैल्यू सेट करता है।
<div{{ attributes.setAttribute('id', 'myID') }}></div>
आउटपुट: <div id="myID"></div>
attributes.removeAttribute($attribute)
Attribute ऑब्जेक्ट से attribute हटाता है।
<div{{ attributes.removeAttribute('id') }}></div>
attributes.hasClass($class)
चेक करता है कि क्लास array में दिया गया CSS क्लास मौजूद है या नहीं।
{% if attributes.hasClass('myClass') %}
{# कुछ करें #}
{% endif %}
Twig में Attributes बनाना
Drupal 8.3.x से, एक नया Twig फ़ंक्शन create_attribute() जोड़ा गया। बदलाव का विवरण देखें: 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 फ़िल्टर का उपयोग करके कुछ attributes को हटाया जा सकता है:
<div class="myclass {{ attributes.class }}"{{ attributes|without('class') }}></div>
नोट: ज़्यादातर मामलों में इस तरह का कोड लिखने से बचना चाहिए और addClass() का उपयोग करना चाहिए।
Twig टेम्पलेट्स में मैन्युअल रूप से attributes असाइन करते समय अत्यधिक सावधानी बरतें। हमेशा attribute स्ट्रिंग्स को डबल कोट्स में रखें, अन्यथा साइट 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 " onclick="alert(bar)">Hello</b>
without attribute बदलना
{% set attributes = attributes.addClass('my-class') %}
<div{{ attributes }}></div>