精心设计的目录对页面进行了概述,并帮助用户快速导航到他们感兴趣的部分。
目录可以极大地改善许多网站的用户体验,例如文档网站或像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