資訊專欄INFORMATION COLUMN
摘要：使用可以快速為你的頁面生成目錄的結(jié)構(gòu)，擁有較強的可定制性，并且并不會擅自為你做太多的事情，以便你更容易地把應(yīng)用到你的項目中。
引言
為頁面中的標(biāo)題元素建立目錄索引，這是一個不起眼卻很實用的功能，特別是對于那些含有篇幅很長的文章的頁面，擁有一個目錄可以讓讀者對文章的結(jié)構(gòu)一目了然，更重要的是，讀者可以很輕松地在文章的各個章節(jié)之間來回快速跳轉(zhuǎn)，極大地提高了用戶體驗。
toc.js使用 toc.js 可以快速為你的頁面生成目錄的 HTML 結(jié)構(gòu)，toc.js 擁有較強的可定制性，并且 toc.js 并不會擅自為你做太多的事情，以便你更容易地把 toc.js 應(yīng)用到你的項目中。
項目主頁：GitHub
預(yù)覽 用法在你的頁面中引入 toc.js：
請根據(jù)項目實際情況自行修改 src 屬性。
toc.js 基于 jQuery，請確保在使用 Toc 之前引入 jQuery。
快速上手實例化 Toc：
var toc = new Toc();
然后調(diào)用 make() 方法：
make(content, toc[, callback])
該方法接受兩個必選參數(shù)：第一個參數(shù) content 是頁面中要為其中的標(biāo)題元素建立目錄索引的 jQuery 元素對象，通常就是 article 標(biāo)簽，第二個參數(shù) toc 是用于存放目錄索引的 jQuery 元素對象。
比如你的頁面中有下面元素：
something...
你要在下面的元素中為上面元素內(nèi)的標(biāo)題元素建立目錄索引：
你應(yīng)該這樣調(diào)用 make() 方法：
var content = $("article");
var wrapper = $(".toc");
toc.make(content, wrapper);
make() 方法將為 content 內(nèi)的標(biāo)題標(biāo)簽添加錨點，并在 toc 內(nèi)生成對應(yīng)的目錄索引，生成的目錄結(jié)構(gòu)大致如下：
如果你需要在目錄索引生成后進行一些操作，可以給 make() 方法傳入第三個參數(shù)：
var content = $("article");
var wrapper = $(".toc");
var callback = function () {
console.log("well done!");
};
toc.make(content, wrapper, callback);
更多
如果默認(rèn)生成的目錄索引不能滿足你的需求，你可以在調(diào)用 make() 方法之前鏈?zhǔn)秸{(diào)用 setting() 方法來設(shè)定一些參數(shù)，甚至定義如何生成目錄的 HTML 結(jié)構(gòu)，setting() 方法接受一個對象作為唯一的必選參數(shù)：
setting(config)
你可以在給傳給 setting() 方法的對象定義以下屬性或方法：
| 配置項 | 說明 | 默認(rèn)值 |
|---|---|---|
| headingSelector | 決定哪些級別的標(biāo)題會出現(xiàn)在目錄中 | h2, h3, h4 |
| anchorPrefix | 每個標(biāo)題錨點名的前綴 | toc- |
| makeItem() | 如何生成目錄的每個條目 | 默認(rèn)生成被 li 標(biāo)簽包含的 a 標(biāo)簽 |
| makeWrapper() | 如何生成每個目錄層級的容器 | 默認(rèn)使用 ul 標(biāo)簽 |
headingSelector 屬性是一個 jQuery 選擇器，你可以通過定義它來決定哪些標(biāo)題元素將會出現(xiàn)在目錄中：
var config = {
headingSelector: "h1, h2, h3",
};
toc.setting(config).make(content, wrapper, callback);
以上定義了只有一級標(biāo)題、二級標(biāo)題和三級標(biāo)題會出現(xiàn)在目錄中。
anchorPrefix你可以定義 anchorPrefix 屬性來決定每個標(biāo)題錨點名的前綴，默認(rèn)為 toc-。
makeItem()你可以定義 makeItem() 方法來告訴 Toc 如何生成目錄的每個條目：
makeItem(anchor, text, level)
該方法接受三個參數(shù)：第一個參數(shù) anchor 是對應(yīng)標(biāo)題的錨點；第二個參數(shù) text 是對應(yīng)標(biāo)題的文本內(nèi)容；第三個參數(shù) level 是該標(biāo)題的級別，你需要在此方法中返回目錄條目的 HTML字符串、DOM 元素或者 jQuery 對象，默認(rèn)的定義如下：
function (anchor, text, level) {
return "你還可以定義 makeItem() 方法來告訴 Toc 如何生成每個目錄層級的容器：
makeWrapper(level)
默認(rèn)的定義如下：
function (level) {
return "如果你想多帶帶設(shè)定最頂級目錄層級的容器的生成方式，你可以這樣定義 makeWrap() 方法：
function (level) {
// 其他容器的生成方式
this.makeWrapper = function (level) {
return "如果你覺得這個微不足道的項目能對你有所幫助，那就給我一個 star 吧！——項目主頁：GitHub
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93229.html
摘要：我采用了遍歷樹，然后找到文章的標(biāo)簽暫時只對標(biāo)簽建立索引，為其添加的方式建立索引。初始化文章錨點和目錄數(shù)據(jù)結(jié)構(gòu)找到屬于文章內(nèi)容的標(biāo)簽添加標(biāo)簽文本內(nèi)容記錄當(dāng)前標(biāo)簽的偏移量，方便后面計算滾動距離。 一、前言 演示圖例 showImg(https://segmentfault.com/img/remote/1460000016099128?w=1547&h=894); 需求 這個目錄索引應(yīng)該包...
摘要：下載并安裝目前的最新穩(wěn)定版為，如果之后版本有升級，請將相應(yīng)的版本號替換掉上面的。在實現(xiàn)的過程中，貌似對中文的支持不是那么好，所以接下來會嘗試使用一下中文分詞器來看看效果，順利的話會再出一篇文章。 原文來自：https://jellybool.com/post/setup-slasticsearch-on-your-website 在我的博客按Shift+S就可以呼出搜索框，可...
摘要：提供個人博客文章搜索服務(wù)只需要配置個人博客地址載入博客數(shù)據(jù)開啟服務(wù)即可開啟文章搜索服務(wù)。對配置文件監(jiān)控修改后服務(wù)及時地更新博客數(shù)據(jù)。 Search-Spider-Blog 提供個人博客文章搜索服務(wù), 只需要配置個人博客地址, 載入博客數(shù)據(jù), 開啟Server服務(wù), 即可開啟文章搜索服務(wù)。 對blogconfig.json配置文件監(jiān)控, 修改后服務(wù)及時地更新博客數(shù)據(jù)。 本人用的為Hexo...
摘要：文章介紹如何創(chuàng)建發(fā)布一個包，包括項目搭建發(fā)布流程注意事項等。語義化版本號分為三位。主版本號當(dāng)進行了大都改動或者對有很多不兼容修改時應(yīng)該進行版本號升級。次版本號增加了部分特性或者優(yōu)化時升級該版本。如如果你想撤回指定版本，執(zhí)行包名版本號。 文章介紹如何創(chuàng)建發(fā)布一個npm包，包括項目搭建、發(fā)布流程、注意事項等。 演示代碼GitHub地址 1. 初始化項目 首先在創(chuàng)建好的項目文件夾下面執(zhí)行 ...
閱讀 3504·2023-04-26 02:44
閱讀 1635·2021-11-25 09:43
閱讀 1529·2021-11-08 13:27
閱讀 1893·2021-09-09 09:33
閱讀 908·2019-08-30 15:53
閱讀 1772·2019-08-30 15:53
閱讀 2781·2019-08-30 15:53
閱讀 3115·2019-08-30 15:44
