بناء جملة غصين

الإضافات الرئيسية منشئ القطعة يعرض HTML وCSS وJavaScript لعنصر واجهة المستخدم الخاص بك من خلال ملف محرك قالب بناء جملة الغصين. إذا لمست Twig في Timber أو Craft CMS، فسيبدو بناء الجملة مألوفًا {{ tokens }} طباعة قيم الحقول، {% if %} تظهر الكتل العلامات أو تخفيها، و {% for %} الحلقات تمر عبر صفوف المكرر.

هذه مجموعة فرعية آمنة مدمجة في البرنامج الإضافي، وليست مكتبة Twig الكاملة. لا يوجد تقييم ولا PHP مترجم خلفه، ويتم الهروب من كل قيمة مطبوعة بناءً على نوع الحقل الخاص بها. تحصل على أجزاء Twig المهمة لقوالب عناصر واجهة المستخدم، بدون الأجزاء التي يمكن أن تحول منشئ الصفحة إلى مشكلة أمنية.

حيث تكتب رمز القالب #

يحتوي محرر Widget Builder على ثلاث علامات تبويب للتعليمات البرمجية، ويعمل المحرك عليها جميعًا

• HTML: ترميز عنصر واجهة المستخدم الخاص بك. الرموز والشروط والحلقات كلها موجودة هنا.
• CSS: أنماط عنصر واجهة المستخدم الخاص بك. تعمل الرموز داخل قيم الخصائص، بحيث يمكن تغذية حقل اللون 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 }}"> يعمل فقط.
• الهروب يتبع نوع الحقل. تمر حقول URL عبر الهروب من عنوان URL، وتسمح حقول WYSIWYG وCode بـ HTML الآمن، وكل شيء آخر يتم الهروب منه بواسطة HTML. لا تحتاج إلى تعقيم أي شيء بنفسك.

المرشحات #

إلحاق مرشح برمز مميز بحرف الأنبوب. المحرك يدعم خمسة:

• {{ title|upper }} طباعة القيمة بأحرف كبيرة.
• {{ title|lower }} يطبعه بأحرف صغيرة.
• {{ title|trim }} شرائط المسافات البيضاء من كلا الطرفين.
• {{ content|raw }} يتخطى الهروب ويطبع القيمة كما هي.
• {{ content|e }} (أو |escape) القوات الهاربة مرة أخرى بعد أ raw.

يعالج |raw كأداة حادة. إنه موجود في الحالات التي يحمل فيها الحقل علامات عمدًا، واستخدامه في حقل نص عادي يعني أن أيًا كان نوع محرر الصفحة يهبط في صفحتك دون هروب. إذا كان الحقل من نوع WYSIWYG أو نوع التعليمات البرمجية، فنادرًا ما تحتاج إليه raw على الإطلاق، نظرًا لأن هذه الأنواع تسمح بالفعل بعلامات HTML الآمنة.

العلامات الشرطية مع كتل if #

آن {% if %} تعرض الكتلة محتوياتها فقط عند مرور الحالة. هذا هو الشريك الأمامي لخيار الشروط على جانب اللوحة: تخفي الشروط عنصر التحكم في لوحة Elementor، و 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 %}

علامات تبويب القراءة وحقول Popover #

يكشف اثنان من أدوات التحكم الهيكلية قيمهما الفرعية من خلال أشكال رمزية خاصة:

• علامات التبويب: تتم قراءة الأطفال بمسار من ثلاثة أجزاء: {{ tabs_name.tab_name.field_name }}. تم تسمية عنصر تحكم علامات التبويب tabs مع أ tab_1 علامة التبويب تحمل أ 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 %} تحل الحلقة بالإضافة إلى المكرر محل عدد ثابت من الكتل الملصقة.

ما لا يدعمه المحرك #

معرفة الحواف توفر وقت تصحيح الأخطاء. هذه مجموعة فرعية متعمدة، لذا لا توجد بعض ميزات Twig الكاملة

• لا {% set %}وحدات الماكرو أو التضمين أو وراثة القالب.
• لا توجد رياضيات داخل التعبيرات: قارن القيم، ولكن احسب في CSS calc() أو في علامة التبويب JS.
• لا توجد مرشحات أبعد من ذلك raw, escape/e, upper, lower، و trim.
• لا loop.index أو بيانات تعريف الحلقة الأخرى بالداخل {% for %}.
• لا توجد أقواس لمنطق التجميع. اطلب الخاص بك and/or سلاسل بحيث تقرأ بشكل صحيح، أو تنقسم إلى متداخلة if كتل.

إذا كان القالب يحتاج إلى منطق أثقل من هذا، فعادةً ما تكون هذه علامة لنقل القرار إلى اللوحة، على سبيل المثال حقل تحديد تحمل خياراته القيم التي كنت تحاول حسابها.

الأسئلة المتداولة #

إلتحاق بالركب #

محرك بناء جملة Twig هو ما يربط حقول Widget Builder بالعلامات المميزة الخاصة بك {{ tokens }} قيم لوحة الطباعة، {% if %} يزيل العلامات الاختيارية عند إيقاف تشغيله، و {% for %} يتيح لكتلة واحدة من HTML تقديم مكرر غير محدود. ابدأ برموز مميزة عادية، وأضف كتلة if للتبديل الأول، ثم انتقل إلى الحلقات عند تكرار التصميم. من هناك، مكرر, يختار، و الجلاد تغطي الحقول معظم الأدوات الديناميكية التي ستحتاج إلى بنائها. جديد على المنشئ نفسه؟ ال نظرة عامة على منشئ القطعة يمشي من خلال المحرر، و صفحة التسعير يوضح ما تتضمنه كل خطة.