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）可訪問性反饋