الوصول إلى عنصر واجهة مستخدم مخصص من خلال كائن WidgetManager

عرفنا في ما سبق كيفية
الاستعلام عن مستند JSON لكائن WidgetManager
الوصول إلى عنصر العلامات الشرطية Conditiona Tags بواسطة كائن WidgetManager
والآن سنريكم كيفية الوصول إلى عنصر واجهة مستخدم مخصص بواسطة كائن WidgetManager لتصبح قادر على توضيف المخرجات والقيم والبيانات الخاصة بالمدونة التي سيتم تركيب عليها هذا النص البرمجي بلغة js لاحظ معي أني أتكلم هنا على إعتمادك على أسلوب المعالجة في جلب البيانات وهذا النمط الإحترافي سيوفر عليك عناء التعديل المباشر لقيم المتغيرات في كل مرة تستخدم فيها ذلك السكريبت أو القالب عموما.

مضمون هذه الوثيقة

لنفترض عزيزي المستخدم أنك تطور سكريبت بلغة js وصادف أنك تحتاج إلى عرض بعض البيانات مثلا عنوان ورابط الصفحة ولغة العرض طبعا هناك عدة طرق يا إما بالتحرير المباشر أو عن طريق الفرار من ترميز سلسلة //<![CDATA[...//]]> لكن هذا الأسلوب محدود و ليس إحترافي مقارنة ببناء نص برمجي ديناميكي نضيف ومتماسك وهذا مايقدمه لنا تحليل  مستند مدير القطعة Widget Manager
* سنحاول أن نرشدكم إلى أمثلة بسيطة من خلالها ستصبح قادر على فهم بيئة العمل من جهة والتلاعب بالبيانات وتوضيفها على أوسع نطاق في بناء مشروعك الخاص أوتطوير مدونتك.

الخطوات

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى - واجهة المستخدم

• قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
• إنتقل للمدونة >> ثم إلى قالب >> ثم إضغط على تحرير  Edit HTML  
• إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
• بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية - إستخراج البيانات

• عرفنا في الدرس السابق كيفية إستيراد كامل لمستند WidgetManager بالطريقة الآتية

js
<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
    if (typeof _WidgetManager === "undefined") return;
    var data = _WidgetManager._GetAllData();
//Do something with `data` here
}, false);
//]]>
</script>

• والآن كمثال سنبدأ بكتابة المتغيرات أسفل سطر كائن المستند WidgetManager بالشكل الآتي..

js
<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
    if (typeof _WidgetManager === "undefined") return;
    var data = _WidgetManager._GetAllData();
//Do something with `data` here
  var options = {
  language: data.blog.locale,
  title:    data.view.title || data.blog.pageName || data.blog.pageTitle || data.blog.title,
  uri:      data.view.url || data.blog.canonicalUrl,
  des:      data.view.description,
  image:    data.view.featuredImage
 };
}, false);
//]]>
</script>

توضيح

المشغل || الموجود بين علامات العنصر هو بمثابة معامل شرطية مستخدمة في لغة جافاسكريبت أي في حال لم يجد بيانات في العلامة الأولى سينتقل للعلامة الثانية وهكذا دواليك.
• وكالعادة للتأكد من صحة إستخراج البيانات نعتمد على التحقق من مخرجات سجل وحدة التحكم console.log();

js
<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
    if (typeof _WidgetManager === "undefined") return;
    var data = _WidgetManager._GetAllData();
//Do something with `data` here
 var  var options = {
  language: data.blog.locale,
  title:    data.view.title || data.blog.pageName || data.blog.pageTitle || data.blog.title,
  uri:      data.view.url || data.blog.canonicalUrl,
  des:      data.view.description,
  image:    data.view.featuredImage
 };
console.log(options);
}, false);
//]]>
</script>

• قم بحفظ العمل ثم قم بعرض أي موضوع ثم إضغط باليمين الماوس وإختر فحص العنصر inspect ثم إنتقل إلى تبويب Console لتجد المخرجات كالآتي..



• لإستخراج بيانات عنصر محدد مثلا عنوان الصفحة سنكتب الأمر بهذا الشكل..

js
console.log(options.title);

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثالتة - مثال عملي

• سنحاول تطبيق ماشرحناه في إنشاء نموذج بسيط لشفرة وضيفتها عرض بطاقة تعريفية بمحتوى التدوينة تحوي عنوان الموضوع مع الرابط وعرض الصورة الرئيسية بالإضافة إلى جهة العرض.

js
<script type="text/javascript">
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
    if (typeof _WidgetManager === "undefined") return;
    var data = _WidgetManager._GetAllData();
//Do something with `data` here
 var options = {
  language: data.blog.locale,
  title:    data.view.title || data.blog.pageName || data.blog.pageTitle || data.blog.title,
  uri:      data.view.url || data.blog.canonicalUrl,
  des:      data.view.description,
  image:    data.view.featuredImage
 };
            switch(blogLocale){
              case "ar"    : loca = 'right' ; break ;
              default      : loca = 'left' ; break ;
            }
function preview(){
var ran = document.getElementById("id_Previewfield");
var add = "";
add+='<div class="card_WidgetManager" style="text-align: '+loca+';width: 50%;margin: 10px auto;padding: 5px;font-size: 12px;background-color: #f8f8f8;border: 1px solid #e8eaed;">',
add+='<img src="'+options.image+'"/>',
add+='<a href="'+options.uri+'" target="_blank">'+options.title+'</a>',
add+='<p>'+options.des+'</p>',
add+='</div>';
ran.innerHTML=add;
};
preview();
}, false);
//]]>
</script>

• النتيجة النهائية ستكون النموذج الذي أمامك مباشرة.