使用md-toc.js来生成文章目录

使用markdown语法来博,绝逼一大利器,再配合各种静态博客技术,更是如虎添翼,唯一的问题是要想给文章增加目录,就得手工书写HTML代码,这样做绝对是大煞风景,因此一个思路便是在用户浏览文章的时候动态生成,这样一来照常使用md语法写博,二来也能增强文章可读性……

不多说直接上地址:https://github.com/yijian166/md-toc.js,page:http://yijian166.github.io/md-toc.js/

————-
# [](#md-toc)md-toc.js 动态生成静态HTML页面目录,特别适合由markdown语法生成的页面(例如诸多静态博客文章)。 ### [](#%E8%AF%B4%E6%98%8E)说明 扫描指定元素(文章内容)内`h1`~`h6`标签,再生成对应的嵌套目录列表。 - 根据文章结构层级,生成相应层级的目录。 - 目录实在页面加载之后动态生成,对搜索引擎无用因此链接hash值顺次排序 - **无需手动编辑markdown文件,不违背md宗旨,又能增加文章阅读时候的便利性,增强体验**。 - 快速生成目录,不必等待大资源加载完成(document ready后),用户感觉不到延迟。 - 浏览器支持:IE8+,Chrome,Firefox,Opera,Safari。 ### [](#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95)使用方法 在需要生成目录的元素内设置以下自定义属性,即可很方便的使用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`)自行定义; - 属性值最好不要带单位,负责去第一个字母前面的数字。 ### [](#demo)Demo [Demo:learn.hicc.me](http://learn.hicc.me/html-css/images-audio-video.html)

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus