Javascript'i uzun makaleler için Dinamik bir tablo oluşturmak için kullanmak

Neden Uzun Süreli İçerikler İçin Dinamik Bir Tablo

Uzun makaleler, öğreticiler ve belge sayfaları, okuyucunun görüntülediği bölümdeki bağlantıları otomatik olarak genişletebilir ve içeriğinizi, konuların arasına hızlı bir şekilde atlamak isteyen kullanıcılara daha erişilebilir hale getirir.[Döneticiler, 1 ).Bu, yeni bölümler eklendiğinde, bağlantıların görüntülendiğini ve gerçek zamanlı olarak yönlendirmelerini sağlar.

Örneğin, 30 bölüm ile teknik bir rehber, okuyucuların ilerlemelerini izleyen bir yanbar menüünü gördüğünde çok daha kolay hale gelir. Aynı ilke tek sayfa uygulamaları, API belgeleri veya hatta blog mesajlarına birden fazla alt liste ile uygulanır.Sesle dinamik bir TOC uygulamayla, ilgili parçalar aramak için okuyucuları kontrol edin.

Temel Kavramlar Dinamik Bir İçerik tablosunun Arkasında

Dinamik bir TOC inşa etmek için, üç temel parça anlamanız gerekir:

Bu parçalar, yerel olarak sayfaya hissettiren bir TOC üretmek için birlikte çalışır, minimum sunucunun mantığı gerektirir ve modern tarayıcılar boyunca çalışır.

Adım 1: HTML Yapınızı Hazırlayın

Herhangi bir JavaScript koşmadan önce, HTML'nizde iki şeye ihtiyacınız var:

Tekerli kimlikleri Başlamak için

TOC'de (tipik olarak) görünmesi gereken her başlık, doğru konuma kaydırmaktır. İşte bir örnek:)

<h2 id="introduction">Introduction</h2>
<p>...</p>
<h2 id="setup">Setting Up the Environment</h2>
<p>...</p>
<h3 id="installing-dependencies">Installing Dependencies</h3>
<p>...</p>
<h2 id="implementation">Implementation</h2>
<p>...</p>

HTML'yi doğrudan değiştiremezseniz, JavaScript (e.g., 03FLT:8) kullanarak kimlikleri oluşturabilirsiniz, ancak bunları manuel olarak veya statik bir site jeneratörü ile eklemek daha temiz.

TOC için bir konteyner oluşturun

Boş bir elementin (tip olarak aritFLT:9) veya aurFLT:10) yerine TOC'nin görünmesini istediğiniz yerde yerleştirin.

<nav id="table-of-contents" aria-label="Table of Contents"></nav>

[[TheFLT:12), ekran okuyucularına navigasyon bölgesi için tanımlayıcı bir isim vererek erişilebilirliği artırır. Daha sonra bu konteyneri, üretilen liste ile popüle edeceksiniz.

2. Adım: TOC'yi JavaScript ile Gening the TOC with JavaScript

Şimdi, alt başlıkları içeren JavaScript yazıyoruz ve liste inşa ediyoruz. Aşağıdaki parçalar, alt başlıkları içeren daha gelişmiş bir TOC için, daha sonra kapağımız olan nested listelere ihtiyacınız olacak.

Temel Flat TOC Örnek

const tocContainer = document.getElementById('table-of-contents');
const headings = document.querySelectorAll('h2');

// Bail early if there's no container or no headings
if (!tocContainer || headings.length === 0) return;

const ul = document.createElement('ul');
ul.setAttribute('role', 'list'); // accessibility enhancement

headings.forEach((heading, index) => {
 // Ensure the heading has an id; if not, generate one
 if (!heading.id) {
 heading.id = 'section-' + index;
 }
 const li = document.createElement('li');
 const a = document.createElement('a');
 a.textContent = heading.textContent;
 a.href = '#' + heading.id;
 a.setAttribute('data-section', heading.id); // useful for active detection
 li.appendChild(a);
 ul.appendChild(li);
});

tocContainer.appendChild(ul);

[FONT=0)Gön noktaları:[Dönem:[Dönem: 1)

Nested Headings (H2, H3, H4)

Daha kullanışlı bir TOC, belgenin hiyerarşisini yansıtıyor. Nested listeler oluşturmak için, mevcut GÜNÜŞÜN'yi takip etmek ve çocukları için [[Dönemli bir yaklaşım: İşte bir yığın kullanarak basitleştirilmiş bir yaklaşım:

const tocContainer = document.getElementById('table-of-contents');
const headings = document.querySelectorAll('h2, h3, h4');
if (!tocContainer || headings.length === 0) return;

const root = document.createElement('ul');
const stack = [{ element: root, level: 2 }]; // level refers to heading level

headings.forEach((heading) => {
 const level = parseInt(heading.tagName.substring(1), 10); // 'H2' -> 2
 if (!heading.id) heading.id = 'section-' + Math.random().toString(36).substr(2, 9);

 const li = document.createElement('li');
 const a = document.createElement('a');
 a.textContent = heading.textContent;
 a.href = '#' + heading.id;
 li.appendChild(a);

 // Pop stack until we reach the parent level
 while (stack.length > 0 && stack[stack.length - 1].level >= level) {
 stack.pop();
 }
 const parent = stack[stack.length - 1].element;
 parent.appendChild(li);

 // If next heading is lower, we need a nested list
 const nextLevel = headings.item(Array.from(headings).indexOf(heading) + 1);
 if (nextLevel && parseInt(nextLevel.tagName.substring(1), 10) > level) {
 const nestedUl = document.createElement('ul');
 li.appendChild(nestedUl);
 stack.push({ element: nestedUl, level: level });
 }
});

tocContainer.appendChild(root);

Bu algoritma, her alt üst düzeyin ebeveyni altında ortaya çıktığını garanti eder. Üretim için, derin çöplerden kaçınmak ve kenar vakalarını işlemek için mantığı rafine edebilirsiniz (örneğin, eksik başlık seviyeleri).

3. Adım: Sayfadaki Aktif Bölüm Yüksek

Son cümle, okurların şu anda okudukları makalenin hangi bölümünü bilmelerini sağlar. Fikir tüm başlıklar aracılığıyla döngülemek, görüşe en yakın olanı bulmak (bazı dengeleme ile) ve ilgili TOC bağlantısını uygulamaktır.

Verimli Sayfa

const tocLinks = document.querySelectorAll('#table-of-contents a');
const sections = Array.from(headings).map(h => ({
 id: h.id,
 top: h.offsetTop
}));

function updateActiveLink() {
 const scrollY = window.pageYOffset || document.documentElement.scrollTop;
 let currentId = '';

 // Iterate backwards for better performance
 for (let i = sections.length - 1; i >= 0; i--) {
 if (scrollY >= sections[i].top - 150) {
 currentId = sections[i].id;
 break;
 }
 }

 tocLinks.forEach(link => {
 link.classList.remove('active');
 if (link.getAttribute('href') === '#' + currentId) {
 link.classList.add('active');
 }
 });
}

// Throttle scroll events for performance
let ticking = false;
window.addEventListener('scroll', () => {
 if (!ticking) {
 window.requestAnimationFrame(() => {
 updateActiveLink();
 ticking = false;
 });
 ticking = true;
 }
});

[0]0.

Adım 4: Smooth Scrolling ve Accessability

Smooth kaydırma, bölümler arasında hoş bir şekilde atılır. Bunu CSS ile de yapabilirsiniz, ancak aynı zamanda iyi kontrol için JavaScript ile.

// Add click handler on the TOC container to use smooth scrolling
tocContainer.addEventListener('click', (e) => {
 const link = e.target.closest('a');
 if (link && link.getAttribute('href').startsWith('#')) {
 e.preventDefault();
 const targetId = link.getAttribute('href').substring(1);
 const target = document.getElementById(targetId);
 if (target) {
 target.scrollIntoView({ behavior: 'smooth' });
 // Update the URL hash without causing a scroll jump
 history.pushState(null, '', '#' + targetId);
 }
 }
});

Accessability Studies: Accessability Studies:

Adım 5: Dinamik TOC'yi ele alalım

Stil JavaScript mantığının bir parçası olmasa da, iyi bir TOC bizi yeteneğe zorlar. Aşağıda, kenar çubuğu kullanımı için bir çubuk konumlandırma ekler minimum CSS örneği vardır:

#table-of-contents {
 position: sticky;
 top: 2rem;
 max-height: calc(100vh - 4rem);
 overflow-y: auto;
 border-left: 2px solid #ccc;
 padding-left: 1rem;
 font-size: 0.9rem;
}
#table-of-contents ul {
 list-style: none;
 padding: 0;
}
#table-of-contents li {
 margin-bottom: 0.25rem;
}
#table-of-contents a {
 color: #333;
 text-decoration: none;
}
#table-of-contents a.active {
 font-weight: bold;
 color: #007bff;
}
#table-of-contents a[aria-current="location"] {
 border-left: 2px solid #007bff;
 margin-left: -1rem;
 padding-left: calc(1rem - 2px);
}

Bir cevaplı tasarım için TOC'yi küçük ekranlarda saklamayı ve bir toggle düğmesine eklemeyi veya bir seçici menüye dökmeyi düşünün.

Gelişmiş Gelişmiş Gelişmiş Gelişmiş Gelişmiş Gelişmiş Gelişmiş

1. Regsize Events

Eğer görüş yüksekliği değişir (örneğin, mobil yönelim değişikliği), [[Gönderlik değerleri değişebilir.Rekonuşluk aralığına göre, hayal kırıklığına uğratılan bir yeniden boyut:

let sections = [];
function recalcSections() {
 sections = Array.from(headings).map(h => ({
 id: h.id,
 top: h.offsetTop
 }));
}
let resizeTimer;
window.addEventListener('resize', () => {
 clearTimeout(resizeTimer);
 resizeTimer = setTimeout(recalcSections, 250);
});

2.Bölüm Gözlemci, Scroll-Based Highlighting için

Dinleyicilerin alternatifi API'dir. daha performansçı ve daha kolay yönetilmek. Örnek: Örnek:

const observer = new IntersectionObserver((entries) => {
 entries.forEach(entry => {
 if (entry.isIntersecting) {
 const id = entry.target.id;
 tocLinks.forEach(link => {
 link.classList.remove('active');
 if (link.getAttribute('href') === '#' + id) {
 link.classList.add('active');
 }
 });
 }
 });
}, { rootMargin: '-80px 0px -70% 0px' });

headings.forEach(h => observer.observe(h));

Bu yangınlar sadece bir başlık girildiğinde veya bir hesaplanmış bir bölgeye ayrılırken, bir bölüm “aktif” olarak kabul edildiğinde tanımlar.

3. Lazy Yükleniyor veya Dinamik İçerik

Makale yükleriniz dinamik olarak (örneğin, AJAX ile), yeni içerik ortaya çıktıktan sonra TOC'yi yeniden üretmelisiniz.Bir yol makale konteynerinde bir MutationObserver kullanmak ve TOC nesli fonksiyonunu tekrar aramaktır.

Performansı Tahmin Ediyor

Statik bir Site Jeneratör (SSG) veya CMS ile bütünleşme

Statik bir site jeneratörü kullanıyorsanız, TOC'nin yerleşik özelliklerini kullanarak önceden tahmin edebilirsiniz (örneğin, Eleventy'nin koleksiyonları, Hugo'nun ESRAT:47)). Ancak, dinamik kaydırma yüksek ışıklandırma hala müşteri odaklı TOC'nin avantajı, JavaScript'in çalışmasına, SEO'nun ve erişilebilirliğin yardımına ihtiyaç duyduğudur.

WordPress veya Directus gibi bir CMS için, ID'leri içerikte depolamak için aynı JavaScript yaklaşımı kullanabilirsiniz. Directus, örneğin, ID'leri otomatik olarak üreten özel arayüzleri destekler. ID'leri yönlendirmek için içerikten tasarruf eden bir kanca oluşturabilirsiniz, sonra ön uç JavaScript'i inşa etmek için.

Daha derin anlayış için dış kaynaklar:

Test ve Debugging

  1. Her başlığın eşsiz bir GÜNFLT:48 olduğunu belirtmek.Spt IDs tarayıcının ilk maça kaydırmasına neden olur.
  2. TOC'yi her iki ışık ve karanlık temalarına göre bağlantı kontrastı WCAG AA standartlarını karşılar.
  3. klavye navigasyonu ile test edin: baskı:0)Tab) TOC bağlantıları arasında hareket etmeli ve bölümün başına dönmelidir.
  4. Tarayıcının DevTools Performans sekmesini, kaydırma sırasında jank sağlamak için kullanın.
  5. Makale görüntüler veya iframes içeriyorsa, bu elementler yükten sonra değişebilir.Ücretsiz veya tüm görüntüler yüklenir (örneğin, [[Gerekli) sonra yeniden hesaplanabilir.

Potansiyel Pitfalls ve Them'dan Nasıl Kaçırmak

Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç

JavaScript ile dinamik bir tablo oluşturmak, uzun, lineer bir makaleye interaktif, taramalı bir kaynağa dönüştürür. IDs'leri yönlendirmek, bağlantıların nested listesini oluşturmak ve mevcut bölümün satır pozisyonuna dayanarak vurgulamak, okuyucuların açık bir yol haritası vermek.Bu makaledeki kod örnekleri sağlam bir temel sağlar, ancak kolayca genişletebilirsiniz - daha düzgün bir şekilde kaydırmak, IntersectionObserver'ı daha iyi performans için kullanmak veya mevcut yapı sürecinizle entegre etmek.

En iyinin sizin yığınınıza uygun yaklaşımı uygulayın: basit siteler için saf JavaScript veya SSG ile ilk TOC yapısı artı müşteri odaklı bir vurgulama için bir karma. yöntemin ne olursa olsun, dinamik bir TOC, önemli kullanılabilirlik kazanımlar elde eden küçük bir yatırımdır.