Как да се генерира автоматично таблица на съдържанието с HTML слотове
Съдържание може значително да подобри потребителския опит на много уебсайтове, например сайтове за документация или онлайн енциклопедии като Уикипедия. Добре проектирано съдържание дава общ преглед на страницата и помага на потребителите бързо да отидат до секцията, която ги интересува.
По традиция можете да създавате съдържание в HTML или JavaScript, но напоследък стандартизираните HTML слотове осигуряват a среден път между двете. HTML слот е уеб стандарт, който ви позволява добавете резерви към уеб страница и по-късно запълнете я със съдържание динамично.
Кога да използвате
Можете да поставите
С тази техника трябва да създадете ръчно HTML кода на съдържанието. JavaScript само автоматично генерира текстовото съдържание на съдържанието, въз основа на заглавията или подзаглавията на страницата.
Ако не искате съдържанието да се съдържа в HTML кода, който трябва генерира както оформлението, така и съдържанието с JavaScript.
1. Създайте HTML
HTML изходният код за съдържанието (съдържанието) ще бъде вътре свободен край. Кодът вътре не се визуализира, докато не бъде добавен към документа с JavaScript. Нашият TOC ще има контейнери, проведен в
Най- име атрибут на всеки прорез атрибута в съответните им заглавия и подпозиции в документа.
По-долу можете да видите a проба HTML Velociraptor (на латински означава „бърз сейзер“) е… Velociraptor е средно голям дромеосаврид, с възрастни… Вкаменелостите на дромеосауридите са по-примитивни от… По време на експедиция в Американския музей на естествената история… Velociraptor е член на групата Eudromaeosauria, производна подгрупа на… Екземплярът "Борба с динозаврите", открит през 1971 г., запазва… През 2010 г. Hone и колегите публикуваха доклад за ... До известна степен Velociraptor беше топлокръвна, тъй като изискваше… Един череп Velociratoptor mongoliensis носи два паралела… Както виждате, всяко заглавие е дадена уникална И тук е HTML код на съдържанието, вътре В двата кодови фрагмента по-горе, обърнете внимание на съчетаване Преди да погледнете в JavaScript кода, който ще добави ТОК от Уверете се, че Сега добавяме скрипта вмъква TOC над По-горният кодов фрагмент създава копие на След това, клонираният Ако рестартираме брояча на CSS в Ето снимката на изхода: Ако искаш да свързват заглавията на ОТО с техните съответни позиции и подпозиции добавяйки Velociraptor (на латински означава „бърз сейзер“) е… Velociraptor е средно голям дромеосаврид, с възрастни… Вкаменелостите на дромеосауридите са по-примитивни от… Както можете да видите по-горе, И, заглавията в съдържанието са закотвени: В допълнителния ред по-горе Вижте снимката на екрана на свързано съдържание По-долу: Можете да проверите, изтеглите или разклоните кода, използван в тази публикация от нашия Github Repo. с някои заглавия и подпозиции. Най-
описание
Пера
История на откритията
класификация
Paleobiology
Поведение при почистване
метаболизъм
патология
прорез стойност. свободен край.
прорез и име атрибути вътре в заглавията и 2. Посочете заглавията
към документа добавете серийни номера за заглавията, като използвате CSS броячи. статия counter-reset: заглавие; член h2 :: преди counter-increment: заглавие; съдържание: '0' брояч (позиция) ':';
контра-нулиране Правилото принадлежи на елемента, който е непосредствения родител на всички заглавия, които носят прорез атрибут (кой е елемент в нашия код).3. Поставете съдържанието в документа
свободен край, вътре контейнер. templateContent = document.querySelector ("шаблон"). съдържание; article = document.querySelector ('article'). cloneNode (true); article.attachShadow (mode: 'closed') appendChild (templateContent.cloneNode (true)); document.querySelector ( "# TOC) appendChild (статия). и прикрепя към него дърво DOM Shadow. Ние също добавете копие на съдържанието към това дърво Shadow DOM. се вмъква в елемент е сега присъства и в TOC, виждат се обаче само заглавията и подзаглавията, които са намерили място в ТОС. тяло или HTML елемент вместо статия, броячът би преброил и списъка на заглавията в TOC. Ето защо трябва нулирайте броячите в непосредствения родител на заглавията.
4. Добавете хипервръзки
документ за самоличност към заглавията и закрепването на съответния текст на ТОС, който ще трябва да направите премахнете повтарящите се документ за самоличност стойности от клонираните статия.
описание
Пера
документ за самоличност е атрибут към всяка позиция и подпозиция в статията.
документ за самоличност атрибути отстранени от клонирания артикул преди свързване на дървото Shadow DOM към него. templateContent = document.querySelector ("шаблон"). съдържание; article = document.querySelector ('article'). cloneNode (true); forEach ((ele) => ele.removeAttribute ('id')) article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true) )); document.querySelector ( "# TOC) appendChild (статия). 
Демо Github
