解析降級到自動表中的目錄

本教程演示了為長形式：標記內容創建交互式目錄。它利用幾種技術來增強用戶體驗，包括降壓解析，交叉觀察者進行主動截面檢測，平滑滾動動畫以及用於動畫列表更新的VUE.JS過渡。

目錄在頁面內提供快速導航。這對於冗長的文章特別有用，為用戶提供了清晰的概述和輕鬆訪問不同部分的訪問。本指南詳細介紹瞭如何將標記文本轉換為帶有鏈接標題的HTML目錄，突出顯示了當前查看的部分。我們還將使用vue.js實現流暢的滾動和動畫列表更新。

降級解析和HTML生成

Web內容通常使用Markdown。我們將採用marked庫（儘管替代方案是合適的）將降價分析到HTML中。降價內容是從GitHub Gist獲取的。 marked函數將獲取的Markdown文本轉換為HTML，然後將其註入到DOM中。

異步函數fetchandparsemarkdown（）{
  const url ='https://gist.githubusercontent.com/lisilinhart/e9dcf5298adff7c2c2a4da4da9ce2a3db3db3f/raw/raw/2f1a0d47eba647eba647564756c222460b5dd2291919191919198d45454545454542MM
  const響應=等待提取（url）;
  const data =等待響應.text（）;
  const htmlFrommarkDown =標記（數據，{sanitize：true}）;
  返回htmlfrommarkdown;
}

使用innerHTML將解析的HTML插入指定的DOM元素。

異步函數init（）{
  const $ main = document.queryselector（'＃app'）;
  const htmlcontent =等待fetchandparsemarkdown（）;
  $ main.innerhtml = htmlContent;
}

init（）;

生成目錄

下一步是從分析的HTML中的標題（H1和H2）創建目錄。我們使用querySelectorAll來選擇這些標題，提取其文本內容，深度（H1或H2）和ID屬性。

函數generateLinkmarkup（$ contentElement）{
  const標題= [... $ contentElement.querySelectorall（'H1，H2'）];
  const parsedheadings = headings.map（heading =>（{{
    標題：heading.innertext，
    深度：heading.nodename.replace（/\ d/g，''），
    id：heading.getAttribute（'id'）
  }））;
  // ...（生成HTML標記的其餘功能）
}

這會生成一系列對象，每個對象代表標題。然後，該數據用於使用ES6模板文字為目錄創建HTML，從而為子頭增長了凹痕（H2）。所得的HTML被添加到外部元素中。

實施交叉點觀察者

為了動態強調目錄中的活動部分，我們使用交叉點觀察者API。此API允許我們監視元素（在這種情況下，標題）與視口相交時。

函數createObserver（$ links）{
  const options = {rootmargin：“ 0px 0px -200px 0px”，閾值：1};
  const callback =（條目，觀察者）=> handleObserver（條目，觀察者，$ links）; //回調處理更新
  返回新的IntersectionObserver（回調，選項）;
}

函數handleobserver（條目，觀察者，$ links）{
  entries.foreach（entry => {
    if（entry.isintersecting && enter.intersectionratio> = 1）{
      updateLinks（`＃$ {entry.target.getAttribute（'id'）}`，$ links）;
    }
  }）;
}

功能UpdatElinks（visibleId，$ links）{
  $ links.foreach（link => {
    link.classlist.remove（'IS-Active'）;
    if（link.getAttribute（'href'）===可見visibleId）link.classlist.add（'is-active'）;
  }）;
}

handleObserver函數檢查交叉點，並調用updateLinks從目錄中的相應鏈接中添加/刪除is-active類。

光滑滾動和鏈接點擊處理

單擊內容表中的鏈接應平滑滾動到相應的部分。我們將事件偵聽器添加到每個鏈接，防止默認行為和使用window.scroll使用smooth行為”選項（除非用戶更喜歡減少運動）。

 const MotionQuery = window.matchmedia（'（prefers-reducce-motion）'）;

$ links.foreach（link => {
  link.AddeventListener（“ click”，evt => handlelinkClick（evt，$ headings，motionquery））;
}）;

功能HandlelinkClick（EVT，$標題，MotionQuery）{
  evt.preventdefault（）;
  const ID = evt.target.getAttribute（“ href”）。替換（'＃'，''）;
  const部分= $ headings.find（heading => heading.getAttribute（'id'）=== id）;
  e節。
  window.scroll（{
    行為：MotionQuery.Matches？ 'instant'：“平滑”，
    頂部：section.offsettop -20
  }）;
}

用vue.js對目錄進行動畫表

最後，vue.js的<transition-group></transition-group>組件用於對目錄中列表項目的添加和刪除進行動畫。當部分變得活躍或不活動時，這提供了平穩的轉變。定義了適當的CSS過渡以處理動畫。 （對於簡潔而言，省略了VUE集成和CSS的代碼，但構成了實施的最後一部分。）建議訪問功能以防止快速滾動的動畫問題。

這種完整的方法提供了高度交互式且用戶友好的目錄，用於長形式：標記內容。

以上是解析降級到自動表中的目錄的詳細內容。更多資訊請關注PHP中文網其他相關文章！