outline.js自動(dòng)生成文章導(dǎo)讀導(dǎo)航

outline.js - 自動(dòng)生成文章導(dǎo)讀（Table of Contents）導(dǎo)航的 JavaScript 工具。會(huì)自動(dòng)分析文章中的標(biāo)題（ h1~h6 ）標(biāo)簽，并生成文章段落層次結(jié)構(gòu)的導(dǎo)讀導(dǎo)航菜單。

創(chuàng)作靈感

AnchorJS 是 outline.js 的創(chuàng)作靈感來源。既然 AnchorJS 可創(chuàng)建標(biāo)題的鏈接，為什么不直接給文章生成一個(gè)文章導(dǎo)讀（Table of Contents）導(dǎo)航呢？ 于是便有了 outline.js。

特點(diǎn)

• 原生 JavaScript 編寫，無需任何依賴；
• 支持 UMD 規(guī)范；
• 支持 E6 模塊，提供功能獨(dú)立的 ES6 模塊；
  • **Anchors 模塊：**類似 AnchorJS 基礎(chǔ)功能模塊，自動(dòng)分析段落層級(jí)
  • **Drawer 模塊：**獨(dú)立的側(cè)滑窗口模塊
  • **Chapters 模塊：**獨(dú)立的導(dǎo)航菜單模塊；
  • **Toolbar 模塊：**獨(dú)立的固定定位的工具欄模塊；
• 擁有 AnchorJS 基礎(chǔ)功能；
• 支持中文和英文標(biāo)題文字生成ID；
• 支持生成獨(dú)立的側(cè)邊欄導(dǎo)航菜單；
• 支持直接在文章中指定的 DOM 元素內(nèi)生成文章導(dǎo)讀導(dǎo)航(fixed 或者 sticky 布局)；
• 自動(dòng)分析標(biāo)題關(guān)系，生成段落層級(jí)索引值；
• 可以作為 jQuery 插件使用；
• 界面簡(jiǎn)潔大方；
• 配置靈活，豐富，讓你隨心所欲掌控 outline.js；

Examples

outline.js 的支持的滾動(dòng)元素可以是 Window 窗口，也可以是某個(gè) DOM 元素。

窗口滾動(dòng)

• 獨(dú)立側(cè)滑菜單：https://yaohaixiao.github.io/outline.js/relative.html
• WordPress：http://www.yaohaixiao.com/blog/publish-subscribe-pattern-in-javascript/

• sticky 定位：https://yaohaixiao.github.io/outline.js/sticky.html

• fixed 定位：https://yaohaixiao.github.io/outline.js/fixed.html

DOM 元素滾動(dòng)

• flex 布局：https://yaohaixiao.github.io/outline.js/flex.html