HTML Yuvalarında İçindekiler Tablosunu Otomatik Olarak Oluşturma
İçindekiler Örneğin, birçok web sitesinin kullanıcı deneyimini büyük ölçüde artırabilir. dokümantasyon siteleri veya çevrimiçi ansiklopediler Wikipedia gibi. İyi tasarlanmış bir içindekiler tablosu sayfaya genel bir bakış verir ve kullanıcıların ilgilendikleri bölüme hızla gitmelerine yardımcı olur.
Geleneksel olarak, HTML veya JavaScript ile içindekiler tablosu oluşturabilirsiniz, ancak son zamanlarda standart hale getirilmiş HTML ikisi arasındaki orta yol. HTML Yuvası size izin veren bir web standardıdır. web sayfasına yer tutucuları ekleyin ve sonra içeriği dinamik olarak doldur.
Ne zaman kullanılır
Yerleştirebilirsin
Bu teknik ile, içindekiler tablosunun HTML kaynak kodunu manuel olarak oluşturmanız gerekir. JavaScript sadece içindekiler tablosunun metin içeriğini otomatik olarak oluşturur, sayfadaki başlıklara veya alt başlıklara göre.
HTML’de bulunacak bir içindekiler tablosu istemiyorsanız yapmanız gereken JavaScript ile hem düzeni hem de içeriği oluşturun.
1. HTML'yi oluşturun
TOC için HTML kaynak kodu (içindekiler tablosu) içinde etiket. İçindeki kod belgeye JavaScript tarafından ekleninceye kadar işlenmez. TOC’miz tutucuları, düzenlenen
isim her birinin niteliği yarık belgedeki karşılık gelen başlıklarda ve alt başlıklarda yer alan özellik.
Aşağıda, bir görebilirsiniz örnek HTML Velociraptor (Latince "hızlı yakalayıcı" anlamına gelir) bir ... Velociraptor yetişkinleri ile orta büyüklükte bir dromaeosaurid oldu… Dromaeosauridlerin fosilleri… Amerikan Tabiat Tarihi Müzesi gezisi sırasında ... Velociraptor, türevi bir alt grup olan Eudromaeosauria grubunun bir üyesidir. 1971 yılında bulunan "Dövüş Dinozorları" örneği… 2010 yılında, Hone ve meslektaşları bir bildiri yayınladı… Velociraptor bir dereceye kadar ılık kanlandı ... Bir Velociratoptor mongoliensis kafatası iki paralel taşıyor… Gördüğünüz gibi her başlık benzersiz verilen Ve işte TOC’nin HTML kodu, içinde Yukarıdaki iki kod parçasında, eşleştirme İçindekiler’den TOC’yi katacak olan JavaScript koduna bakmadan önce Emin olun Şimdi, o betiği ekleyelim. TOC’yi yukarıdaki Yukarıdaki kod pasajı bir kopyasını oluşturur Sonra klonlanmış CSS sayacını sıfırlarsak, Çıktının ekran görüntüsü: Eğer istersen TOC başlıklarını ilgili başlıklar ve alt başlıklar ile ilişkilendirin. toplayarak Velociraptor (Latince "hızlı yakalayıcı" anlamına gelir) bir ... Velociraptor yetişkinleri ile orta büyüklükte bir dromaeosaurid oldu… Dromaeosauridlerin fosilleri… Yukarıda gördüğünüz gibi Ve içindekiler tablosundaki başlıklar sabitlenir: Yukarıdaki ekstra satırda, tümü Ekran görüntüsüne bakın. bağlantılı içindekiler tablosu altında: Bu gönderide kullanılan kodu Github Repo'muzdan kontrol edebilir, indirebilir veya çatallayabilirsiniz.. bazı başlıklar ve alt başlıklar.
Açıklama
Tüyler
Keşif tarihi
sınıflandırma
Paleobiyoloji
Atma davranışı
Metabolizma
Patoloji
yarık değer. etiket.
yarık ve isim Öznitellikler başlıkların içinde ve 2. Başlıkları numaralandırın
belgeye, hadi CSS sayaçlarını kullanarak başlıklar için seri numaraları ekleyin. article counter-reset: başlık; makale h2 :: önce karşı-artış: başlık; içerik: '0'counter (başlık)': ';
counter-reset kural, öğeye aittir. taşıyan tüm başlıkların hemen ebeveyn yarık nitelik (hangisi kodumuzdaki eleman).3. TOC’yi belgeye yerleştirin
etiket, içinde konteyner. templateContent = document.querySelector ('şablon') içerik. article = document.querySelector ('article') .cloneNode (true); article.attachShadow (mode: 'kapalı'). appendChild (templateContent.cloneNode (true)); document.querySelector ( '# toc') appendChild (makale).; ve Gölge DOM Ağacı ekler. Ayrıca biz bir kopyasını ekle 'nin içeriği bu Gölge DOM ağacına. içine eklenir eleman şimdi de TOK’da, ancak yalnızca içindekiler içinde bir yer tutucu bulan başlıklar ve alt başlıklar görünür durumdadır.. vücut veya html yerine öğe makale, Sayaç, TOK içindeki başlıkların listesini de sayardı. Bu yüzden yapmalısın sayaçların hemen üst bölümündeki sayaçları sıfırla.
4. Köprüler ekleyin
İD başlıklara ve karşılık gelen TOC metnini tutturmanız gerekir. tekrarlayanı kaldırmak İD klonlanan değerleri makale.
Açıklama
Tüyler
İD özellik makaledeki her başlığa ve alt başlığa eklendi.
İD öznitelikler klonlanmış makaleden kaldırıldı önce Shadow DOM ağacını ona ekleme. templateContent = document.querySelector ('şablon') içerik. article = document.querySelector ('article') .cloneNode (true); article.querySelectorAll ('* [id]'). forEach ((ele) => ele.removeAttribute ('id')) article.attachShadow (mode: 'kapalı'). appendChild (templateContent.cloneNode (true )); document.querySelector ( '# toc') appendChild (makale).; 
Github demosu
