באמצעות Javascript כדי ליצור שולחן דינמי של תוכן עבור מאמרים ארוכים

למה שולחן דינמי של תוכן חשוב עבור תוכן ארוך-עבורם

מאמרים ארוכים, הדרכות ודפים של תיעוד יכולים להציף את הקוראים אם ניווט מוגבל לגלול ידני: טבלה דינאמי של תוכןFLT:1 (TOC) פותר את זה על ידי מתן מתווה קליק כי באופן אוטומטי מדגיש את הקטע הקורא הוא צפייה.זה משפר את יכולת, מקטין את קצב הקפיצה, והופך את התוכן שלך נגיש יותר למשתמשים שרוצים לקפוץ במהירות בין מזהה רשום לבין תמונות חדשות, כאשר הוא מוסיף קישורי זמן אמתיות, עם תמונות חדשות של Skype.

לדוגמה, מדריך טכני עם 30 חלקים הופך הרבה יותר קל לעיכול כאשר הקוראים רואים תפריט צדר שעוקב אחר ההתקדמות שלהם. אותו עיקרון חל על יישומים בעמוד אחד, תיעוד API, או אפילו פוסטים בלוגים עם תת-המסים מרובים. על ידי יישום דינמי TOC, אתה נותן לקוראים שליטה על חוויית הקריאה שלהם תוך צמצום העומס הקוגניטיבי של חיפוש חלקים רלוונטיים.

המונחים: a Dynamic Table of contents

כדי לבנות דינמיקה TOC, עליך להבין שלושה חלקים בסיסיים:

(ב) ,0) מבנה HTML של אלפבית: כל סעיף חייב להיות ייחודי (FLT:0) תכונה כך JavaScript יכול לכוון אותה.
(ב) ,0) מזמורי תהילים ומניפולציה (FLT:103) - כותרות התסריט שלך יוצרות רשימה מקוננת של קישורים, ונספחים רשימה זו אל אלמנט מכולה.
(ב) [17] ,0) , עיין יעיל אשר הכותרת גלויה כעת ומוסיפה שיעור 1FLT לקשר התואם ל- TOC.

חתיכות אלה לעבוד יחד כדי לייצר TOC מרגיש יליד הדף, דורש לוגיקה מינימלית של השרת, ופועלת על פני דפדפנים מודרניים.

שלב 1: הכנת מבנה ה-HTML שלך

לפני כל JavaScript פועל, אתה צריך שני דברים ב- HTML שלך:

חתימה מזהה ייחודי עבור Headings

כל כותרת שיש להופיע ב- TOC (בדרך כלל:2 , ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇

<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 ישירות, באפשרותך ליצור תעודות זהות באמצעות טקסט ב- JavaScript (לדוגמה, הפונקציה FLT:8), אך זה נקי להוסיף אותם באופן ידני או עם גנרטור אתר סטטי.

צור מצורף עבור TOC

⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇

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

ה-FLT:12 משפר את נגישות על ידי מתן קוראי מסך שם תיאורי לאזור הניווט.מאוחר יותר אתה תפול את מיכל זה עם הרשימה הנבנית.

שלב 2: יצירת TOC עם JavaScript

עכשיו אנחנו כותבים את JavaScript שסורק את הכותרות ומקים את הרשימה.הנחפט הבא יוצר רשימה שטוחה של כותרות LT:13.עבור יותר מתקדם TOC הכולל תת-ראשים, תצטרך רשימות מקוננות, אשר אנו מכסים מאוחר יותר.

דוגמה: Flat toC

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

(ב) ⁇ ⁇ ⁇ ⁇ ⁇

שיטת ה-FLT:15 מחזירה את ה-FLT:16; היא עובדת עבור דפים שבהם כותרות אינן משתנות באופן דינמי.
אם כותרת חסרה (FLT:17), אנו יוצרים אוטומטית אחד באמצעות האינדקס.
אנו מוסיפים את המאפיין של כל קישור לבחירה קלה יותר מאוחר יותר.

נביחות ננקטות (H2, H3, H4)

שימוש יעיל יותר ב- TOC משקף את ההיררכיה של המסמך כדי ליצור רשימות מקוגנות, לעקוב אחר ה-FLT:19 והכניסת FLT:20 עבור ילדיה.

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

אלגוריתם זה מבטיח שכל תת-ראש מופיעה בסתירה תחת ההורה שלה.ליצור, ייתכן שתרצה לחדד את ההיגיון כדי להימנע מערימות עמוקות ולעמוד במקרים (למשל, רמות כותרת חסרות).

שלב 3: להאיר את הסעיף הפעיל על Scroll

המכונאי מדגיש מאפשר לקוראים לדעת איזה חלק מהמאמר שהם קוראים כיום.הרעיון הוא לחדור דרך כל הכותרות, למצוא את זה הקרוב ביותר לראש התצוגה (עם קצת מלמטה), וליישם מחלקה 22 לקישור המקביל ל- TOC.

סיקור חיפוש > Efficient Scroll Listener

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;
 }
});

(ב) ויקרא י"ד:

השתמש ב-FLT:24 כדי להגביל עדכונים למחזור הצבעים של הדפדפן.זה נמנע מלג על דפים עסוקים.
תחילת 150 פיקסלים מבטיחה שהסעיף "אקטיבי" מעט לפני שהוא מגיע לפסגה, שמרגישה טבעית יותר.
האטה לאחור מהשורה האחרונה יעילה יותר, משום שהחלק הפעיל קרוב לתחתית השטח הנראה לעין.

שלב 4: הוספת Smooth Scrolling ו- נגישות

Scub Scrolling עושה לקפוץ בין חלקים נעים.You יכול להשיג את זה עם CSS, אבל גם באמצעות JavaScript עבור שליטה קנס יותר.

// 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);
 }
 }
});

שיפור נגישות:

(ה) יש לו את ה-[[1924]], [[1924]], [[1924]], [[1924]], [[1924]]]]
(ב) ל[[1924]], [[1924]], [[1924]]]], [[1924]]]], [[1924]]]]]], [[1924]]]], [[1924]]]]]]]], [[1924]]]]]]
(ב) , (ב) , ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇

שלב 5: לנענע את הדינמיקה

בעוד שסטייללינג אינו חלק מהלוגיקה של JavaScript, TOC מחוזק את יכולת השימוש.

#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);
}

עבור עיצוב תגובתי, לשקול להסתיר את TOC על מסכים קטנים ולהוסיף כפתור לענג, או להתנגש אותו לתוך תפריט מפוזרים נבחר.

שיפור

1.החזרו מחדש אירועים

אם גובה התצוגה משתנה (למשל, על שינוי אוריינטציה נייד), ערכי ה-FLT:36 עשויים להשתנות.

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. ↑ מבט על Highlighting

חלופה לגלול מאזינים היא ה-API של ה-API.I.I.I.I.I. It's more Performanceant and Easy to run.

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

זה יורה רק כאשר הכותרת נכנסת או משאירה אזור מאויש, צמצום פני השטח.

עצלות או תוכן דינמי

אם המאמר שלך נטען חלקים דינמי (למשל, באמצעות AJAX), עליך לשחזר את TOC לאחר תוכן חדש מופיע.אחת הדרכים היא להשתמש במוץ אובסבר על מיכל המאמר ולקרוא לדור TOC לתפקד שוב. עם זאת, להיזהר לא לשכפל ערכים.

שיקולים

(ב) עיין ב[[1924]], [[1924]]]], [[1924]]]]]], [[1924]]]]]]
(ב) ויקרא י"א: "ה', ב'"א, ב'"ב' (ב"ב)" (ב"ב)"ב)" (ב"ב)"ב"ה', ב"ב')" (בראשית כ"ד).
(ב) ויקרא י"א: ויקרא י"ד: ויקרא י"א) , ויקרא י"ד (ב"ב)
(ב) ויקרא י"ד: "וַיֹּאמַר לְךָ הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא הוּא

היכרות עם אתר סטטי (SSG) או CMS

אם אתה משתמש בגנרטור סטטי באתר, אתה יכול לפני מסירה את TOC באמצעות תכונות בנויות (למשל, אחד עשר האוספים של הוגו, הוגו'sFLT:47), עם זאת, גלול דינמי עדיין דורש JavaScript בצד השני.התועלת של שרת בצד אל-ה- לצד אל-C היא כי הוא זמין באופן מיידי, אפילו לפני JavaScript פועל, סיוע ו- SEO.

עבור CMS כמו וורדפרס או Directus, אתה יכול להשתמש באותה גישה JavaScript תוך אחסון מזהה כותרות בתוכן. Directus, לדוגמה, תומך ממשקים מותאם אישית שיוצרים תעודות זהות באופן אוטומטי.You יכול ליצור קידוד שפועל על תוכן כדי להוסיף תעודות זהות לכותרות, ולאחר מכן להסתמך על ה-JavaScript הקדמי כדי לבנות את ה- TOC.

משאבים חיצוניים להבנה עמוקה יותר:

(ב) ◄ ◄ ⁇ ⁇ ⁇
(ב) ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
(ב) ◄ [13] ⁇ ⁇ ⁇ ⁇

בדיקות ווויכוח

בדוק שלכל כותרת יש מזהה ייחודי (FLT:48) , גורמות לדפדפן לגלול למשחק הראשון בלבד.
בדוק את TOC בשני נושאים בהירים ואפלים כדי להבטיח ניגודי קישורים לעמוד בסטנדרטים של WCAG AA.
בדיקה עם ניווט מקלדת: דוחף:0 (TabFeloLT:1) צריך לעבור בין קישורים ל- TOC, ו-FLT:2EntercioFLT 3: צריך לגלול את הקטע.
השתמש בכרטיסיה של ה- Devtools של הדפדפן כדי להבטיח לא ג'נק במהלך לגלול.
אם המאמר מכיל תמונות או אם כן, ייתכן ש-FLT:49 ישתנה לאחר המטענים האלה.קרא פונקציה חישובית על שורת תפוצה (FLT:50) או אחרי כל התמונות ננעלו (למשל, FLT:51).

מלכודות פוטנציאליות וכיצד להימנע מהם

(ב) ,0) קישורים שבורים כאשר אין כותרות, ההרחבה הראשונה (ראה מקור) תמיד לבדוק את ה-FLT:52 וליצור אחד אם חסר (שימוש בתועלת).
(ב) ,0) ,(ה) , ⁇ (ב) , ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
(ב) ,0) , ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
(FLT:0) נבדקו עם רמות מרובות (H2 ;H3) ולהבטיח שהרשימה תוסיף כראוי.הגישה מבוססת הערימה מעל יצירות אך ניתן להרחיב כדי להתמודד עם פערים (למשל, H2 ישירות ואחריו H4).
(ב) ,0) רפורמות על דפים ארוכים 1 (ב) אם יש לך מאות כותרות, לשקול להגביל את ה- TOC ל- H2 ו- H3 בלבד, או ליישם גלילה וירטואלית עבור הצד השני.

מסקנה

בניית שולחן דינמי של תוכן עם JavaScript הופכת מאמר ארוך, ליניארי לתוך משאב אינטראקטיבי, סריקה. על ידי הקצאת תעודות זהות כותרות, יצירת רשימה מקוננת של קישורים, ומדגיש את החלק הנוכחי מבוסס על מיקום גליל, אתה נותן לקוראים מפת דרכים ברורה.הדוגמאות הקוד במאמר זה לספק בסיס מוצק, אבל אתה יכול בקלות להרחיב אותם -d חלק, להשתמש במודולציה InterObs עבור ביצועים ארוכים יותר, כמו מצגת זמן רב יותר, הוא משלבת תוכן, במיוחד, או ניסיון מקצועי.

יישום הגישה המתאימה ביותר לערומה שלך: JavaScript טהור עבור אתרים פשוטים, או היברידית עם מבנה ה-SSG עבור מבנה ה- TOC הראשוני בתוספת הדגשת הלקוח-side.