11/14/2019

settings_overscan print announcement
عرفنا في هذه التدوينة
الوصول إلى عنصر واجهة مستخدم مخصص بواسطة كائن WidgetManager
طريقة إستدعاء مستند مدير القطعة Widget Manager وطريقة تحليله وطبعه ككائن JSON لنصل بعدها إلى الكائنات المتداخلة والمصفوفات وإستكشاف القيم كالحالة والوصف والبيانات..لتوضيفها مستقبلا في مشاريعنا البرمجية وهاهو الوقت لكي نريكم أول توضيف لتلك العناصر بطريقة إحترافية.

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

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

مراجع لهذه الوثيقة

في البداية أتمنى أن تراجع تدوينة
العلامات الشرطية الجديدة على منصة البلوجر [2017]
لكي تتضح لك الصورة أكثر لما سنشرحه لك في هذا الموضوع الفرق الوحيد هو بدل أن نستخدم أكواد Html سنستخدم فقط أكواد java  ...لنتابع

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

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

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

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

الخطوة الثانية - إستخدام العلامات الشرطية

  • عرفنا في الدرس السابق كيفية إستيراد كامل لمستند WidgetManager بالطريقة الآتية
  • 
    <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>
    
  • والآن كمثال سنضع السكريبت الخاص بنا داخل العلامة الشرطية المحددة if (data.view.isSingleItem) { … } بالشكل الآتي..
  • 
    <script type='text/javascript'>
    //<![CDATA[
    document.addEventListener("DOMContentLoaded", function() {
        if (typeof _WidgetManager === "undefined") return;
        var data = _WidgetManager._GetAllData();
    //Do something with `data` here
    if (data.view.isSingleItem) { 
           function msg(){  
            alert("Hello Javatpoint");
           }  
    }
    }, false);
    //]]>
    </script>
    
  • يمكنك إستعمال علامات شرطية أخرى مباشرة أسفل بعضها في نفس الكود وهي كالآتي
  • 
    <script type='text/javascript'>
    //<![CDATA[
    document.addEventListener("DOMContentLoaded", function() {
        if (typeof _WidgetManager === "undefined") return;
        var data = _WidgetManager._GetAllData();
    //Do something with `data` here
    if (data.view.isArchive) { … }        //صفحة الأرشيف
    if (data.view.isError) { … }          //صفحة الخطأ
    if (data.view.isHomepage) { … }       //الصفحة الرئيسية
    if (data.view.isLabelSearch) { … }    //صفحة البحث بحسب التسمية
    if (data.view.isMobile) { … }         //العرض المخصص على الهاتف الجوال
    if (data.view.isMultipleItems) { … }  //الصفحة الرئيسية ، البحث ، أو الأرشيف
    if (data.view.isPage) { … }           //الصفحات الثابتة
    if (data.view.isPost) { … }           //صفحات التدوينات
    if (data.view.isSingleItem) { … }     //كل من صفحات الثابتة والتدوينات
    }, false);
    //]]>
    </script>
    
  • أما إذا أردنا عدم تشغيل السكريبت في صفحة محددة نكتب رمز ! أمام العلامة الشرطية بالشكل الآتي..
  • 
    if (!data.view.isSingleItem) { … } 
    
  • أو يمكننا تطبيق ذلك بتحديد عوامل المقارنة Logical Operators بالشكل الآتي..
  • 
    if (data.view.isSingleItem == false) { … } 
    
  • وأحيطك علما بأنك تستطيع إستخدام العلامات الشرطية القديمة دون مشكلة مثلا
  • 
    <script type='text/javascript'>
    //<![CDATA[
    document.addEventListener("DOMContentLoaded", function() {
        if (typeof _WidgetManager === "undefined") return;
        var data = _WidgetManager._GetAllData();
    //Do something with `data` here
    if (data.blog.pageType == "archive") { … }      //صفحة الأرشيف
    if (data.blog.pageType == "error_page") { … }   //صفحة الخطأ
    if (data.blog.pageType == "index") { … }        //الصفحة الرئيسية ، البحث ، أو الأرشيف
    if (data.blog.pageType == "static_page") { … }  //الصفحات الثابتة
    if (data.blog.pageType == "item") { … }         //صفحات التدوينات
    }, false);
    //]]>
    </script>
    

    توضيح مهم
    كمراجعة لما قمنا به لاحظ أننا من خلال تشغيل كائن WidgetManager تمكنا من إستخدام عنصر العلامة الشرطية في كود java  تماما بنفس الصيغة التي تستخدم في وسم Html وكانت الفكرة بسيطة وهي من خلال إختبار الإستعلام سنحصل على القيمة المنطقية لكل عنصر معين مثلا إذا كنت متواجد الآن في صفحة التدوينة ستلاحظ في سجل وحدة التحكم أن العلامة الخاصة بها isPost صحيحة true كما في الصورة ..وقس على ذلك.



add_commentإرسال تعليق

  1. مقال جدا مفيد ورائع كالعاده
    ولكن لدي استفسار كيف يمكنني إلغاء اكواد ال javascript التي يضعها بلوجر تلقائيا في المدونة لقد قمت باستبدال الوسم </body> بالوسم &lt;!--</body>--&gt;&lt;/body&gt; ولكن تعطلت الكثير من الخواص في المدونه مثل زر اتصل بنا وتكبير الصورة داخل المواضيع تعطلت تماما في النسخه الاخيرة من بلوجر وذلك لانها مرتبطه بكود _WidgetManager فكيف احل هذه المشكلة وشكرا لك على المجهود الرائع.

    ردحذف
    الردود
    1. معلوم أنه عند تعطيل المكون الإضافي يتم إزالة بعض الخصائص والميزات في القالب لذلك يجب تضمين رابط المكتبةمع العلم أنه يمكنك تعطيل المكون الإضافي من خلال إضافة إلى الوسم <html السمات الآتية..
      1-لتعطيل مكتبة js نضيف
      b:js='false'
      2-لتعطيل مكتبة css نضيق
      b:css='false'
      يكون العمل النهائي بهذا الشكل
      <html b:css='false' b:js='false' b:version='2' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

      ملاحظة / عند التشغيل إستبد false بالقيمة true

      حذف