解析降级到自动表中的目录

本教程演示了为长形式：标记内容创建交互式目录。它利用几种技术来增强用户体验，包括降压解析，交叉观察者进行主动截面检测，平滑滚动动画以及用于动画列表更新的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中文网其他相关文章！