توثيق بلس يو اي اصدار 3.2.0

السلام عليكم ورحمة الله وبركات

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

إشعار هام تنزيل قالب بلس يو اي و جميع مكوناته: لتنزيل هذا الملف، سيلزمك تسجيل الدخول عبر حساب Google (بريد Gmail). نُود إعلامك بأننا لا نُراجع طلبات الوصول اليدوية.

لن يعمل زر التنزيل الا اذا تم تسجيل الدخول لاضافتك في القائمة البيضاء
كلمة السر لفك الضغط عن الملفات: SiwaneXYZ

فور تسجيل دخولك بحساب Gmail، ستُضاف أذونات الوصول إلى حسابك تلقائيًا وعلى الفور، ليبدأ تنزيل الملف مباشرةً.

PlusUi-32.zip 473.50KiB

اذا واجهت اي مشكلة في تنزيل قالب بلس يو اي اخر اصدار تفضل اتصل بي و سارسل لك النسخة مع جميع مكوناتها و صفحاتها الاساسية.

يمكن استخدام معظم هذه الميزات فقط في وضع عرض HTML، ولا يمكنك التبديل إلى وضع "عرض الكتابة" أثناء استخدام بعض هذه الميزات.

1. في نافذة محرر المشاركات، انقر على أيقونة في أسفل يمين العنوان.
2. ستظهر لك خياران: عرض HTML وعرض الكتابة.
3. اختر عرض HTML.
4. انسخ والصق رمز المكون حيثما تريد إضافته وقم بإجراء التغييرات المناسبة.

---

الفقرة

استخدم وسم p لإضافة فقرات إلى المقال.

<!--[ فقرة ]-->
<p>هنا تضع فقرة نص عدد اسطر حسب رغبتك</p>

فقرة بمسافة بادئة للنص

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

<!--[ نص مسافة بادئة للفقرة ]-->
<p class='pIndent'>هذه فقرة تحتوي على مسافة بادئة للنص.</p>

فقرة بحرف استهلالي كبير (Drop Cap)

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

هو حرف كبير مزخرف يستخدم في بداية فقرة أو قسم. عادة ما يكون حجم الحرف الاستهلالي سطرين أو أكثر. (في اللغة العربية يفضل استخدام احرف ك "هو ,في, على...")

<!--[ فقرة بحرف كبير منسدل ]-->
<p><span class='dropCap'>هذه</span>هذه فقرة ذات عبارة كبيرة او حرف كبير.</p>

فقرة مرجعية للمنشور

لكتابة قائمة المراجع أو الحواشي السفلية أسفل المنشور.

المصدر:
www.example.com

<!--[ فقرة مرجعية ]-->
<p class='pRef'>المصدر:<br> www.example.com</p>

فاصل بين الفقرات

يُستخدم وسم <hr> لإضافة فاصل بين أجزاء المحتوى، تم تخصيصه في قالب بلس يو اي ليعرض ثلاث نقاط أفقية متباعدة بدلاً من الخط الأفقي التقليدي.

---

صور المنشور

فيما يلي صورة قياسية بدون أي حاوية، مما يعني أنه لن يكون هناك عرض "Lightbox" لهذه الصورة.

<!--[ الصورة القياسية ]-->
<img class='full' alt='الوصف_هنا' width='1280'  height='720' src='رابط_الصورة'/>

من الجيد معرفة ما يلي:

• نوصي بإضافة سمات alt، وwidth، وheight إلى وسوم img.

صورة مع تسمية توضيحية

لن يتم قراءة التسمية التوضيحية في هذه الصورة ضمن وصف/مقتطف المقال. يمكنك أيضًا اختيار إبقاء التسميات التوضيحية مرئية في مقتطفات المقالات.

التسمية التوضيحية للصورة هنا! أين كنت تبحث عنها؟

<!--[ صورة مع تعليق ]-->
<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='وصف_الصورة' src='رابط_الصورة'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>التسيمة_التوضيحية_هنا</td>
    </tr>
  </tbody>
</table>

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

قد تتساءل لماذا يجب عليك استخدام وسم table فقط لإضافة تسمية توضيحية للصورة على الرغم من توفر وسمي figure و figcaption في HTML؟

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

يمكنك أيضًا استخدام وسمي figure و figcaption بدلاً من وسم table كما هو موضح أدناه.

تسمية توضيحية للصورة باستخدام وسم figcaption.

<!--[ صورة مع تعليق ]-->
<figure>
  <img alt='عنوان_الصورة' src='مصدر_الصورة'/>
  <figcaption>التسيمة_التوضيحية_هنا</figcaption>
</figure>

صورة مع عرض تلقائي (Lightbox)

يساعد Lightbox على تكبير الصورة وجعلها قابلة للتركيز بالكامل عند النقر. يحتوي Lightbox أيضًا على محتويات سمة alt للصورة عند ظهورها عند النقر على الصورة.

أين تجد Lightbox؟ انقر على هذه الصورة!

من الجيد معرفة ما يلي:

• ستحصل جميع الصور في المنشور تلقائيًا على وظيفة Lightbox إذا كانت الصورة ملفوفة ضمن حاوية أصل لها إحدى أسماء الفئات lbx، separator، psImg، btImg، glImg أو تستوفي أحد المحددات .pS .separator >a، .pS .tr-caption-container td >a، .pS .separator >img، .pS .tr-caption-container td >img، figure img.
• إذا كانت الصورة ذات Lightbox ملفوفة ضمن وسم >a< (anchor tag)، فإن النقر على الصورة سيفتح الرابط فقط عندما يظهر Lightbox.
• لإلغاء وظيفة Lightbox التلقائية لصورة معينة بشكل صريح، أضف السمة data-lightbox='false' إلى وسم img.
• لإلغاء احتواء Lightbox التلقائي لمحتويات سمة alt بشكل صريح، أضف السمة data-caption='false' إلى وسم img.

صور بتنسيق شبكي (Grid Layout)

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

<!--[ الصور مع تخطيط الشبكة ]-->
<div class='psImg grImg'>
  <img alt='وصف_بديل_للصورة' src='رابط_الصورة'/>
  <img alt='وصف_بديل_للصورة' src='رابط_الصورة'/>
  <img alt='وصف_بديل_للصورة' src='رابط_الصورة'/>
  <img alt='وصف_بديل_للصورة' src='رابط_الصورة'/>
</div>

صور بخاصية "عرض الكل"

تُستخدم لإخفاء بعض الصور وستظهر عند نقر المستخدم على زر عرض الكل. يمكن تفعيل وظيفة "عرض الكل" مرة واحدة فقط، ولا يمكن إخفاء الصور مرة أخرى عند تفعيلها.

عرض جميع الصور

<!--[ الصور مع وظيفة إظهار الكل ]-->
<input hidden class='inImg' id='hideImg1' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='وصف_بديل_للصورة' src='رابط_الصورة'/>
  <img alt='وصف_بديل_للصورة' src='رابط_الصورة'/>
  <img alt='وصف_بديل_للصورة' src='رابط_الصورة'/>
  
  <div class='btImg'>
    <!--[ Image acting as a button ]-->
    <img alt='وصف_بديل_للصورة' src='رابط_الصورة'/>
    
    <!--[ زر للتفعيل ]-->
    <label for='hideImg1' aria-label='عرض جميع الصور'>عرض جميع الصور</label>
  </div>

  <!--[ إخفاء بقية الصور هنا ]-->
  <div class='psImg shImg'>
    <img alt='وصف_بديل_للصورة' src='رابط_الصورة'/>
    <img alt='وصف_بديل_للصورة' src='رابط_الصورة'/>
    <img alt='وصف_بديل_للصورة' src='رابط_الصورة'/>
    <img alt='وصف_بديل_للصورة' src='رابط_الصورة'/>
  </div>
</div>

صور بتنسيق التمرير (Scroll Layout)

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

<!--[ الصور مع تخطيط التمرير (النمط 1) ]-->
<div class='glImg'>
  <img alt='وصف_بديل_للصورة' src='رابط_الصورة'/>
  <img alt='وصف_بديل_للصورة' src='رابط_الصورة'/>
  <img alt='وصف_بديل_للصورة' src='رابط_الصورة'/>
  <img alt='وصف_بديل_للصورة' src='رابط_الصورة'/>
</div>

نصائح!
يمكنك تغيير ارتفاع صورة التمرير عن طريق إضافة أحد أسماء الفئات h150، h200، h250، إلى العنصر div.galWrp.

نمط التمرير هذا سيكون فعالًا فقط في عرض الجوال. يرجى محاولة فتح هذه الصفحة على جهازك المحمول.

<!--[ الصور مع تخطيط التمرير (النمط 2) ]-->
<div class='psImg scImg scrlH'>
  <img alt='وصف_بديل_للصورة' src='رابط_الصورة'/>
  <img alt='وصف_بديل_للصورة' src='رابط_الصورة'/>
  <img alt='وصف_بديل_للصورة' src='رابط_الصورة'/>
  <img alt='وصف_بديل_للصورة' src='رابط_الصورة'/>
</div>

التحميل الكسول للصور (Lazyload)

مفيدة لتأخير تحميل الصور بحيث تكون درجة PageSpeed للمدونة أعلى، حيث يتم تحميل الصورة فقط عندما يقوم المستخدم بالتمرير إلى منطقة الصورة. تستخدم هذه الميزة مكتبة @aFarkas/lazysizes لتحميل الصور بطريقة كسولة.

<!--[ تحميل الصورة ببطء ]-->
<img class='lazyload' alt='عنوان_الصورة' data-src='رابط_الصورة' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

تحذير!
لا تقم أبدًا بتحميل الصورة الأولى للمنشور بطريقة كسولة يدويًا. قد يؤدي ذلك إلى سلوكيات غير متوقعة.
يوصى أيضًا بعدم استخدامها، وبدلاً من ذلك، يمكنك تمكين تحميل الصور الكسول في إعدادات المدونة. سيقوم ذلك بتحميل صور منشوراتك تلقائيًا بطريقة كسولة.

---

رابط خارجي

يُعلم المستخدمين إذا كان الرابط سيؤدي إلى موقع آخر.

رابط خارجي

<a class='extL' href='الرابط_هنا' rel='nofollow noreferrer noopener' target='_blank'>عنوان_الارتباط</a>

أنماط بديلة:

رابط خارجي

<a class='extL alt' href='الرابط_هنا' rel='nofollow noreferrer noopener' target='_blank'>عنوان_الارتباط</a>

رابط خارجي

<a class='extL sec' href='الرابط_هنا' rel='nofollow noreferrer noopener' target='_blank'>عنوان_الارتباط</a>

---

زر

يحدد أزرارًا يمكن للمستخدم النقر عليها.

نص الزر

<!--[ زر ]-->
<a class='button' href='الرابط_هنا'>عنوان_الارتباط</a>

نص الزر

<!--[ الزر المحدد (outlined) ]-->
<a class='button ln' href='الرابط_هنا'>عنوان_الارتباط</a>

تحميل

<!--[ زر مع أيقونة التنزيل ]-->
<a class='button' href='الرابط_هنا'><i class='icon dl'></i>عنوان_الارتباط</a>

عرض توضيحي

<!--[ زر مع أيقونة تجريبية ]-->
<a class='button' href='الرابط_هنا'><i class='icon demo'></i>عنوان_الارتباط</a>

---

رابط التحميل

لتوفير معلومات حول الملفات المحملة للمستخدمين.

file_name.zip 200kb

<!--[ صندوق التنزيل ]-->
<div class='dlBox'>
  <!--[ تغيير سمة data-text='...' لإضافة نوع ملف جديد ]-->
  <span class='fT' data-text='zip'></span>
  <div class='fN'>
    <!--[ اسم الملف ]-->
    <span>اسم_الملف.zip</span>
    <span class='fS'>200KiB</span>
  </div>

  <!--[ رابط التنزيل (تغيير السمة href='...' لإضافة رابط التنزيل) ]-->
  <a class='button' aria-label='تحميل' href='ضع_هنا_الرابط' rel='nofollow noreferrer noopener' target='_blank'><i class='icon dl'></i></a>
</div>

---

اقتباس من بلوك (Blockquote)

شيئان لا حدود لهما: الكون وغباء الإنسان؛ ولست متأكدًا من الكون.

ألبرت أينشتاين

<!--[ اقتباس قياسي ]-->
<blockquote>
  <p>هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات.</p>
  <span>مجهول</span>
</blockquote>

كن على طبيعتك وقل ما تشعر به، لأن من يهتمون لا يهمون، ومن يهمون لا يمانعون.

برنارد إم. باروخ

<!--[ اقتباس (النمط 1) ]-->
<blockquote class="s1">
  <p>هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات.</p>
  <span>مجهول</span>
</blockquote>

لقد تعلمت أن الناس سينسون ما قلته، وسينسون ما فعلته، ولكنهم لن ينسوا أبدًا كيف جعلتهم يشعرون.

مايا أنجيلو

<!--[ اقتباس (النمط 2) ]-->
<blockquote class="s2">
  <p>هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات.</p>
  <span>مجهول</span>
</blockquote>

---

مربع ملاحظات

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

معلومة!
هذا نص توضيحي. يمكن استبداله بالمعلومات المهمة أو النص المراد إبرازه.

<!--[ ملاحظة المعلومات ]-->
<p class='note'><b>معلومة!</b><br/>
  هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات.
</p>

تحذير!
هذا نص تحذيري. يمكن استبداله بالمعلومات التحذيرية أو النص المهم الذي يحتاج إلى تنبيه.

<!--[ ملاحظة تحذيرية ]-->
<p class='note wr'><b>تحذير!</b><br/>
  هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات.
</p>

---

تنبيه

مشابه لمربع الملاحظات، والاختلاف الوحيد هو أن "التنبيه" له نمط مختلف ولديه المزيد من المتغيرات:

افتراضي تنبيه افتراضي بسيط - هذا نص توضيحي.

<!--[ تنبيه افتراضي ]-->
<div class='alert'><b>افتراضي</b>
  تنبيه افتراضي بسيط - هذا نص توضيحي.
</div>

محدد الإطار تنبيه بسيط محدد الإطار - هذا نص توضيحي.

<!--[ تنبيه محدد ]-->
<div class='alert outline'><b>محدد الإطار</b>
    تنبيه بسيط محدد الإطار - هذا نص توضيحي.
</div>

معلومة! تنبيه معلوماتي بسيط - هذا نص توضيحي.

<!--[ معلومات متغير التنبيه ]-->
<div class='alert info'><b>معلومة!</b>
  تنبيه معلوماتي بسيط - هذا نص توضيحي.
</div>

تحذير! تنبيه تحذيري بسيط - هذا نص توضيحي.

<!--[ تنبيه تحذير متغير ]-->
<div class='alert warning'><b>تحذير!</b>
  تنبيه معلوماتي بسيط - هذا نص توضيحي.
</div>

نجاح! تنبيه نجاح بسيط - هذا نص توضيحي.

<!--[ نجاح متغير التنبيه ]-->
<div class='alert success'><b>نجاح!</b>
  تنبيه نجاح بسيط - هذا نص توضيحي.
</div>

خطأ! تنبيه خطأ بسيط - هذا نص توضيحي.

<!--[ خطأ في متغير التنبيه ]-->
<div class='alert error'><b>خطأ!</b>
  تنبيه خطأ بسيط - هذا نص توضيحي.
</div>

معلومة! تنبيه معلوماتي بسيط محدد الإطار - هذا نص توضيحي.

<!--[ معلومات متغير التنبيه الموضحة ]-->
<div class='alert info outline'><b>معلومة!</b>
  تنبيه معلوماتي بسيط محدد الإطار - هذا نص توضيحي.
</div>

تحذير! تنبيه تحذيري بسيط محدد الإطار - هذا نص توضيحي.

<!--[ تنبيه تحذير متغير محدد ]-->
<div class='alert warning outline'><b>تحذير!</b>
  تنبيه تحذيري بسيط محدد الإطار - هذا نص توضيحي.
</div>
  

نجاح! تنبيه نجاح بسيط محدد الإطار - هذا نص توضيحي.

<!--[ تم توضيح نجاح متغير التنبيه ]-->
<div class='alert success outline'><b>نجاح!</b>
  تنبيه نجاح بسيط محدد الإطار - هذا نص توضيحي
</div>

خطأ! تنبيه خطأ بسيط محدد الإطار - هذا نص توضيحي.

<!--[ تم توضيح خطأ متغير التنبيه ]-->
<div class='alert error outline'><b>خطأ!</b>
  تنبيه خطأ بسيط محدد الإطار - هذا نص توضيحي.
</div>

---

جدول

يعد استخدام الجداول أكثر تعقيدًا بعض الشيء في HTML، ونوصي بأن تتعلم المزيد عن جداول HTML قبل استخدامها. فيما يلي مثال لجدول بيانات:

الاسم	المنصب	المكتب	العمر	تاريخ البدء	الراتب
تايجر نيكسون	مهندس نظم	إدنبرة	61	2011/04/25	$320,800
جاريت وينترز	محاسب	طوكيو	63	2011/07/25	$170,750
أشتون كوكس	مؤلف فني مبتدئ	سان فرانسيسكو	66	2009/01/12	$86,000

<!--[ جدول ]-->
<div class="table sticky bordered stripped hovered">
  <table>
    <thead>
      <tr>
        <th>الاسم</th>
        <th>المنصب</th>
        <th>المكتب</th>
        <th>العمر</th>
        <th>تاريخ البدء</th>
        <th>الراتب</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>تايجر نيكسون</td>
        <td>مهندس نظم</td>
        <td>إدنبرة</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>جاريت وينترز</td>
        <td>محاسب</td>
        <td>طوكيو</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>أشتون كوكس</td>
        <td>مؤلف فني مبتدئ</td>
        <td>سان فرانسيسكو</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
    </tbody>
  </table>
</div>

لأنماط الجدول، يمكنك إضافة اسم فئة (classname) إلى عنصر .table، بما في ذلك:

• cborder : حدود لحاوية الجدول.
• bordered / noborder (اختر واحدًا): حدود محتوى الجدول.
• clr / primary / warning / success / error : خلفية رأس الجدول.
• stripped : نمط صفوف الجدول المخططة.
• hovered : تأثير التمرير على صفوف الجدول.
• mh100 / mhvh / mh200 / mh300 : أقصى ارتفاع للجدول بالبكسل (استثناء: mh100 يحدد الارتفاع إلى 100%).
• sp5 / sp10 / sp20 : حشوة محتوى الجدول (padding).

تمت إضافة فئتي stripped و hovered في الإصدار 3.2.0.

---

الخطوات

تستخدم لتحديد خطوات لدليل.

1. الخطوة 1
2. الخطوة 2
3. الخطوة 3

<!--[ خطوات ]-->
<ol class="steps">
  <li>الخطوة 1</li>
  <li>الخطوة 2</li>
  <li>الخطوة 3</li>
</ol>

---

كتلة الشفرة (Code Block)

تستخدم لتحديد سطور من تعليمات برمجية (HTML, CSS, Javascript, إلخ) في المنشورات.

<pre data-comment='.html' data-source='src/index.html'><code>شفرة_متحولة_هنا</code></pre>

يمكن استخدام وسم code لتحديد شفرة مضمنة مثل هذه: شفرة_متحولة_هنا.

<code>شفرة_متحولة_هنا</code>

يمكن استخدام وسم kbd لتحديد إدخال لوحة المفاتيح مثل هذا: ⌘ + A العلامة ⌘ يمكن تغيرها بتسمية زر كنرول Ctrl .

<kbd>⌘ + A</kbd>

<kbd>Ctrl + A</kbd>

داخل وسم <code>، يمكن تمييز جزء عن طريق لفه بوسم <mark>.

// mark examples
console.log("مرحبا بالعالم!");
console.log("مرحبا بالعالم!");
console.log("مرحبا بالعالم!");
console.log("مرحبا بالعالم!");
console.log("مرحبا بالعالم!");
console.log("مرحبا بالعالم!");
console.log("مرحبا بالعالم!");
console.log("مرحبا بالعالم!");
console.log("مرحبا بالعالم!");
console.log("مرحبا بالعالم!");
console.log("مرحبا بالعالم!");
console.log("مرحبا بالعالم!");
console.log("مرحبا بالعالم!");
console.log("مرحبا بالعالم!");
console.log("مرحبا بالعالم!");

// mark codes
console.log("<mark>مرحبا بالعالم!</mark>");
console.log("<mark class='block'>مرحبا بالعالم!</mark>");
console.log("<mark class='gray'>مرحبا بالعالم!</mark>");
console.log("<mark class='red'>مرحبا بالعالم!</mark>");
console.log("<mark class='orange'>مرحبا بالعالم!</mark>");
console.log("<mark class='blue'>مرحبا بالعالم!</mark>");
console.log("<mark class='green block'>مرحبا بالعالم!</mark>");
console.log("<mark class='gold'>مرحبا بالعالم!</mark>");
console.log("<mark class='purple'>مرحبا بالعالم!</mark>");
console.log("<mark data-before='نص بعد التمييز'>مرحبا بالعالم!</mark>");
console.log("<mark class='block red' data-after='قبل التمييز'>مرحبا بالعالم!</mark>");
console.log("<mark class='green' data-before='$'>مرحبا بالعالم!</mark>");
console.log("<mark data-after='$'>مرحبا بالعالم!</mark>");
console.log("<mark class='block green' data-before='+'>مرحبا بالعالم!</mark>");
console.log("<mark class='block red' data-after='-'>مرحبا بالعالم!</mark>");

من الجيد معرفة ما يلي:

• تحتاج إلى استخدام شفرة مُهربة داخل عناصر <code>، مما يعني أنه يجب عليك استبدال جميع & بـ &، و< بـ <، و> بـ >.
• يتم تمييز جميع كتل الشفرة تلقائيًا باستخدام مكتبة @highlightjs/highlight.js، وهي إحدى المكتبات الشائعة لتمييز الشفرة بالإضافة إلى إضافة مكون إضافي مخصص. كما يتم إضافة زر النسخ وأرقام السطور تلقائيًا.
• يتم تحميل المكتبة فقط إذا كان هناك كتلة شفرة واحدة على الأقل في المنشور للتأكد من عدم قيامنا بطلبات إضافية.
• يتم أيضًا تمييز الشفرات المضمنة.
• تكتشف المكتبة تلقائيًا أفضل لغة مطابقة لرموزك البرمجية وتميزها، ولكن في بعض الأحيان قد لا تكتشف اللغة الصحيحة.
• إذا كانت المكتبة تكتشف اللغة بشكل غير صحيح أو كنت ترغب في تحديد لغة الشفرة بشكل صريح، يمكنك إضافة اسم فئة (classname) على النحو التالي: اسم اللغة مسبوقًا بـ language-، إلى عنصر <code>. على سبيل المثال، إذا كانت شفرتك مكتوبة بلغة JavaScript، يمكنك إضافة اسم فئة language-js أو language-javascript إلى عنصر <code>.

أداة تحويل الكود HTML إلى Escaping
تتيح للمستخدمين تحويل أكواد HTML إلى نصوص آمنة للعرض داخل صفحات الويب دون تنفيذها. يتم استبدال الرموز الحساسة مثل < و > برموز مكافئة تضمن ظهور الكود بشكل سليم وآمن.
تُعد هذه الأداة مثالية للمطورين وأصحاب المواقع الذين يرغبون في مشاركة شيفرات HTML داخل المقالات أو الشروحات دون التأثير على تنسيق الصفحة أو محتواها. انقر على زر HTML To Escaping اسفله لتحويل كود الخاص بك

HTML To Escaping

كتلة شفرة متعددة علامات التبويب

تستخدم لتجميع كتل شفرة متعددة معًا.

[HTML] شفرة_متحولة_هنا

[CSS] شفرة_متحولة_هنا

[JS] شفرة_متحولة_هنا

[JSON] شفرة_متحولة_هنا

<!--[ أداة تمييز كتلة التعليمات البرمجية متعددة علامات التبويب ]-->
<div class='pre tabs'>
  <!--[ الوظيفة النشطة ]-->
  <input id='preT1-1' type='radio' name='preTab1' checked/>
  <input id='preT1-2' type='radio' name='preTab1'/>
  <input id='preT1-3' type='radio' name='preTab1'/>
  <input id='preT1-4' type='radio' name='preTab1'/>
  
  <!--[ الرأس/العنوان ]-->
  <div>
    <!--[ تغيير سمة data-text='...' لاستبدال العنوان ]-->
    <label for='preT1-1' data-text='HTML'></label>
    <label for='preT1-2' data-text='CSS'></label>
    <label for='preT1-3' data-text='JS'></label>
    <label for='preT1-4' data-text='JSON'></label>
  </div>

  <!--[ محتوى ]-->
  <pre class='preC1-1' data-source='src/index.html' data-comment='HTML'><code>[HTML] شفرة_متحولة_هنا</code></pre>
  <pre class='preC1-2' data-source='src/style.css' data-comment='CSS'><code>[CSS] شفرة_متحولة_هنا</code></pre>
  <pre class='preC1-3' data-source='src/main.js' data-comment='JavaScript'><code>[JS] شفرة_متحولة_هنا</code></pre>
  <pre class='preC1-4' data-source='src/rules.json' data-comment='JSON'><code>[JSON] شفرة_متحولة_هنا</code></pre>
</div>

---

سبويلر (Spoiler)

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

سبويلر:

النص هنا

<!--[ Spoiler ]-->
<details class='sp'>
  <summary data-show='عرض الكل' data-hide='إخفاء الكل'>سبويلر:</summary>
  <div>
    <p>النص_هنا</p>
  </div>
</details>

---

أكورديون (Accordion)

تحدد محتوى إضافيًا يمكن للمستخدمين فتحه وإغلاقه حسب الطلب في مجموعات، وعادة ما يستخدم لقائمة من الأسئلة أو الأسئلة الشائعة (الأسئلة المتكررة).

العنوان_هنا

النص_هنا

<!--[ أكورديون ]-->
<details class="ac">
  <summary>العنوان_هنا</summary>
  <div>
    <p>النص_هنا</p>
  </div>
</details>

العنوان_هنا

النص_هنا

<!--[ أكورديون (بديل) ]-->
<details class="ac alt">
  <summary>العنوان_هنا</summary>
  <div>
    <p>النص_هنا</p>
  </div>
</details>

العنوان_هنا

النص_هنا

العنوان_هنا

النص_هنا

العنوان_هنا

النص_هنا

العنوان_هنا

النص_هنا

<!--[ الأكورديون (مجمع) ]-->
<div class="showH">
  <details class="ac">
    <summary>العنوان_هنا</summary>
    <div>
      <p>النص_هنا</p>
    </div>
  </details>
  <details class="ac">
    <summary>العنوان_هنا</summary>
      <div>
      <p>النص_هنا</p>
    </div>
  </details>
  <details class="ac alt">
    <summary>العنوان_هنا</summary>
    <div>
      <p>النص_هنا</p>
    </div>
  </details>
  <details class="ac alt">
    <summary>العنوان_هنا</summary>
    <div>
      <p>النص_هنا</p>
    </div>
  </details>
</div>

الأسئلة الشائعة في Microdata

تحتوي صفحة الأسئلة الشائعة (FAQ) على قائمة بالأسئلة والأجوبة المتعلقة بموضوع معين. قد تكون صفحات الأسئلة الشائعة المحددة بشكل صحيح مؤهلة للحصول على نتائج غنية في البحث وإجراء على مساعد Google، مما يمكن أن يساعد موقعك في الوصول إلى المستخدمين المناسبين.

<!--[ أكورديون (FAQPage) ]-->
<div class='showH' itemscope itemtype='https://schema.org/FAQPage'>
  <details class='ac' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>العنوان_هنا</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>النص_هنا</p>
    </div>
  </details>
  <details class='ac' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>العنوان_هنا</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>النص_هنا</p>
    </div>
  </details>
  <details class='ac alt' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>العنوان_هنا</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>النص_هنا</p>
    </div>
  </details>
  <details class='ac alt' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>العنوان_هنا</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>النص_هنا</p>
    </div>
  </details>
</div>

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

---

جدول المحتويات اليدوي

يعد استخدام جدول المحتويات اليدوي معقدًا للغاية، حيث يجب عليك إضافة سمة id مختلفة في كل وسم عنوان وكتابتها في قائمة المحتوى.

جدول المحتويات التلقائي

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

جدول المحتويات

<!--[ جدول المحتويات التلقائي ]-->
<details class='sp toc' open>
  <summary data-show='عرض الكل' data-hide='إخفاء الكل'>جدول المحتويات</summary>  
  <div class='aToc'></div>
</details>

---

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

هناك طريقتان لتحديد هذا المكون.

المشاركات ذات الصلة اليدوية

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

قد ترغب في قراءة هذا المنشور:

• عنوان_المنشور
• عنوان_المنشور
• عنوان_المنشور

<div class='pRelate'>
  <!--[ عنوان ذو صلة ]-->
  <b>قد ترغب في قراءة هذا المنشور:</b>
  <ul>
    <li><a href='رابط_المقال'>عنوان_المنشور</a></li>
    <li><a href='رابط_المقال'>عنوان_المنشور</a></li>
    <li><a href='رابط_المقال'>عنوان_المنشور</a></li>
  </ul>
</div>

المشاركات ذات الصلة التلقائية

يتم إنشاء المشاركات ذات الصلة التلقائية بواسطة الخوارزميات باستخدام التصنيفات، مما يوفر الوقت ولكن بدقة أقل.

المشاركات ذات الصلة

<!--[ المشاركات ذات الصلة التلقائية ]-->
<details class='sp arp' open>
  <summary data-show='عرض الكل' data-hide='إخفاء الكل'>المشاركات ذات الصلة</summary>  
  <div class='aRel'></div>
</details>

من الجيد معرفة ما يلي:

• تُظهر هذه الميزة قائمة بالمنشورات التي تحمل تصنيفًا معينًا.
• لتحديد تصنيف، أضف السمة data-label='My Label' إلى العنصر .aRel.
• إذا لم يتم تحديد السمة data-label أو لم يكن هناك منشور بالتصنيف المحدد في data-label، فسيعود تلقائيًا إلى تصنيف عشوائي من المنشور الحالي إذا تم استخدامه في منشور، وإلا فسيعود إلى تصنيف عشوائي من المدونة إذا تم استخدامه في صفحة.
• سيقوم بتصفية المنشور الذي تتم مشاهدته حاليًا.
• لتعيين الحد الأقصى لعدد المنشورات، أضف السمة data-max-posts='6'، حيث 6 هو العدد الأقصى للمشاركات.

---

يوتيوب بالتحميل الكسول (Lazy YouTube)

يقوم بتحميل الـ iframe بمجرد النقر على زر التشغيل، وإلا يعرض الصورة المصغرة كعنصر نائب يتم تحميله كسولًا باستخدام مكتبة @aFarkas/lazysizes.

<!--[ يوتيوب كسول ]-->
<div class='lazyYt' data-embed='معرف_الفيديو'></div>

تأخير تحميل يوتيوب (Defer YouTube)

يؤخر تحميل الـ iframe باستخدام مكتبة @aFarkas/lazysizes.

<!--[ تأجيل يوتيوب ]-->
<div class='videoYt'>
  <iframe class='lazyload' data-src='https://www.youtube.com/embed/معرف_الفيديو' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' referrerpolicy='strict-origin-when-cross-origin' allowfullscreen></iframe>
</div>

---

أساسيات

لا يوفر هذا القسم أي مكونات، ولكنه يحتوي على مقتطفات رموز HTML عامة يمكن استخدامها لأغراض مختلفة.

مقتطف المنشور الصريح

يعرض مقتطف المنشور بضعة أسطر من المحتوى النصي للمنشور. يحدد النصوص تلقائيًا من بداية المنشور. إذا كنت ترغب في تعيين مقتطف منشور مخصص، يمكنك إضافة مقتطف الشفرة التالي في بداية المنشور:

<!--[ يحدد مقتطف المنشور صراحةً ]-->
<div hidden aria-hidden='true'>مقتطف_المنشور</div>

<!--more-->

صورة مصغرة صريحة للمنشور

يختار بلوجر تلقائيًا الصورة الأولى للمنشور كصورة مصغرة له. إذا كنت ترغب في تعيين صورة مصغرة مخصصة للمنشور والتي لا ينبغي أن تظهر في المنشور، يمكنك إضافة مقتطف الشفرة التالي في بداية المنشور:

<!--[ تعيين الصورة المصغرة للمنشور بشكل صريح ]-->
<!--[
  <div class='separator'><img src='مصدر_الصورة'/></div>
]-->

<!--more-->

يمكنك تعيين مقتطف منشور مخصص وصورة مصغرة للمنشور عن طريق دمج مقتطعي الشفرة أعلاه كما هو موضح أدناه:

<!--[ يحدد مقتطف المنشور صراحةً ]-->
<div hidden aria-hidden='true'>مقتطف_المنشور</div>

<!--[ تعيين الصورة المصغرة للمنشور بشكل صريح ]-->
<!--[
  <div class='separator'><img src='مصدر_الصورة'/></div>
]-->

<!--more-->

عنوان فرعي للرأس

يضيف عنوانًا فرعيًا بجانب عنوان الرأس في منشور أو صفحة معينة.

<style>
  /* عنوان فرعي مخصص للرأس */
  .headH::after{content:'عنوان_فرعي'}
</style>

خاتمة

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

الآن، انطلق وأطلق العنان لإبداعك في بناء محتوى مذهل!

المصدر الاصلي بالانجليزية:
https://plus-ui.blogspot.com/2024/10/components.html