टहनी सिंटेक्स

मास्टर एडॉन्स विजेट बिल्डर आपके विजेट के HTML, CSS और जावास्क्रिप्ट को एक के माध्यम से प्रस्तुत करता है ट्विग-सिंटैक्स टेम्पलेट इंजनयदि आपने टिम्बर या क्राफ्ट सीएमएस में ट्विग को छुआ है, तो सिंटैक्स परिचित महसूस करेगाः {{ tokens }} फ़ील्ड मान प्रिंट करें, {% if %} ब्लॉक मार्कअप दिखाते हैं या छिपाते हैं, और {% for %} लूप पुनरावर्तक पंक्तियों के माध्यम से चलते हैं।

यह प्लगइन में निर्मित एक सुरक्षित सबसेट है, पूर्ण टहनी पुस्तकालय नहीं इसके पीछे कोई ईवल और कोई संकलित पीएचपी नहीं है, और हर मुद्रित मूल्य अपने क्षेत्र प्रकार के आधार पर बच जाता है आपको ट्विग के हिस्से मिलते हैं जो विजेट टेम्पलेट्स के लिए मायने रखते हैं, बिना भागों के जो एक पृष्ठ बिल्डर को सुरक्षा समस्या में बदल सकते हैं।

जहां आप टेम्पलेट कोड लिखते हैं #

विजेट बिल्डर संपादक में तीन कोड टैब हैं, और इंजन उन सभी पर चलता हैः

• एचटीएमएलः आपके विजेट का मार्कअप टोकन, शर्तें और लूप सभी यहां रहते हैं।
• सीएसएसः आपके विजेट की शैलियाँ टोकन संपत्ति मूल्यों के अंदर काम करते हैं, इसलिए एक रंग फ़ील्ड फ़ीड कर सकता है background: सीधे।
• जेएस: वैकल्पिक जावास्क्रिप्ट टोकन यहां भी काम करते हैं, जो एक स्क्रिप्ट में फ़ील्ड मानों को पारित करने के लिए आसान है।

विजेट के विकल्प पैनल में आपके द्वारा जोड़ा गया प्रत्येक नियंत्रण फ़ील्ड के नाम पर एक टेम्पलेट चर बन जाता है नाम सेटिंग। एक जोड़ें पाठ फ़ील्ड नामक title और {{ title }} उपयोगकर्ता ने जो भी टाइप किया है उसे प्रिंट करता है कोड संपादक के बगल में दस्तावेज़ीकरण साइडबार प्रत्येक फ़ील्ड के लिए टोकन को सूचीबद्ध करता है क्योंकि आप इसे जोड़ते हैं, इसलिए आपको कभी भी वर्तनी का अनुमान नहीं लगाना पड़ता है।

ध्यान दें: HTML टेम्प्लेट प्रत्येक बिल्ड में प्रस्तुत होता है, लेकिन CSS और JS आउटपुट शिप होता है मास्टर एडॉन्स प्रो, पूर्ण विजेट बिल्डर के समान ही।

टोकन के साथ मुद्रण मान #

सबसे सरल टेम्पलेट मार्कअप प्लस टोकन हैः

<div class="hero">
  <h2>{{ title }}</h2>
  <p>{{ description }}</p>
  <a href="{{ button_link }}">{{ button_text }}</a>
</div>

जानने योग्य कुछ नियमः

• बिंदीदार रास्ते संरचित मूल्यों तक पहुंचेंः {{ item.name }} एक पाश के अंदर, या {{ tabs.tab_1.person }} टैब नियंत्रण के लिए।
• मीडिया फ़ील्ड उनका URL प्रिंट करते हैं। जब कोई टोकन कोई छवि या वीडियो सरणी रखता है, तो इंजन आउटपुट देता है url भाग स्वचालित रूप से, तो <img src="{{ photo }}"> बस काम करता है।
• पलायन क्षेत्र प्रकार का अनुसरण करता है। यूआरएल फ़ील्ड यूआरएल से बचने के माध्यम से जाते हैं, WYSIWYG और कोड फ़ील्ड सुरक्षित HTML की अनुमति देते हैं, और बाकी सब कुछ HTML से बच जाता है। आपको स्वयं कुछ भी साफ करने की आवश्यकता नहीं है।

फिल्टर #

पाइप चरित्र के साथ एक टोकन के लिए एक फिल्टर जोड़ें इंजन पांच का समर्थन करता हैः

• {{ title|upper }} UPPERCASE में मान प्रिंट करता है।
• {{ title|lower }} इसे लोअरकेस में प्रिंट करता है।
• {{ title|trim }} दोनों सिरों से रिक्त स्थान को स्ट्रिप्स करता है।
• {{ content|raw }} भागने से बचता है और मान को वैसे ही प्रिंट करता है जैसे वह है।
• {{ content|e }} (या |escape) एक के बाद वापस भागने वाली सेनाएँ raw.

इलाज करना |raw एक तेज उपकरण के रूप में यह उन मामलों के लिए मौजूद है जहां एक क्षेत्र जानबूझकर मार्कअप रखता है, और एक सादे पाठ क्षेत्र पर इसका उपयोग करने का मतलब है कि जो भी पृष्ठ संपादक टाइप करता है वह आपके पृष्ठ में अपरिहार्य रूप से भूमि करता है यदि फ़ील्ड एक WYSIWYG या कोड प्रकार है जिसकी आपको शायद ही कभी आवश्यकता होती है raw बिल्कुल, चूंकि वे प्रकार पहले से ही सुरक्षित HTML टैग की अनुमति देते हैं।

यदि ब्लॉक के साथ सशर्त मार्कअप #

एक {% if %} ब्लॉक अपनी सामग्री को केवल तभी प्रस्तुत करता है जब स्थिति गुजरती है यह पैनल-साइड शर्तों का फ्रंट-एंड पार्टनर है विकल्प: स्थितियां एलिमेंटर पैनल में नियंत्रण को छिपाती हैं, और if ब्लॉक पृष्ठ से मिलान मार्कअप हटा देता है।

{% if show_badge %}
  <span class="badge">{{ badge_text }}</span>
{% endif %}

सत्यता के लिए एक नंगे चर की जाँच की जाती है, ट्विग शैली: खाली तार, 0, खाली सूचियाँ, और अनसेट मान गलत के रूप में गिने जाते हैं। चूँकि एक स्विचर फ़ील्ड दुकानों yes चालू होने पर और बंद होने पर खाली मान, {% if show_badge %} क्या आपको टॉगल करने की आवश्यकता है।

पूर्ण शाखाकरण कार्य भी:

{% if layout == "card" %}
  <div class="item item--card">...</div>
{% elseif layout == "list" %}
  <div class="item item--list">...</div>
{% else %}
  <div class="item">...</div>
{% endif %}

ऑपरेटर जिनका उपयोग आप परिस्थितियों में कर सकते हैं #

• तुलना: ==, !=, >, <, >=, <=। जब दोनों पक्ष संख्यात्मक होते हैं तो मानों की तुलना संख्याओं के रूप में की जाती है, अन्यथा पाठ के रूप में।
• तर्क: and, or, not, छोटे शब्दों में लिखा गया है।
• साहित्यकार: उद्धृत तार ("card" या 'card'), संख्याएँ, true, false, और null.

उन्हें स्वतंत्र रूप से मिलाएंः {% if show_price and price > 0 %}, या {% if not hide_footer %}, या {% if plan == "pro" or plan == "agency" %}.

पुनरावर्तक पंक्तियों के माध्यम से लूपिंग #

द पुनरावर्तक क्षेत्र है जहां {% for %} अपने रख-रखाव को कमाता है एक पुनरावर्तक नाम दिया गया menu_items उप-क्षेत्रों के साथ dish, price, और photo इस तरह प्रस्तुत करता हैः

<ul class="menu">
{% for item in menu_items %}
  <li class="menu__row">
    <img src="{{ item.photo }}" alt="{{ item.dish }}">
    <span class="menu__dish">{{ item.dish }}</span>
    <span class="menu__price">{{ item.price }}</span>
  </li>
{% endfor %}
</ul>

लूप वैरिएबल (यहाँ) itemेकिन, कोई भी शब्द काम करता है) एक समय में एक पंक्ति रखता है, और प्रत्येक उप-क्षेत्र आपके द्वारा दिए गए नाम के तहत एक बिंदीदार पथ के माध्यम से उपलब्ध है लूप के अंदर स्थितियां काम करती हैं, इसलिए प्रति-पंक्ति टॉगल एक नेस्टेड ब्लॉक दूर हैंः

{% for member in team %}
  <div class="member">
    <h3>{{ member.name }}</h3>
    {% if member.role %}<p class="role">{{ member.role }}</p>{% endif %}
  </div>
{% endfor %}

टैब और पॉपओवर फ़ील्ड पढ़ना #

दो संरचनात्मक नियंत्रण विशेष टोकन आकृतियों के माध्यम से अपने बाल मूल्यों को उजागर करते हैंः

• टैब: बच्चों को तीन-भाग वाले पथ के साथ पढ़ा जाता हैः {{ tabs_name.tab_name.field_name }}। एक टैब नियंत्रण नामित tabs साथ ए tab_1 टैब होल्डिंग ए person फ़ील्ड प्रिंट के रूप में {{ tabs.tab_1.person }}. किसी लूप की आवश्यकता नहीं.
• पॉपओवर टॉगलः पॉपओवर के अंदर प्रत्येक फ़ील्ड को एक संयुक्त टोकन मिलता है: टॉगल का नाम, एक अंडरस्कोर, फिर फ़ील्ड का नाम एक पॉपओवर नाम दिया गया overlay साथ ए opacity के रूप में प्रिंट के अंदर फ़ील्ड {{ overlay_opacity }}.

सीएसएस में टोकन #

सीएसएस टैब एक ही इंजन के माध्यम से चलता है, इसलिए स्टाइल फ़ील्ड सीधे संपत्ति मूल्यों में प्लग होते हैंः

.hero {
  background: {{ bg_color }};
  color: {{ text_color }};
}

{% if enable_shadow %}
.hero {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
{% endif %}

एक if एक पूरे नियम के चारों ओर ब्लॉक वैकल्पिक स्टाइल को शिप करने का एक साफ तरीका है: नियम केवल आउटपुट में मौजूद होता है जब टॉगल चालू होता है एक मीडिया फ़ील्ड यहां भी काम करता है, उदाहरण के लिए background-image: url("{{ hero_image }}");, चूंकि टोकन फ़ाइल यूआरएल में हल हो जाता है।

जावास्क्रिप्ट में टोकन #

जेएस टैब आपको पैनल मानों को एक स्क्रिप्ट में पास करने देता है स्ट्रिंग मानों को उद्धृत करें, और टॉगल के लिए सच्चाई पर दुबला करेंः

var speed = {{ slide_speed }};
var autoplay = "{{ autoplay }}" === "yes";

if (autoplay) {
  startSlider(speed);
}

जेएस में मुद्रित मान किसी भी अन्य टोकन की तरह बच जाते हैं, इसलिए उपयोगकर्ता टेक्स्ट फ़ील्ड में उद्धरण टाइप करके आपकी स्क्रिप्ट से बाहर नहीं निकल सकता है।

व्यावहारिक व्यंजनों #

कुछ पैटर्न जो लगभग हर विजेट में आते हैंः

• वैकल्पिक दूसरा बटनः पूरे एंकर को लपेटें {% if second_button_text %} तो बटन गायब हो जाता है जब पाठ क्षेत्र खाली है कोई स्विचर की आवश्यकता है।
• एक चयन से लेआउट वर्गः फ़ील्ड को सीधे क्लास विशेषता में प्रिंट करेंः <div class="pricing pricing--{{ layout }}">, फिर सीएसएस में प्रत्येक संस्करण को स्टाइल करें।
• फ़ॉलबैक सामग्री: {% if caption %}{{ caption }}{% else %}Untitled{% endif %} मार्कअप को खाली तत्वों को प्रस्तुत करने से रोकता है।
• क्रमांकित मूल्य स्तर: {% if price >= 100 %}<span class="premium-tag">Premium</span>{% endif %} संख्या फ़ील्ड के मान पर प्रतिक्रिया करता है।
• अपरकेस लेबलः {{ eyebrow|upper }} सीएसएस को मुक्त रहने देता है text-transform जब डिज़ाइन केवल एक स्थान पर कैप की मांग करता है।
• पुनरावर्तक-संचालित गैलरी, मेनू, समयसीमा और प्रशंसापत्रः एक {% for %} लूप प्लस एक पुनरावर्तक कॉपी-पेस्ट किए गए ब्लॉकों की एक निश्चित संख्या को प्रतिस्थापित करता है।

इंजन क्या समर्थन नहीं करता है #

किनारों को जानने से डिबगिंग समय की बचत होती है यह एक जानबूझकर सबसेट है, इसलिए कुछ पूर्ण-ट्विग विशेषताएं अनुपस्थित हैंः

• नहीं {% set %}, मैक्रोज़, शामिल है, या टेम्पलेट विरासत।
• अभिव्यक्तियों के अंदर कोई गणित नहीं: मानों की तुलना करें, लेकिन सीएसएस में गणना करें calc() या जेएस टैब में।
• परे कोई फिल्टर नहीं raw, escape/e, upper, lower, और trim.
• नहीं loop.index या अंदर अन्य लूप मेटाडेटा {% for %}.
• समूहीकरण तर्क के लिए कोई कोष्ठक नहीं। अपना आदेश दें and/or जंजीरें इसलिए वे सही ढंग से पढ़ती हैं, या नेस्टेड में विभाजित हो जाती हैं if ब्लॉकों।

यदि किसी टेम्पलेट को इससे अधिक भारी तर्क की आवश्यकता होती है, तो यह आमतौर पर निर्णय को पैनल में ले जाने के लिए एक संकेत होता है, उदाहरण के लिए एक चयन फ़ील्ड जिसके विकल्पों में वे मान होते हैं जिनकी आप गणना करने का प्रयास कर रहे थे।

अक्सर पूछे जाने वाले प्रश्न #

लपेटकर #

ट्विग सिंटैक्स इंजन वह है जो विजेट बिल्डर फ़ील्ड को आपके मार्कअप से जोड़ता हैः {{ tokens }} प्रिंट पैनल मान, {% if %} वैकल्पिक मार्कअप को बंद करने पर हटा देता है, और {% for %} एचटीएमएल के एक ब्लॉक को असीमित पुनरावर्तक की सेवा देता है सादे टोकन के साथ शुरू करें, अपने पहले टॉगल के लिए एक अगर ब्लॉक जोड़ें, फिर लूप में स्नातक जब एक डिजाइन दोहराता है वहां से, द पुनरावर्तक, चयन करें, और स्विचर फ़ील्ड्स सबसे गतिशील विजेट को कवर करते हैं जिन्हें आपको कभी भी बनाने की आवश्यकता होगी बिल्डर के लिए ही नया विजेट बिल्डर अवलोकन संपादक के माध्यम से चलता है, और मूल्य निर्धारण पृष्ठ दिखाता है कि प्रत्येक योजना में क्या शामिल है।