hiccLoghicc log by wccHipo日志

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

toc

Intro

使用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语法生成的页面(例如诸多静态博客文章)。

说明

扫描指定元素(文章内容)内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)自行定义;
  • 属性值最好不要带单位,负责去第一个字母前面的数字。

Demo

Demo:learn.hicc.me