建站技术分享网

outline.js - 自动生成文章导读（Table of Contents）导航的 JavaScript 工具。会自动分析文章中的标题（ h1~h6 ）标签，并生成文章段落层次结构的导读导航菜单。

创作灵感

AnchorJS 是 outline.js 的创作灵感来源。既然 AnchorJS 可创建标题的链接，为什么不直接给文章生成一个文章导读（Table of Contents）导航呢？ 于是便有了 outline.js。

特点

• 原生 JavaScript 编写，无需任何依赖；
• 支持 UMD 规范；
• 支持 E6 模块，提供功能独立的 ES6 模块；
  • Anchors 模块：类似 AnchorJS 基础功能模块，自动分析段落层级
  • Drawer 模块：独立的侧滑窗口模块
  • Navigator 模块：独立的导航菜单模块；
  • Toolbar 模块：独立的固定定位的工具栏模块；
• 拥有 AnchorJS 基础功能；
• 支持中文和英文标题文字生成ID，并提供配置参数 anchorLinkFilter 提供独立的回调函数生成语义化的 ID；
• 支持生成独立的侧边栏导航菜单；
• 支持直接在文章中指定的 DOM 元素内生成文章导读导航(fixed 或者 sticky 布局)；
• 自动分析标题关系，生成段落层级索引值和章节索引编码；
• 支持配置自定义工具栏按钮和按钮的回调函数；
  • 支持针对（github 项目的）API 文档的 tags 和 issues 等按钮的跳转；
  • 支持自定义图标的自定义按钮，并且支持配置自定义按钮的触发事件和事件处理器；
• 自动为文章页面添加通用的打印样式；
• （在配置打印样式后）有纯净的阅读视图（按ESC键可退出），并引入 Web Speech API 提供自动语音阅读功能；
• 阅读模式引入 scroll-timeline-name 和 animation-timeline 实现动画显示文章阅读进度；
• 针对超长文章，采用 time slice 机制生成导航菜单，充分优化性能；
• 可以作为 jQuery 插件使用；
• 界面简洁大方；
• 配置灵活，丰富，让你随心所欲掌控 outline.js；

说明：outline.js 的 Wiki 中介绍了实现自动计算段落层次的算法

Examples

outline.js 的支持的滚动元素可以是 Window 窗口，也可以是某个 DOM 元素。