如何使用HTML插槽自动生成目录

精心设计的目录对页面进行了概述，并帮助用户快速导航到他们感兴趣的部分。

目录可以极大地改善许多网站的用户体验，例如文档网站或像Wikipedia这样的在线百科全书 。

HTML Slot是一种Web标准，允许您将占位符添加到网页 ，然后在其中动态填充内容 。

传统上，您可以使用HTML或JavaScript创建目录，但是最近标准化HTML插槽提供了两者之间的中间方法 。

何时使用

更改标题后， 插槽将自动更新 。

您可以将<slot>标记放入HTML文件内的目录中，以便稍后可以用相关的标题和子标题填充这些插槽。

JavaScript仅根据页面上的标题或子标题自动生成目录的文本内容。

使用这种技术，您需要手动创建目录HTML源代码。

如果您不想在HTML中显示目录，则需要使用JavaScript生成布局和内容 。

1.创建HTML

我们的目录将在文档中找到的所有标题和子标题中，在<slot>标记中保留占位符 。

<template>中的代码只有在JavaScript将其添加到文档后才会呈现。

TOC（目录）HTML源代码将位于<template>标记内 。

每个<slot>的name属性在文档中相应的标题和子标题中将具有与slot属性相同的值。

开头的<div>是我们将插入自动填充的目录的位置。

在下面，您可以看到带有一些标题和子标题的示例HTML <article> 。

<div id='toc'></div>
<a