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
etiket
Yerleştirebilirsin
HTML dosyanızın içindeki içindekiler tablosuna etiketler, böylece yuvalar daha sonra olabilir ilgili başlıklar ve alt başlıklar. Başlıklar değiştirildiğinde yuvalar otomatik olarak güncellenir.
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
etiketler, tüm başlıklar ve alt başlıklar için belgede bulundu.
isim
her birinin niteliği
aynı değere sahip olacak 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
etiketler.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