Як автоматично генерувати зміст з HTML-слотами
Зміст наприклад, можна значно поліпшити роботу багатьох веб-сайтів сайти документації або онлайн-енциклопедії як Вікіпедія. Добре продумане зміст дає огляд сторінки допомагає користувачам швидко переходити до розділу, який вони цікавлять.
Традиційно ви можете створювати зміст у HTML або JavaScript, але останні стандартизовані HTML-слоти надають a середній шлях між ними. HTML слот - це веб-стандарт, який дозволяє додайте заповнювачі до веб-сторінки і пізніше наповнюйте його вмістом динамічно.
Коли використовувати
Ви можете розмістити
За допомогою цієї методики потрібно створити вручну вихідний код HTML змісту. JavaScript лише автоматично генерує текстовий вміст змісту, на основі заголовків або підзаголовків на сторінці.
Якщо ви не хочете, щоб зміст було присутнім у HTML, що вам потрібно генерувати як макет, так і вміст за допомогою JavaScript.
1. Створіть HTML
Вихідний код HTML для змісту (зміст) буде всередині a тег. Код всередині не відображається, поки не буде додано до документа за допомогою JavaScript. Наш ТОС буде мати заповнювачі, відбудеться в
The ім'я атрибут кожного слот у відповідних заголовках і підзаголовках документа.
Нижче ви можете побачити a зразок HTML Velociraptor (на латині означає "швидкий сейзер") - це… Velociraptor був dromaeosaurid середнього розміру, з дорослими… Скам'янілості дромеосаурід більш примітивні, ніж… Під час експедиції Американського музею природознавства ... Велоцираптор є членом групи Eudromaeosauria, похідної підгрупи ... Зразок "Боротьба з динозаврами", знайдений у 1971 році, зберігає ... У 2010 році Хон та його колеги опублікували статтю про… До певної міри Velociraptor був теплокровний, оскільки він вимагав… Один череп Velociratoptor mongoliensis несе дві паралелі ... Як ви бачите, кожен заголовок є дано унікальне І ось HTML-код змісту, всередині a У двох вищезгаданих фрагментах коду зверніть увагу на відповідність Перш ніж переглядати код JavaScript, який буде додавати зміст з Переконайтеся, що Тепер ми додаємо цей сценарій вставляє вміст TOC над Вище наведений фрагмент коду створює копію Потім клонували Якщо ми будемо скидати лічильник CSS на Ось знімок вікна: Якщо ти хочеш пов'язувати заголовки змісту з відповідними заголовками та підзаголовками шляхом додавання Velociraptor (на латині означає "швидкий сейзер") - це… Velociraptor був dromaeosaurid середнього розміру, з дорослими… Скам'янілості дромеосаурід більш примітивні, ніж… Як ви можете бачити вище, І, заголовки всередині змісту: У додатковому рядку вище, все Дивіться знімок екрана пов'язаний зміст нижче: Ви можете перевірити, завантажити або роздрібнити код, який використовується в цій публікації з нашого Github Repo. деякі заголовки та підзаголовки. The
Опис
Пір'я
Історія відкриття
Класифікація
Палеобіологія
Поведінка очищення
Метаболізм
Патологія
слот значення. тег.
слот і ім'я атрибути всередині заголовків і 2. Номер заголовків
До документа, давайте додайте серійні номери для заголовків, використовуючи лічильники CSS. стаття counter-reset: заголовок; стаття h2 :: before 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. вставляється в елементом є тепер також присутній у ЗВТ, однак видимі лише його заголовки і підзаголовки, які знайшли заповнювач всередині ТОС. тіла або html замість статті, лічильник також підрахував би список заголовків у TOC. Ось чому ви повинні це зробити скинути лічильники на безпосередньому батьківському заголовку.
4. Додайте гіперпосилання
id до заголовків і закріплення відповідного тексту TOC, який вам доведеться додати видалити повторювані id значення від клонованого статті.
Опис
Пір'я
id є атрибут до кожного заголовка та підзаголовків статті.
id є атрибути видалено з клонованої статті раніше приєднання до неї дерева Shadow DOM. templateContent = document.querySelector ("шаблон"). зміст; article = document.querySelector ('article'). cloneNode (true); article.querySelectorAll ('* [id]')) дляEach ((ele) => ele.removeAttribute ('id')) article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true) )); document.querySelector ('# toc'). appendChild (стаття); 
Демо Github
