Как автоматически сгенерировать оглавление с помощью HTML-слотов
Оглавление может значительно улучшить пользовательский опыт многих веб-сайтов, например сайтов документации или онлайн-энциклопедий, таких как Википедия. Хорошо разработанное оглавление дает обзор страницы и помогает пользователям быстро перейти к интересующему их разделу.
Традиционно вы можете создавать оглавление либо в HTML, либо с помощью JavaScript, но недавно стандартизированные HTML-слоты обеспечивают промежуточный путь между ними. HTML-слот это веб-стандарт, который позволяет добавлять заполнители на веб-страницу, а затем динамически заполнять ее содержимым.
Читайте также: Как использовать HTML &
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Когда использовать
Вы можете разместить
С помощью этой техники вам нужно вручную создать исходный код HTML оглавления. JavaScript только автоматически генерирует текстовое содержание оглавления, основываясь на заголовках или подзаголовках на странице.
Если вы не хотите, чтобы оглавление присутствовало в HTML, вам нужно сгенерировать как макет, так и контент с помощью JavaScript.
1. Создайте HTML
Исходный код HTML для оглавления (оглавление) будет находиться внутри тег. Код внутри не обрабатывается, пока не будет добавлен в документ с помощью JavaScript. Наша TOC будет иметь заполнители, которые проводятся в
Атрибут имени каждого
Ниже вы можете увидеть образец HTML
<
article> с некоторыми заголовками и подзаголовками.
<
div> в начале мы вставим заполненное автоматически содержание.
Описание
Велоцираптор был дромеозаврид среднего размера, со взрослыми…
Перья
Окаменелости дромеозавридов более примитивны, чем…
История открытия
Во время экспедиции Американского музея естественной истории…
классификация
Velociraptor является членом группы Eudromaeosauria, производной подгруппы…
палеобиология
Образец “Борьба с динозаврами”, найденный в 1971 году, сохраняет…
Поведение мусора
В 2010 году Хон и его коллеги опубликовали статью о…
метаболизм
Велоцираптор был в некоторой степени теплокровным, так как требовал…
патология
Один череп Velociratoptor mongoliensis несет две параллельные…
Как видите, каждому заголовку присваивается уникальное значение слота.
И вот HTML-код оглавления, внутри тег.
В двух приведенных выше фрагментах кода обратите внимание на соответствующие атрибуты слота и имени внутри заголовков и
2. Пронумеруйте заголовки
Прежде чем заглянуть в код JavaScript, который добавит оглавление из к документу добавим серийные номера для заголовков, используя счетчики CSS.
статья {
сброс счетчика: заголовок;
}
статья h2 :: before {
встречное приращение: заголовок;
content: ‘0’counter (heading)’: ‘;
}
Убедитесь, что правило обнуления счетчика принадлежит элементу, который является непосредственным родителем всех заголовков, содержащих атрибут слота (который является
3. Вставьте оглавление в документ
Теперь мы добавим скрипт, который вставляет оглавление над
контейнер.
templateContent = document.querySelector (‘template’). content;
article = document.querySelector (‘article’). cloneNode (true);
article.attachShadow ({mode: ‘closed’}). appendChild (templateContent.cloneNode (true));
document.querySelector ( ‘# TOC’) AppendChild (статья).
Приведенный выше фрагмент кода создает копию
Затем клонированный
Если бы мы сбросили счетчик CSS в элементе body или html вместо article, счетчик также посчитал бы список заголовков внутри оглавления. Вот почему вы должны сбросить счетчики у непосредственного родителя заголовков.
Вот скриншот вывода:
4. Добавить гиперссылки
Если вы хотите связать заголовки TOC с соответствующими заголовками и подзаголовками, добавив id к заголовкам и закрепив соответствующий текст TOC, вам придется удалить повторяющиеся значения id из клонированной статьи.
Описание
Велоцираптор был дромеозаврид среднего размера, со взрослыми…
Перья
Окаменелости дромеозавридов более примитивны, чем…
Как вы можете видеть выше, атрибут id добавляется к каждому заголовку и подзаголовку в статье.
И заголовки внутри оглавления закреплены:
В дополнительной строке выше все атрибуты id удалены из клонированной статьи перед прикрепив к нему дерево Shadow DOM.
templateContent = document.querySelector (‘template’). content;
article = document.querySelector (‘article’). cloneNode (true);
article.querySelectorAll ( ‘*[id]’) .ForEach ((Ele) => {ele.removeAttribute (‘ ID ‘)})
article.attachShadow ({mode: ‘closed’}). appendChild (templateContent.cloneNode (true));
document.querySelector ( ‘# TOC’) AppendChild (статья).
Смотрите скриншот связанной оглавления ниже:
Github демо
Вы можете проверить, скачать или разветвить код, используемый в этом сообщении, с нашего Github Repo,
Читайте также: Как создать букмарклет с текстовым поиском с помощью JavaScript
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
