为你的文章生成目录索引

分享 未结 2 1026
去旅行
去旅行 2018-3-7
悬赏:20飞吻
引言

为页面中的标题元素建立目录索引,这是一个不起眼却很实用的功能,特别是对于那些含有篇幅很长的文章的页面,拥有一个目录可以让读者对文章的结构一目了然,更重要的是,读者可以很轻松地在文章的各个章节之间来回快速跳转,极大地提高了用户体验。

toc.js

使用 toc.js 可以快速为你的页面生成目录的 HTML 结构,toc.js 拥有较强的可定制性,并且 toc.js 并不会擅自为你做太多的事情,以便你更容易地把 toc.js 应用到你的项目中。

项目主页: GitHub

预览



快速上手

在你的页面中引入 toc.js:

<script type="text/javascript" src="/js/toc.js"></script>
请根据项目实际情况自行修改 src 属性。
toc.js 基于 jQuery,请确保在使用 Toc 之前引入 jQuery。

实例化 Toc:

var toc = new Toc();
然后调用 make() 方法:

make(content, toc[, callback])
该方法接受两个必选参数:第一个参数 content 是页面中要为其中的标题元素建立目录索引的 jQuery 元素对象,通常就是 article 标签,第二个参数 toc 是用于存放目录索引的 jQuery 元素对象。

比如你的页面中有下面元素:

<article>something...</article>
你要在下面的元素中为上面元素内的标题元素建立目录索引:

<div class="toc"></div>
你应该这样调用 make() 方法:

var content = $('article');
var wrapper = $('.toc');

toc.make(content, wrapper);
make() 方法将为 content 内的标题标签添加锚点,并在 toc 内生成对应的目录索引,生成的目录结构大致如下:

<ul>
<li>
<a href="#toc-0">1 第一章</a>
<ul>
<li><a href="#toc-1">1.1 第一节</a>
<ul>
<li><a href="#toc-2">1.1.1 第一点</a></li>
<li><a href="#toc-3">1.1.2 第二点</a></li>
<li><a href="#toc-4">1.1.3 第三点</a></li>
</ul>
</li>
<li><a href="#toc-5">1.2 第二节</a></li>
</ul>
</li>
<li><a href="#toc-6">2 第二章</a>
<ul>
<li><a href="#toc-7">3.1 第三节</a></li>
<li><a href="#toc-8">2.1 第四节</a></li>
<li><a href="#toc-9">2.2 第五节</a></li>
</ul>
</li>
<li><a href="#toc-10">3 第三章</a>
<li><a href="#toc-11">3 第四章</a>
<ul>
<li><a href="#toc-12">2.3 第六节</a></li>
</ul>
</li>
</ul>
如果你需要在目录索引生成后进行一些操作,可以给 make() 方法传入第三个参数:

var content = $('article');
var wrapper = $('.toc');

var callback = function () {
console.log('well done!');
};

toc.make(content, wrapper, callback);
更改用法请 前往项目主页查看,如果你觉得这个微不足道的项目能对你有所帮助,那就顺便给我一个 star 吧!
回帖