כיצד שנוצר באופן אוטומטי תוכן עניינים עם חריצי HTML
תוכן העניינים יכול לשפר מאוד את חוויית המשתמש של אתרי אינטרנט רבים, למשל אתרי תיעוד או אנציקלופדיות מקוונות כמו ויקיפדיה. תוכן עניינים מעוצב היטב נותן סקירה כללית של הדף ומסייע למשתמשים לנווט במהירות אל הקטע שבו הם מעוניינים.
באופן מסורתי, ניתן ליצור תוכן עניינים ב- HTML או ב- JavaScript, אך חריצי ה- HTML הסטנדרטיים האחרונים מספקים באמצע הדרך בין השניים. חריץ HTML הוא תקן אינטרנט המאפשר לך הוספת מצייני מיקום לדף אינטרנט ומאוחר יותר למלא אותו עם תוכן באופן דינמי.
מתי להשתמש
אתה יכול למקם
בעזרת טכניקה זו, עליך ליצור את קוד המקור של HTML של תוכן העניינים באופן ידני. JavaScript רק מייצר אוטומטית את תוכן הטקסט של תוכן העניינים, בהתבסס על הכותרות או כותרות המשנה בדף.
אם אתה לא רוצה תוכן העניינים להיות נוכחים ב- HTML אתה צריך ליצור הן את הפריסה ואת התוכן עם JavaScript.
1. צור את ה- HTML
קוד המקור של HTML עבור תוכן העניינים (תוכן העניינים) יהיה בתוך א תג. את הקוד בפנים לא מקבל שניתנו עד שהוא נוסף למסמך על ידי JavaScript. תוכן העניינים שלנו יהיה להצי, שנערך
ה שם תכונה של כל אחד חריץ מייחסים את הכותרות המתאימות שלהם ואת כותרות המשנה במסמך.
למטה, אתה יכול לראות א HTML HTML Velociraptor (כלומר "סייזר מהיר" בלטינית) הוא ... Velociraptor היה באמצע dromaeosaurid בגודל, עם המבוגרים ... מאובנים של dromaeosaurids פרימיטיבי יותר ... במהלך המוזיאון האמריקאי של המוזיאון להיסטוריה של הטבע ... Velociraptor הוא חבר של הקבוצה Eudromaeosauria, נגזר תת קבוצה של ... "דינוזאורים לחימה" הדגימה, נמצא בשנת 1971, משמר ... בשנת 2010, Hone ועמיתיו פרסם מאמר על ... Velociraptor היה חם דם במידה מסוימת, כפי שהוא נדרש ... אחת Velociratoptor mongoliensis גולגולת נושאת שני מקביל ... כפי שאתם יכולים לראות, כל כותרת היא בהתחשב ייחודי והנה, הנה קוד HTML של תוכן העניינים, בתוך א בשני קטעי הקוד לעיל, שים לב התאמה לפני להסתכל לתוך קוד JavaScript כי יוסיף את תוכן העניינים מ ודא כי עכשיו, אנחנו מוסיפים את התסריט הזה מוסיף את תוכן העניינים מעל קטע הקוד שלמעלה יוצר עותק של ואז, שיבוט אם היינו מאפס את מונה CSS ב הנה צילום מסך של הפלט: אם אתה רוצה לקשר את כותרות TOC לכותרות ולכותרות המשנה שלהם על ידי הוספה Velociraptor (כלומר "סייזר מהיר" בלטינית) הוא ... Velociraptor היה באמצע dromaeosaurid בגודל, עם המבוגרים ... מאובנים של dromaeosaurids פרימיטיבי יותר ... כפי שניתן לראות לעיל, וה כותרות בתוך תוכן העניינים מעוגנותYou בשורה הנוספת למעלה, הכל ראה צילום מסך של - תוכן עניינים מקושר בהמשך: אתה יכול לבדוק, להוריד, או מזלג את הקוד המשמש להודעה זו של ריטו Github שלנו. עם כמה כותרות משנה. ה
תיאור
נוצות
היסטוריה של גילוי
קפה
פליאוביולוגיה
התנהגות מחפשת
חילוף חומרים
פתולוגיה
חריץ ערך. תג.
חריץ ו שם תכונות בתוך הכותרות 2. מספר הכותרות
אל המסמך, בואו הוסף מספרים סידוריים עבור הכותרות, באמצעות דלפקי CSS. מאמר counter-reset: title; מאמר h2 :: לפני counter-increment: title; תוכן:'מקלע (כותרת) ':';
לאפס מחדש הכלל שייך אלמנט זה הורה מיידי של כל הכותרות הנושאים את חריץ תכונה (שהוא רכיב בקוד שלנו)..3 הכנס את מסמך ה - TOC למסמך
תג, בתוך ה מיכל. תבניתו = document.querySelector ('תבנית'). מאמר = document.querySelector ('מאמר'). cloneNode (נכון); article.attachShadow (מצב: 'סגור'. appendChild (templateContent.cloneNode (true)); document.querySelector ('# toc'). appendChild (מאמר); ו לצרף עץ DOM צל אליו. אנחנו גם הוסף עותק של של תוכן לעץ DOM צל זה. מוכנס לתוך יסוד עכשיו נוכח בתוכן העניינים גם כן, עם זאת, רק הכותרות ותת הכותרות שציינו מציין מיקום בתוך תוכן העניינים גלויים. הגוף או HTML אלמנט במקום מאמר, הדלפק היה מונה גם את רשימת הכותרות שבתוכן. בגלל זה אתה צריך לאפס את הדלפקים בהורה המיידי של הכותרות.
4. הוסף היפר
id אל הכותרות והעוגנים את טקסט ה- TOC המתאים שלהן יהיה עליך הסר את החזרה id ערכים מן המשובטים מאמר.
תיאור
נוצות
id התכונה נוסף על כל כותרת כותרת משנה במאמר.
id התכונות הן שהוסרו מן המאמר המשוכפל לפני לצרף את עץ DOM צל אליו. תבניתו = document.querySelector ('תבנית'). מאמר = document.querySelector ('מאמר'). cloneNode (נכון); (#): (): () () ()) (. )); document.querySelector ('# toc'). appendChild (מאמר); 
גיטאב הדגמה
