heading anchors

heading-anchors

Web组件将锚定链接添加到具有ID的标题。

演示|样式演示|进一步阅读

例子

 < 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 > 

特征

此Web组件允许您：

• 将锚链接添加到具有ID属性和值的标题
• 自定义使用selector属性附加哪些元素附加锚链接
• 自定义使用position属性附加锚点链接的位置

安装

您有一些选择（选择其中之一）：

1. 通过NPM安装： npm install @daviddarnes/heading-anchors （也在JSR上的Avaialbe）
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]属性选择器的选择器以提高可靠性

默认情况下，使用insertAdjacentHTML API，将在元素之后的锚点链接附加heading-anchors 。但是，您可以使用position属性调整此：

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

信用

感谢以下人员：

• 扎克·莱瑟曼（Zach Leatherman）启发此Web组件回购模板
• 柯蒂斯·威尔科克斯（Curtis Wilcox）可访问性反馈