วิธีสร้างสารบัญอัตโนมัติด้วยสล็อต HTML
สารบัญ ยกตัวอย่างเช่นสามารถปรับปรุงประสบการณ์การใช้งานของผู้ใช้เว็บไซต์จำนวนมาก เว็บไซต์เอกสาร หรือ สารานุกรมออนไลน์ เช่นเดียวกับ Wikipedia สารบัญที่ออกแบบมาอย่างดี ให้ภาพรวมของหน้า และช่วยให้ผู้ใช้นำทางอย่างรวดเร็วไปยังส่วนที่พวกเขาสนใจ.
ตามเนื้อผ้าคุณสามารถสร้างสารบัญใน HTML หรือ JavaScript แต่ช่อง HTML มาตรฐานเมื่อเร็ว ๆ นี้ให้ ทางกลางระหว่างสอง. ช่อง HTML เป็นมาตรฐานเว็บที่ช่วยให้คุณ เพิ่มตัวแทนสำหรับหน้าเว็บ และหลังจากนั้น เติมด้วยเนื้อหาแบบไดนามิก.
ควรใช้เมื่อใด
แท็ก
คุณสามารถวาง
แท็กลงในสารบัญในไฟล์ HTML ของคุณดังนั้นช่องในภายหลังสามารถเป็นได้ เต็มไปด้วยหัวเรื่องและหัวเรื่องย่อยที่เกี่ยวข้อง. เมื่อมีการเปลี่ยนแปลงส่วนหัว ช่องได้รับการอัปเดตอัตโนมัติ.
ด้วยเทคนิคนี้คุณต้องสร้างซอร์สโค้ด HTML ของสารบัญด้วยตนเอง JavaScript สร้างเนื้อหาข้อความของสารบัญโดยอัตโนมัติเท่านั้น, ขึ้นอยู่กับส่วนหัวหรือหัวเรื่องย่อยในหน้า.
หากคุณไม่ต้องการสารบัญที่จะนำเสนอใน HTML ที่คุณต้องการ สร้างทั้งเลย์เอาต์และเนื้อหาด้วย JavaScript.
1. สร้าง HTML
ซอร์สโค้ด HTML สำหรับ TOC (สารบัญ) จะเป็น ภายใน แท็ก. รหัสข้างใน
ไม่แสดงผลจนกว่าจะมีการเพิ่มลงในเอกสารโดย JavaScript สารบัญของเราจะมี ตัวยึด, จัดขึ้นใน
แท็ก, สำหรับส่วนหัวและหัวเรื่องย่อยทั้งหมด พบในเอกสาร.
ชื่อ
คุณลักษณะของแต่ละ
จะมีค่าเหมือนกันกับ สล็อต
คุณลักษณะในส่วนหัวและหัวเรื่องย่อยที่สอดคล้องกันในเอกสาร.
ด้านล่างคุณสามารถดู ตัวอย่าง HTML Velociraptor (หมายถึง "swift seizer" ในภาษาละติน) เป็น ... Velociraptor เป็น dromaeosaurid ขนาดกลางที่มีผู้ใหญ่ ... ฟอสซิลของ dromaeosaurids ดั่งดั้งเดิมมากกว่า ... ในระหว่างการสำรวจพิพิธภัณฑ์ประวัติศาสตร์ธรรมชาติอเมริกัน ... Velociraptor เป็นสมาชิกของกลุ่ม Eudromaeosauria กลุ่มย่อยที่ได้รับจาก ... ตัวอย่าง "Fighting Dinosaurs" ที่พบในปี 1971 เก็บรักษา ... ในปี 2010, Hone และเพื่อนร่วมงานได้ตีพิมพ์บทความเกี่ยวกับ ... Velociraptor ได้รับความอบอุ่นถึงระดับหนึ่งเนื่องจากจำเป็นต้องใช้ ... กะโหลกศีรษะ Velciratoptor mongoliensis หนึ่งตัวหมีสองตัวขนานกัน ... อย่างที่คุณเห็นแต่ละหัวข้อคือ รับที่ไม่ซ้ำกัน และนี่คือ รหัส HTML ของ TOC, ภายใน ในตัวอย่างโค้ดสองอันด้านบนสังเกตเห็น การจับคู่ ก่อนที่จะดูรหัส JavaScript ที่จะเพิ่ม TOC จาก รับรองว่า ตอนนี้เราเพิ่มสคริปต์ที่ แทรก TOC ด้านบน ข้อมูลโค้ดด้านบน สร้างสำเนาของ จากนั้นโคลน ถ้าเราจะรีเซ็ตตัวนับ CSS ที่ นี่คือภาพหน้าจอของผลลัพธ์: ถ้าคุณต้องการ เชื่อมโยงชื่อ TOC กับหัวเรื่องและหัวเรื่องย่อย โดยการเพิ่ม Velociraptor (หมายถึง "swift seizer" ในภาษาละติน) เป็น ... Velociraptor เป็น dromaeosaurid ขนาดกลางที่มีผู้ใหญ่ ... ฟอสซิลของ dromaeosaurids ดั่งดั้งเดิมมากกว่า ... ดังที่คุณเห็นด้านบน และ ชื่อเรื่องภายในสารบัญจะถูกยึด: ในบรรทัดพิเศษข้างต้นทั้งหมด ดูภาพหน้าจอของ สารบัญที่เชื่อมโยง ด้านล่าง: คุณสามารถตรวจสอบดาวน์โหลดหรือแยกรหัสที่ใช้ในโพสต์นี้จาก Github Repo ของเรา. ด้วยหัวเรื่องและหัวเรื่องย่อย.
ลักษณะ
ขน
ประวัติศาสตร์การค้นพบ
การจัดหมวดหมู่
paleobiology
พฤติกรรมการไล่
การเผาผลาญอาหาร
พยาธิวิทยา
สล็อต
ราคา. แท็ก.
สล็อต
และ ชื่อ
แอตทริบิวต์ ภายในส่วนหัวและ
แท็ก.2. จำนวนส่วนหัว
ไปที่เอกสารขอ เพิ่มหมายเลขซีเรียลสำหรับส่วนหัวโดยใช้ตัวนับ CSS.
บทความ counter-reset: header; บทความ h2 :: ก่อน counter-increment: header; เนื้อหา: '0'counter (หัวเรื่อง)': ';
เคาน์เตอร์รีเซ็ต
กฎเป็นขององค์ประกอบที่ ผู้ปกครองทันทีของชื่อทั้งหมดที่ถือครอง สล็อต
คุณลักษณะ ซึ่งก็คือ องค์ประกอบในรหัสของเรา).
3. ใส่สารบัญลงในเอกสาร
แท็ก, ข้างใน
ภาชนะ.
templateContent = document.querySelector ('template'). เนื้อหา; บทความ = document.querySelector ('บทความ'). cloneNode (จริง); article.attachShadow (โหมด: 'ปิด') appendChild (templateContent.cloneNode (จริง)); document.querySelector ( '# TOC) appendChild (บทความ).
และ แนบ Shadow Tree Tree เข้ากับมัน. เรายัง เพิ่มสำเนาของ
เนื้อหาของ กับต้นไม้เงา DOM นี้.
ถูกแทรกลงใน
องค์ประกอบคือ ตอนนี้มีอยู่ใน TOC เช่นกัน, แต่จะเห็นเฉพาะหัวเรื่องและหัวเรื่องย่อยที่พบตัวยึดตำแหน่งใน TOC.
ร่างกาย
หรือ HTML
องค์ประกอบแทน บทความ
, ตัวนับจะนับรายชื่อส่วนหัวใน TOC ด้วย นั่นเป็นเหตุผลที่คุณควร รีเซ็ตเคาน์เตอร์ที่ผู้ปกครองทันทีของส่วนหัว.4. เพิ่มไฮเปอร์ลิงก์
รหัส
ในส่วนหัวและยึดข้อความ TOC ที่เกี่ยวข้องคุณจะต้อง ลบซ้ำ รหัส
ค่าจากโคลน บทความ
.
ลักษณะ
ขน
รหัส
คุณลักษณะคือ เพิ่มในทุกหัวเรื่องและหัวเรื่องย่อยในบทความ.
รหัส
คุณลักษณะคือ ลบออกจากบทความโคลน ก่อน แนบต้นไม้ Shadow DOM เข้ากับมัน. templateContent = document.querySelector ('template'). เนื้อหา; บทความ = document.querySelector ('บทความ'). cloneNode (จริง); article.querySelectorAll ('* [id]'). forEach ((ele) => ele.removeAttribute ('id')) article.attachShadow (โหมด: 'ปิด') appendChild (templateContent.cloneNode (true) )); document.querySelector ( '# TOC) appendChild (บทความ).
การสาธิต Github