heading anchors

heading-anchors

Веб -компонент для добавления якорных ссылок на заголовки с идентификаторами.

Демо | Демонстрация стиля | Дальнейшее чтение

Примеры

 < script type =" module " src =" heading-anchors.js " > </ script >

< heading-anchors >
  < h2 id =" heading-level-2 " > Heading level 2 </ h2 >
  < p > Lorem ipsum dolor sit amet consectetur adipisicing elit. </ p >

  < h3 id =" heading-level-3 " > Heading level 3 </ h3 >
  < p >
    Excepturi eligendi exercitationem, ratione, in delectus vitae veritatis
    dolorem porro cupiditate quam eaque voluptates.
  </ p >
</ heading-anchors > 

Функции

Этот веб -компонент позволяет вам:

• Добавить ссылки на якорь в заголовки, которые имеют атрибут идентификатора и значение
• Настройте, какие элементы будут добавлены с помощью якорной ссылки, используя атрибут selector
• Настройте, где прилагается якорная ссылка, используя атрибут position

Установка

У вас есть несколько вариантов (выберите один из них):

1. Установите через NPM: npm install @daviddarnes/heading-anchors (также Avaialbe на JSR)
2. Загрузите источник вручную из GitHub в свой проект.
3. Пропустите этот шаг и используйте скрипт непосредственно через сторонний CDN (не рекомендуется для использования производства)

Использование

Убедитесь, что вы включите <script> в свой проект (выберите один из них):

 <!-- Host yourself -->
< script type =" module " src =" heading-anchors.js " > </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://www.unpkg.com/@daviddarnes/[email protected]/heading-anchors.js "
> </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://esm.sh/@daviddarnes/[email protected] "
> </ script >

Использование selector и position

По умолчанию heading-anchors выберут все элементы h2[id] , h3[id] и h4[id] чтобы добавить ссылку на якорь. Однако с помощью атрибута selector вы можете пройти в другой строке селектора, чтобы выбрать:

 < heading-anchors selector =" h2[id] " >
  <!-- ... -->
</ heading-anchors >

Примечание. Рекомендуется использовать селекторы, которые используют селектор атрибутов [id] для лучшей надежности

По умолчанию heading-anchors будут добавлять ссылки на якорь сразу после элемента, используя API insertAdjacentHTML . Однако вы можете настроить это, используя атрибут position :

 < heading-anchors position =" beforeend " >
  <!-- ... -->
</ heading-anchors > 

Кредит

С благодарностью следующим людям:

• Zach Leatherman для вдохновения этого шаблона Repo веб -компонента
• Кертис Уилкокс для обратной связи с доступностью