السابق

التالي

إنشاء قوالب ويب

مكتمل

لإنشاء قوالب صفحة مخصصة، يمكنك استخدام صف قالب الويب، والتي تعد أساساً قالب تخطيط. على سبيل المثال، إذا كان قالب الويب يتضمن HTML ثابتاً، يتم عرض HTML هذا "كما هو" فِي إخراج الصفحة الذي يستخدم هذا القالب. تأتي القوة الحقيقية لقوالب الويب من القدرة على احتواء كود Liquid، الذي يضيف إمكانيات معالجة إلى المحتوى الثابت، بما فِي ذلك الوصول إلى بيانات Dataverse.

قالب الويب هو جدول بسيط يحتوي على الأعمدة التالية:

• الاسم - عند تضمين قالب فِي محتوى آخر، أو توسيعه بواسطة قوالب أخرى، يُشار إليه بهذا الاسم.

• موقع ويب - صف موقع الويب حيث يتم استخدام القالب.

• المصدر - محتوى المصدر للقالب. ويمكن أن يكون نصاً ثابتاً أو جزء HTML أو (غالباً) تخطيطاً باستخدام Liquid.

• نوع MIME - يحدّد نوع ملحقات بريد الإنترنت متعددة الأغراض (MIME) الذي يرسله الخادم إلى العميل عند تقديم القالب. إذا لم تُقدّم قيمة، فستكون القيمة المفترضة text/html، وهو نوع قياسي لصفحات HTML. يمكنك إنشاء قالب ويب يعرض محتوى متخصصاً. على سبيل المثال، يمكنك إنشاء قالب ويب يُرجع بعض بيانات Microsoft Dataverse بتنسيق json. في هذه الحالة، سيتم تعيين نوع MIME إلى application/json.

إدارة قوالب الويب

تحتوي عمليات تنفيذ Liquid داخل مواقع ويب Power Pages على العديد من علامات القوالب التي تساعد فِي إدارة القوالب وترقية الصلاحية لإعادة الاستخدام.

علامة FetchXML

تسمح علامة fetchxml للمستخدمين بالاستعلام عن البيانات من Dataverse، وتعرض النتائج فِي صفحة.

{% fetchxml varResults %}
<!— Fetchxml query -->
<fetch>
  <entity name="account">
    <attribute name="name" />
  </entity>
</fetch>
{% endfetchxml %}

يحتوي متغير varResults على نتائج الاستعلام.

{% for account in varResults.results.entities %} 
  <p>{{ account.name }}</p>
{% endfor %}

هام

يتم دائماً تطبيق أذونات الجدول على البيانات المستردة باستخدام Liquid بما فِي ذلك علامة fetchxml.

علامة التعليق

باستخدام علامة comment، لن يتم عرض أي محتوي ضمن الكتلة، كما لن يُشغّل أي أكواد Liquid داخلها. هذه العلامة مفيدة لتضمين التعليقات الموسعة فِي قوالب معقدة وللتعليق مؤقتاً على كتل من التعليمات البرمجية عندما تقوم باستكشاف الأخطاء وإصلاحها.

This is a {% comment %}very useful {% endcomment %}comment.

يُنشئ المنطق السابق النتيجة التالية:

هذا تعليق.

علامة Raw

تتيح علامة raw إخراج كود Liquid فِي صفحة دون تحليله وتنفيذه. هذه العلامة مفيدة لإنشاء محتوى يستخدم بناء جملة جانب عميل متعارضة، مثل Handlebars. من المفيد أيضًا عندما يحتاج محتوى الصفحة إلى تضمين أجزاء من التعليمات البرمجية السائلة، مثل مقالة قاعدة المعارف التي تناقش استخدام اللغة السائلة وتتضمن عينات.

Hello, {% raw %}{{ user.fullname }}.{% endraw %} Nice to meet you.

يُنشئ المنطق السابق النتيجة التالية:

مرحباً، {{ user.fullname }}. تشرفنا برؤيتكم.

لاحظ كيفية عرض user.fullname بشكل صريح بدلاً من معالجته كإرشادات Liquid وتحويله إلى الاسم الفعلي للمستخدم.

تضمين علامة

تتضمن علامة include محتويات قالب واحد فِي آخر، حسب الاسم. تسمح هذه العلامة بإعادة استخدام أجزاء القالب العامة فِي أماكن متعددة، مثل عرض الارتباطات الاجتماعية. يكون للقالب المضمن إمكانية الوصول إلى أي متغيرات تم تحديدها فِي القالب الأصلي، ومن الممكن تمرير المعلمات.

{% include 'Breadcrumbs', separator: '>' %}

يتضمن هذا المنطق الإخراج الذي تم إنشاؤه بواسطة القالب فتات الخبز الذي سيكون له متغير separator معيَّن إلى قوس الزاوية اليمنى بالرمز (>).

علامة Block

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

علامة Extend

عند استخدامها مع العلامة block، توفر العلامة extend توريث القالب. تسمح هذه العلامة للقوالب المتعددة باستخدام تخطيط مشترك مع تجاوز مناطق معينة من التخطيط الأصلي. في حالة استخدام علامة extend، يجب أن تكون المحتوى الأول فِي القالب ويمكن أن تتبعها علامة block واحدة أو أكثر فقط.

القالب الأساسي

منطق القالب الأساسي كما يلي:

<div>
Hello
{% block content %}default content{% endblock %}
</div>

القالب التابع

منطق القالب التابع كما يلي:

{% extends 'Base Template' %}
{% block content %}Power Pages websites{% endblock%}

يُنشئ القالب التابع الإخراج التالي:

<div>
  Hello
  Power Pages websites
</div>

الاستخدام المعتاد لعلامتي extend وblock هو تقسيم التخطيط وقوالب المحتوى. تعرِّف القوالب الأصلية أو الأساسية عادة تخطيط الصفحة الواسع، على سبيل المثال، إذا كان صفحة من عمود واحد أم عمودين. يمكن للقوالب التابعة التي تقوم بتوسيع الأساس تعريف محتوي الكتل كما هو محدّد فِي الأصل فقط.

لعينة كود Liquid شامل يوضح توارث القالب مع علامتي block/extend وinclude، راجع تخطيطات الصفحات المخصصة فِي Power Pages.

أفضل ممارسات قوالب الويب

لتحسين بنية القالب وجعل قوالب الويب أكثر قابلية للإدارة، تأكد من اتباع الإرشادات التالية:

• اختر أسماء وصفية للقوالب الخاصة بك لأنه سيتم الرجوع إليها أو تضمينها كجزء من قوالب أخرى.

• قسّم تخطيط الصفحة وافصل التخطيط عن المحتوى. تكون هذه التخطيطات مرشحة لقوالب يمكن توسيعها.

• ابحث عن أجزاء قابلة للتكرار وإعادة الاستخدام؛ حيث يمكن تعريفها كقوالب فرعية ستستخدم علامة include.

• استخدم علامة include للمساعدة فِي إعادة استخدام التخطيط وأجزاء JavaScript المستخدمة بكثرة. اجعل قوالب JavaScript الخاصة بك "ذكية" باستخدام المعلمات المتوفرة فِي علامة include. يتم إدراج هذه الأجزاء كعناصر مضمّنة.

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

• ابحث عن أجزاء الصفحة التي تحتاج إلى الترجمة للتنفيذ متعدد اللغات. قم بتعريف هذه الصفحات كمحتوى صفحة أو أجزاء تعليمات برمجية متكررة من المحتوى.

• حدّد الأجزاء القابلة للتحرير. حدّد أجزاء صفحة الويب التي تريد أن يكون المستخدمون فيها مسؤولين عن إدارة المحتوى وصيانته.

• كن كريماً مع التخطيط عند كتابة قالب، ولكن تجنب الإفراط فِي استخدام أسطر فارغة باستخدام واصلات فِي العلامات الخاصة بك، على سبيل المثال:

  {%- if username -%}
    Hello, {{ user.firstname}}
  {%- endif -%}
  

• استخدم علامة comments لوصف الأجزاء المعقدة من القالب.

• ادرس القوالب التي يتم توزيعها بالفعل مع مدخل المبتدئين، وابحث عن تقنيات Liquid فِي مخططات صفحات مخصصة فِي Power Pages.

يتم تثبيت عدد هائل من قوالب Liquid الجاهزة للاستخدام عند تزويد مدخل المبتدئين: قوالب الويب المضمنة. تم إصلاح أسمائهم، وقد لا تكون بعض هذه القوالب متاحة للتحرير.

لمزيد من المعلومات، راجع نظرة عامة على Liquid.

متابعة