动态生成静态HTML页面目录,特别适合由markdown语法生成的页面(例如诸多静态博客文章)。
说明
扫描指定元素(文章内容)内h1
~h6
标签,再生成对应的嵌套目录列表。
- 根据文章结构层级,生成相应层级的目录。
- 目录实在页面加载之后动态生成,对搜索引擎无用因此链接hash值顺次排序
- 无需手动编辑markdown文件,不违背md宗旨,又能增加文章阅读时候的便利性,增强体验。
- 快速生成目录,不必等待大资源加载完成(document ready后),用户感觉不到延迟。
- 浏览器支持:IE8+,Chrome,Firefox,Opera,Safari。
使用方法
在需要生成目录的元素内设置以下自定义属性,即可很方便的使用toc.js
data-toc="true"
:如果想要生成目录,需要设置data-toc
且赋值必须为true
,建议文档中只设置一处,若有多处,只第一处生效;data-toc-class="toc"
:可选,此处定义目录元素的class
值,若缺失则class
默认为toc
;data-toc-top="200"
:可选,此处做了简单的体验优化,设置了非负值时候, - 文档垂直滚动区域小余该值时:目录**position:absolute
**,top
为改值。横向定位属性(left
或者right
),以及所需的定位依赖元素自行定义;- 文档垂直滚动超出该值后,目录**
position:fixed;top:10px
**,向定位属性(left
或者right
)自行定义; - 属性值最好不要带单位,负责去第一个字母前面的数字。