หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ส่วนประกอบของบุคคลที่สาม
ดาวน์โหลด

heading-anchors

ส่วนประกอบเว็บเพื่อเพิ่มลิงก์แองเคอร์ไปยังส่วนหัวด้วย ID

การสาธิต การสาธิตสไตล์ การอ่านเพิ่มเติม

ตัวอย่าง 

 < 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 >

คุณสมบัติ

องค์ประกอบเว็บนี้ช่วยให้คุณ:

  • เพิ่มลิงค์ Anchor ไปยังส่วนหัวที่มีแอตทริบิวต์และค่า ID
  • ปรับแต่งองค์ประกอบใดที่จะผนวกเข้ากับลิงค์จุดยึดโดยใช้แอตทริบิวต์ 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 จะผนวกลิงค์ยึดทันทีหลังจากองค์ประกอบโดยใช้ insertAdjacentHTML API อย่างไรก็ตามคุณสามารถปรับสิ่งนี้โดยใช้แอตทริบิวต์ position : 

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

เครดิต

ด้วยขอบคุณผู้คนต่อไปนี้:

  • Zach Leatherman สำหรับสร้างแรงบันดาลใจให้กับเทมเพลต repo ส่วนประกอบของเว็บนี้
  • Curtis Wilcox สำหรับข้อเสนอแนะการเข้าถึง
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด