টুইগ সিনট্যাক্স

মাস্টার অ্যাডনস উইজেট নির্মাতা আপনার উইজেটের HTML, CSS, এবং JavaScript রেন্ডার করে a এর মাধ্যমে টুইগ-সিনট্যাক্স টেমপ্লেট ইঞ্জিন। আপনি যদি টিম্বার বা ক্রাফ্ট সিএমএসে টুইগ স্পর্শ করেন তবে সিনট্যাক্সটি পরিচিত মনে হবে: {{ tokens }} প্রিন্ট ক্ষেত্রের মান, {% if %} ব্লক মার্কআপ দেখায় বা লুকায়, এবং {% for %} লুপ রিপিটার সারি মাধ্যমে হাঁটা।

এটি প্লাগইনের মধ্যে নির্মিত একটি নিরাপদ উপসেট, সম্পূর্ণ টুইগ লাইব্রেরি নয়। এর পিছনে কোন ইভাল এবং কোন কম্পাইল করা পিএইচপি নেই এবং প্রতিটি মুদ্রিত মান তার ক্ষেত্রের প্রকারের উপর ভিত্তি করে এড়িয়ে গেছে। আপনি Twig-এর অংশগুলি পাবেন যা উইজেট টেমপ্লেটগুলির জন্য গুরুত্বপূর্ণ, এমন অংশগুলি ছাড়াই যা একটি পৃষ্ঠা নির্মাতাকে একটি নিরাপত্তা সমস্যায় পরিণত করতে পারে।

যেখানে আপনি টেমপ্লেট কোড লিখবেন #

উইজেট বিল্ডার এডিটরের তিনটি কোড ট্যাব রয়েছে এবং ইঞ্জিনটি সেগুলির সবকটিতে চলে:

• এইচটিএমএল: আপনার উইজেটের মার্কআপ। টোকেন, শর্ত এবং লুপ সবই এখানে থাকে।
• CSS: আপনার উইজেটের শৈলী। টোকেন সম্পত্তি মান ভিতরে কাজ করে, তাই একটি রঙ ক্ষেত্র খাওয়ানো যেতে পারে background: সরাসরি।
• জেএস: ঐচ্ছিক জাভাস্ক্রিপ্ট। টোকেন এখানেও কাজ করে, যা একটি স্ক্রিপ্টে ক্ষেত্রের মান পাস করার জন্য সহজ।

উইজেটের বিকল্প প্যানেলে আপনি যোগ করা প্রতিটি নিয়ন্ত্রণ ক্ষেত্রের নামানুসারে একটি টেমপ্লেট পরিবর্তনশীল হয়ে যায় নাম সেটিং। একটি যোগ করুন পাঠ্য ক্ষেত্র নামক title এবং {{ title }} ব্যবহারকারী যা টাইপ করেছে তা প্রিন্ট করে। কোড এডিটরের পাশের ডকুমেন্টেশন সাইডবারে প্রতিটি ক্ষেত্রের টোকেন তালিকাভুক্ত করা হয় যখন আপনি এটি যোগ করেন, তাই আপনাকে কখনই বানানটি অনুমান করতে হবে না।

দ্রষ্টব্য: এইচটিএমএল টেমপ্লেট প্রতিটি বিল্ডে রেন্ডার করে, কিন্তু সিএসএস এবং জেএস আউটপুট এর সাথে পাঠানো হয় মাস্টার অ্যাডনস প্রো, সম্পূর্ণ উইজেট নির্মাতার মতোই।

টোকেন সহ মান মুদ্রণ #

সবচেয়ে সহজ টেমপ্লেট হল মার্কআপ প্লাস টোকেন:

<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 ট্যাব হোল্ডিং a person ফিল্ড প্রিন্ট হিসাবে {{ tabs.tab_1.person }}. কোন লুপ প্রয়োজন.
• পপওভার টগল: পপওভারের ভিতরের প্রতিটি ক্ষেত্র একটি সম্মিলিত টোকেন পায়: টগলের নাম, একটি আন্ডারস্কোর, তারপর ক্ষেত্রের নাম। একটি পপওভার নামে overlay সঙ্গে একটি opacity প্রিন্ট ভিতরে ক্ষেত্র হিসাবে {{ overlay_opacity }}.

CSS-এ টোকেন #

CSS ট্যাব একই ইঞ্জিনের মাধ্যমে চলে, তাই শৈলী ক্ষেত্রগুলি সরাসরি সম্পত্তির মানগুলিতে প্লাগ করে:

.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 }}");, যেহেতু টোকেনটি ফাইলের URL-এ সমাধান করে।

জাভাস্ক্রিপ্টে টোকেন #

JS ট্যাব আপনাকে একটি স্ক্রিপ্টে প্যানেলের মানগুলি পাস করতে দেয়। স্ট্রিং মান উদ্ধৃত করুন, এবং টগলের জন্য সত্যতার উপর নির্ভর করুন:

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

if (autoplay) {
  startSlider(speed);
}

JS-এ মুদ্রিত মানগুলি অন্য যে কোনও টোকেনের মতো এড়িয়ে যায়, তাই একজন ব্যবহারকারী পাঠ্য ক্ষেত্রে উদ্ধৃতি টাইপ করে আপনার স্ক্রিপ্ট থেকে বেরিয়ে আসতে পারে না।

ব্যবহারিক রেসিপি #

প্রায় প্রতিটি উইজেটে আসা কয়েকটি নিদর্শন:

• ঐচ্ছিক দ্বিতীয় বোতাম: পুরো নোঙ্গরটি মুড়ে দিন {% if second_button_text %} তাই টেক্সট ফিল্ড খালি থাকলে বোতামটি অদৃশ্য হয়ে যায়। কোন সুইচার প্রয়োজন নেই।
• একটি নির্বাচন থেকে লেআউট ক্লাস: ক্ষেত্রটি সরাসরি ক্লাস অ্যাট্রিবিউটে প্রিন্ট করুন: <div class="pricing pricing--{{ layout }}">, তারপর CSS-এ প্রতিটি ভেরিয়েন্ট স্টাইল করুন।
• ফলব্যাক সামগ্রী: {% if caption %}{{ caption }}{% else %}Untitled{% endif %} খালি উপাদান রেন্ডারিং থেকে মার্কআপ রাখে।
• সংখ্যাযুক্ত মূল্য স্তর: {% if price >= 100 %}<span class="premium-tag">Premium</span>{% endif %} একটি সংখ্যা ক্ষেত্রের মান প্রতিক্রিয়া।
• বড় হাতের লেবেল: {{ eyebrow|upper }} CSS মুক্ত থাকতে দেয় text-transform যখন নকশা শুধুমাত্র একটি জায়গায় ক্যাপ জন্য কল।
• রিপিটার-চালিত গ্যালারী, মেনু, টাইমলাইন এবং প্রশংসাপত্র: এক {% for %} লুপ প্লাস একটি রিপিটার একটি নির্দিষ্ট সংখ্যক কপি-পেস্ট করা ব্লক প্রতিস্থাপন করে।

যা ইঞ্জিন সমর্থন করে না #

প্রান্তগুলি জানা ডিবাগিং সময় বাঁচায়। এটি একটি ইচ্ছাকৃত উপসেট, তাই কয়েকটি ফুল-টুইগ বৈশিষ্ট্য অনুপস্থিত:

• না {% set %}, ম্যাক্রো, অন্তর্ভুক্ত, বা টেমপ্লেট উত্তরাধিকার।
• এক্সপ্রেশনের ভিতরে কোন গণিত নেই: মান তুলনা করুন, কিন্তু CSS এ গণনা করুন calc() অথবা JS ট্যাবে।
• এর বাইরে কোনো ফিল্টার নেই raw, escape/e, upper, lower, এবং trim.
• না loop.index অথবা ভিতরে অন্যান্য লুপ মেটাডেটা {% for %}.
• গ্রুপিং লজিক জন্য কোন বন্ধনী। আপনার অর্ডার করুন and/or চেইন যাতে তারা সঠিকভাবে পড়তে পারে, বা নেস্টেডে বিভক্ত হয় if ব্লক।

যদি একটি টেমপ্লেটের এর চেয়ে ভারী যুক্তির প্রয়োজন হয়, তবে এটি সাধারণত প্যানেলে সিদ্ধান্ত নেওয়ার জন্য একটি চিহ্ন, উদাহরণস্বরূপ একটি নির্বাচন ক্ষেত্র যার বিকল্পগুলি আপনি যে মানগুলি গণনা করার চেষ্টা করছেন তা বহন করে৷।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #

মোড়ানো #

টুইগ সিনট্যাক্স ইঞ্জিন হল যা উইজেট বিল্ডার ক্ষেত্রগুলিকে আপনার মার্কআপের সাথে সংযুক্ত করে: {{ tokens }} প্রিন্ট প্যানেলের মান, {% if %} এটি বন্ধ হয়ে গেলে ঐচ্ছিক মার্কআপ সরিয়ে দেয়, এবং {% for %} HTML এর একটি ব্লক একটি সীমাহীন রিপিটার পরিবেশন করতে দেয়। প্লেইন টোকেন দিয়ে শুরু করুন, আপনার প্রথম টগলের জন্য একটি if ব্লক যোগ করুন, তারপর একটি ডিজাইনের পুনরাবৃত্তি হলে লুপগুলিতে স্নাতক হন। সেখান থেকে, রিপিটার, নির্বাচন করুন, এবং সুইচার ক্ষেত্রগুলি সর্বাধিক গতিশীল উইজেটগুলিকে কভার করে যা আপনাকে কখনও তৈরি করতে হবে৷ নির্মাতার কাছেই নতুন? দ্য উইজেট নির্মাতা ওভারভিউ সম্পাদকের মাধ্যমে হাঁটা, এবং মূল্য পৃষ্ঠা প্রতিটি পরিকল্পনা কি অন্তর্ভুক্ত করে তা দেখায়।