الصفحة الرئيسية>المتعلقة بالبرمجة>مكونات الطرف الثالث
تنزيل

heading-anchors

مكون ويب لإضافة روابط مرساة إلى عناوين مع IDS.

العرض التوضيحي | تصميم التصميم | مزيد من القراءة

أمثلة 

 < script type =" module " src =" heading-anchors.js " > </ script >

< heading-anchors >
  < h2 id =" heading-level-2 " > Heading level 2 </ h2 >
  < p > Lorem ipsum dolor sit amet consectetur adipisicing elit. </ p >

  < h3 id =" heading-level-3 " > Heading level 3 </ h3 >
  < p >
    Excepturi eligendi exercitationem, ratione, in delectus vitae veritatis
    dolorem porro cupiditate quam eaque voluptates.
  </ p >
</ heading-anchors >

سمات

يتيح لك مكون الويب هذا:

  • أضف روابط مرساة إلى العناوين التي لها سمة معرف وقيمة
  • تخصيص العناصر التي سيتم إلحاقها برابط مرساة باستخدام سمة selector
  • قم بتخصيص مكان ارتباط المرساة باستخدام سمة position

تثبيت

لديك بعض الخيارات (اختر واحدة من هذه):

  1. التثبيت عبر NPM: npm install @daviddarnes/heading-anchors (أيضًا Avaialbe على JSR)
  2. قم بتنزيل المصدر يدويًا من Github إلى مشروعك.
  3. تخطي هذه الخطوة واستخدم البرنامج النصي مباشرة عبر CDN الطرف الثالث (لا ينصح به لاستخدام الإنتاج)

الاستخدام

تأكد من تضمين <script> في مشروعك (اختر واحدة من هذه): 

 <!-- Host yourself -->
< script type =" module " src =" heading-anchors.js " > </ script > 
 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://www.unpkg.com/@daviddarnes/[email protected]/heading-anchors.js "
> </ script > 
 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://esm.sh/@daviddarnes/[email protected] "
> </ script >

باستخدام selector position

بشكل افتراضي ، سيقوم heading-anchors بالتقاط جميع عناصر h2[id] و h3[id] و h4[id] داخله لإلحاق رابط مرساة بـ. ومع ذلك ، مع سمة selector ، يمكنك تمريرها في سلسلة محدد مختلفة لتحديد: 

 < heading-anchors selector =" h2[id] " >
  <!-- ... -->
</ heading-anchors >

ملاحظة: يوصى باستخدام المحددات التي تستخدم محدد السمات [id] لتحسين موثوقية

بشكل heading-anchors سيتم إلحاق روابط المرساة مباشرة بعد العنصر ، باستخدام API insertAdjacentHTML . ومع ذلك ، يمكنك ضبط هذا باستخدام سمة position : 

 < heading-anchors position =" beforeend " >
  <!-- ... -->
</ heading-anchors >

ائتمان

بفضل الأشخاص التاليين:

  • Zach Leatherman لإلهام قالب ريبو مكون الويب هذا
  • Curtis Wilcox للحصول على ردود الفعل إمكانية الوصول
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل