---
title: "使用md-toc.js来生成文章目录"
description: "使用markdown语法来博，绝逼一大利器，再配合各种静态博客技术，更是如虎添翼，唯一的问题是要想给文章增加目录，就得手工书写HTML代码，这样做绝对是大煞风景，因此一个思路便是在用户浏览文章的时候动态生成，这样一来照常使用md语法写博，二来也能增强文章可读性……"
url: "https://hicc.pro/p/blog/md-toc-js"
author: "tyler wang"
published: "2013-12-07T20:53:31.000Z"
updated: "2014-01-25T17:54:17.000Z"
category: "blog"
tags:
  - "动态文档目录"
lang: "zh-CN"
site: "Hipo日志"
---

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

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

不多说直接上地址：[https://github.com/yijian166/md-toc.js](https://github.com/yijian166/md-toc.js)，page：[http://yijian166.github.io/md-toc.js/](http://yijian166.github.io/md-toc.js/)

<div class="clearfix announce instapaper_body md" id="readme"><span class="name">————-  
</span>  
<article class="markdown-body entry-content" itemprop="mainContentOfPage">
## [](#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)

</article></div>

---

原文 / Source: <https://hicc.pro/p/blog/md-toc-js>