为你的文章生成目录索引

魏宪会发布于2019-08-22 15:10 / 790人阅读

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

引言

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

toc.js

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

项目主页：GitHub

预览

用法

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

请根据项目实际情况自行修改 src 属性。

toc.js 基于 jQuery，请确保在使用 Toc 之前引入 jQuery。

快速上手

实例化 Toc：

var toc = new Toc();

然后调用 make() 方法：

make(content, toc[, callback])

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

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

something...

你要在下面的元素中为上面元素内的标题元素建立目录索引：

你应该这样调用 make() 方法：

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

toc.make(content, wrapper);

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

如果你需要在目录索引生成后进行一些操作，可以给 make() 方法传入第三个参数：

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

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

toc.make(content, wrapper, callback);

如果默认生成的目录索引不能满足你的需求，你可以在调用 make() 方法之前链式调用 setting() 方法来设定一些参数，甚至定义如何生成目录的 HTML 结构，setting() 方法接受一个对象作为唯一的必选参数：

setting(config)

你可以在给传给 setting() 方法的对象定义以下属性或方法：

配置项	说明	默认值
headingSelector	决定哪些级别的标题会出现在目录中	h2, h3, h4
anchorPrefix	每个标题锚点名的前缀	toc-
makeItem()	如何生成目录的每个条目	默认生成被 li 标签包含的 a 标签
makeWrapper()	如何生成每个目录层级的容器	默认使用 ul 标签

headingSelector

headingSelector 属性是一个 jQuery 选择器，你可以通过定义它来决定哪些标题元素将会出现在目录中：

var config = {
    headingSelector: "h1, h2, h3",
};

toc.setting(config).make(content, wrapper, callback);

以上定义了只有一级标题、二级标题和三级标题会出现在目录中。

anchorPrefix

你可以定义 anchorPrefix 属性来决定每个标题锚点名的前缀，默认为 toc-。

makeItem()

你可以定义 makeItem() 方法来告诉 Toc 如何生成目录的每个条目：

makeItem(anchor, text, level)

该方法接受三个参数：第一个参数 anchor 是对应标题的锚点；第二个参数 text 是对应标题的文本内容；第三个参数 level 是该标题的级别，你需要在此方法中返回目录条目的 HTML字符串、DOM 元素或者 jQuery 对象，默认的定义如下：

function (anchor, text, level) {

    return "" + text + "";
}

makeWrapper()

你还可以定义 makeItem() 方法来告诉 Toc 如何生成每个目录层级的容器：

makeWrapper(level)

默认的定义如下：

function (level) {

    return "";
}

如果你想多带带设定最顶级目录层级的容器的生成方式，你可以这样定义 makeWrap() 方法：

function (level) {
    // 其他容器的生成方式
    this.makeWrapper = function (level) {
        return "";
    };

    return "";
}

最后

如果你觉得这个微不足道的项目能对你有所帮助，那就给我一个 star 吧！——项目主页：GitHub

GPU云服务器云服务器目录索引自动生成文章显示目录索引 php生成目录树

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93229.html

为你的博客添加目录索引

摘要：我采用了遍历树，然后找到文章的标签暂时只对标签建立索引，为其添加的方式建立索引。初始化文章锚点和目录数据结构找到属于文章内容的标签添加标签文本内容记录当前标签的偏移量，方便后面计算滚动距离。一、前言演示图例 showImg(https://segmentfault.com/img/remote/1460000016099128?w=1547&h=894); 需求这个目录索引应该包...

SwordFly 2019-08-26 12:18 评论0 收藏0
为你的站点插上ElasticSearch的翅膀

摘要：下载并安装目前的最新稳定版为，如果之后版本有升级，请将相应的版本号替换掉上面的。在实现的过程中，貌似对中文的支持不是那么好，所以接下来会尝试使用一下中文分词器来看看效果，顺利的话会再出一篇文章。原文来自：https://jellybool.com/post/setup-slasticsearch-on-your-website 在我的博客按Shift+S就可以呼出搜索框，可...

JouyPub 2019-06-27 11:23 评论0 收藏0
为你的博客添加搜索功能吧!

摘要：提供个人博客文章搜索服务只需要配置个人博客地址载入博客数据开启服务即可开启文章搜索服务。对配置文件监控修改后服务及时地更新博客数据。 Search-Spider-Blog 提供个人博客文章搜索服务, 只需要配置个人博客地址, 载入博客数据, 开启Server服务, 即可开启文章搜索服务。对blogconfig.json配置文件监控, 修改后服务及时地更新博客数据。本人用的为Hexo...

vboy1010 2019-08-22 10:35 评论0 收藏0
如何发布你自己的React模块至NPM

摘要：文章介绍如何创建发布一个包，包括项目搭建发布流程注意事项等。语义化版本号分为三位。主版本号当进行了大都改动或者对有很多不兼容修改时应该进行版本号升级。次版本号增加了部分特性或者优化时升级该版本。如如果你想撤回指定版本，执行包名版本号。文章介绍如何创建发布一个npm包，包括项目搭建、发布流程、注意事项等。演示代码GitHub地址 1. 初始化项目首先在创建好的项目文件夹下面执行 ...

zombieda 2019-08-23 14:48 评论0 收藏0