Footnote Genius

1 year عدد 11 من الأشهر ago
  • Javascript

FootnoteGenius هو الحل الأمثل لتحسين صفحات ويب HTML الخاصة بك بسهولة باستخدام الحواشي السفلية. إنه يبسط العملية، مما يسمح لك بالتركيز على المحتوى الخاص بك.

الخصائص الرئيسية:

  • التكامل السلس: قم بتضمين الحواشي السفلية مباشرة في كود HTML الخاص بك بسهولة، مما يضمن مظهرًا احترافيًا لمحتوى الويب الخاص بك.
  • تصميم قابل للتخصيص: يضيف FootnoteGenius فئات (classes) إلى جميع العناصر، مما يبسط تعديلات التصميم لصفحتك.
  • سهل الاستخدام: يجعل FootnoteGenius تخصيص مظهر الحواشي السفلية أمرًا سهلاً.
  • التوافق مع جميع المتصفحات: كن مطمئنًا إلى أن الحواشي السفلية الخاصة بك سيتم عرضها بشكل صحيح عبر متصفحات الويب المختلفة، مما يوفر تجربة قراءة سلسة لجميع المستخدمين.
  • سير العمل الفعال: يمكنك توفير الوقت والتركيز على إنشاء المحتوى الخاص بك، حيث يقوم FootnoteGenius بأتمتة عملية ترقيم الحواشي السفلية والمراجع.

كيفية الاستخدام:

  • أضف  footnote-genius.js  إلى مستند HTML الخاص بك.
  • أينما تريد مرجعًا للحاشية السفلية، قم بإدراج عنصر <sup> مع  html-footnote class . ضع محتويات الحاشية بداخلها باستثناء رقم القائمة.
  • قم بإنشاء div (أو أي عنصر آخر) حيث تريد ظهور الحواشي السفلية وأضف class  html-footnotes-container إليها.
  • استدعي FootnoteGenius.init() function عندما يكون المستند جاهزًا.

تخصيص الحواشي السفلية :

  • قم بتخصيص الحواشي السفلية بسهولة باستخدام data-fn- attributes الموجودة داخل الحاوية. تسمح لك هذه السمة بتجميع الحواشي السفلية وضبط عرضها المرئي وإنشاء روابط بين المراجع والحواشي السفلية بسهولة.
  • تجميع الحواشي السفلية: لتجميع الحواشي السفلية، حدد اسمًا للمجموعة باستخدام  data-fn-group='name'attributes. تأكد من استخدام هذه السمة على كل من العنصر <sup> والحاوية.
  • نمط الترقيم: نمط الترقيم الافتراضي هو 1 2 ...، ولكن يمكنك تغييره باستخدام data-fn-index-style attribute الموجودة في الحاوية. يقبل القيم التالية:
        data-fn-index-style = "i" للأرقام الرومانية.
        data-fn-index-style = "I" للأرقام الرومانية الكبيرة.
        data-fn-index-style = "ab" للقائمة ذات الحروف.
        data-fn-index-style = "AB" للقائمة ذات الأحرف الكبيرة.
        data-fn-index-style = "*" للحصول على قائمة مميزة بنجمة.
  • الأقواس: بشكل افتراضي، تتم إضافة الأقواس () للمرجع والحاشية السفلية. يمكنك تعديل الأقواس باستخدام data-fn-brackets="[]" attribute الموجودة على الحاوية أو إزالتها باستخدام data-fn-brackets="false" attribute .
  • إنشاء الروابط: لإضافة رابط من المرجع إلى الحاشية السفلية، ما عليك سوى تضمين data-fn-create-links attribute في الحاوية.
  • روابط الإرجاع: لإضافة رابط إرجاع من الحاشية السفلية إلى المرجع، قم بتضمين  data-fn-create-return-links attribute في الحاوية.

تجد هنا مثالا عن طريقة الإستخدام.