https://github.com/yaohaixiao/outline.js
https://gitee.com/yaohaixiao/outline.js
-sticky 定位：
https://yaohaixiao.github.io/outline.js/examples/sticky.html
-fixed 定位（不显示按钮工具栏）：
https://yaohaixiao.github.io/outline.js/examples/fixed.html
-flex 布局（超长文章）：
https://yaohaixiao.github.io/outline.js/examples/flex.html
---
<!DOCTYPE html>
<!--[if IE 8]>
<html class="ie8 no-js"> <![endif]-->
<!--[if IE 9]>
<html class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html>
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="webkit" name="renderer">
<title>outline.js - 自动生成文章导读（Table of Contents）导航的 JavaScript 工具
</title>
<link href="https://static.htmltoo.com/master/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="https://static.htmltoo.com/master/jquery/main/jquery.min.js"></script>
<link href="https://static.htmltoo.com/master/static/outline/outline.min.css" rel="stylesheet">
</head>
<body>
<div>
<div class="row position-fixed">
<div class="d-flex align-content-center flex-wrap" ><h1>Outline.js Outline.js Outline.js Outline.js Outline.jsOutline.jsOutline.jsOutline.jsOutline.jsOutline.jsOutline.jsOutline.js</h1></div>
</div>
<div>
<div class="h-auto my-5 col col-lg-9 main" id="main">
<p>outline.js - 自动生成文章导读（Table of Contents）导航的 JavaScript 工具。会自动分析文章中的标题（ h1~h6 ）标签，并生成文章段落层次结构的导读导航菜单。
</p><h2>创作灵感</h2>
<p>AnchorJS 是 outline.js 的创作灵感来源。既然 AnchorJS 可创建标题的链接，为什么不直接给文章生成一个文章导读（Table of Contents）导航呢？ 于是就有了outline.js。
</p><h2>特点</h2>
<ul>
<li>原生 JavaScript 编写，无需任何依赖；
</li>
<li>支持 UMD 规范；
</li>
<li>支持 E6 模块，提供功能独立的 ES6 模块；
<ul>
<li>Anchors 模块：类似 AnchorJS 基础功能模块，自动分析段落层级;
</li>
<li>Drawer 模块：独立的侧滑窗口模块;
</li>
<li>Chapters 模块：独立的导航菜单模块；
</li>
<li>Toolbar 模块：独立的固定定位的工具栏模块；
</li>
</ul>
</li>
<li>拥有 AnchorJS 基础功能；
</li>
<li>支持中文和英文标题文字生成ID；
</li>
<li>支持生成独立的侧边栏导航菜单；
</li>
<li>支持直接在文章中生成文章导读导航；
</li>
<li>自动分析标题关系，生成段落层级索引值；
</li>
<li>可以作为 jQuery 插件使用；
</li>
<li>界面简洁大方；
</li>
<li>配置灵活，丰富，让你随心所欲掌控 outline.js；
</li>
</ul><h2>安装说明</h2>
<p>outline.js 提供多种安装方式的支持： npm 安装、加载 CDN 资源、以及本地资源调用。
</p>
</p><h2>特点</h2>
<ul>
<li>原生 JavaScript 编写，无需任何依赖；
</li>
<li>支持 UMD 规范；
</li>
<li>支持 E6 模块，提供功能独立的 ES6 模块；
<ul>
<li>Anchors 模块：类似 AnchorJS 基础功能模块，自动分析段落层级;
</li>
<li>Drawer 模块：独立的侧滑窗口模块;
</li>
<li>Chapters 模块：独立的导航菜单模块；
</li>
<li>Toolbar 模块：独立的固定定位的工具栏模块；
</li>
</ul>
</li>
<li>拥有 AnchorJS 基础功能；
</li>
<li>支持中文和英文标题文字生成ID；
</li>
<li>支持生成独立的侧边栏导航菜单；
</li>
<li>支持直接在文章中生成文章导读导航；
</li>
<li>自动分析标题关系，生成段落层级索引值；
</li>
<li>可以作为 jQuery 插件使用；
</li>
<li>界面简洁大方；
</li>
<li>配置灵活，丰富，让你随心所欲掌控 outline.js；
</li>
</ul><h2>安装说明</h2>
<p>outline.js 提供多种安装方式的支持： npm 安装、加载 CDN 资源、以及本地资源调用。
</p>
</p><h2>特点</h2>
<ul>
<li>原生 JavaScript 编写，无需任何依赖；
</li>
<li>支持 UMD 规范；
</li>
<li>支持 E6 模块，提供功能独立的 ES6 模块；
<ul>
<li>Anchors 模块：类似 AnchorJS 基础功能模块，自动分析段落层级;
</li>
<li>Drawer 模块：独立的侧滑窗口模块;
</li>
<li>Chapters 模块：独立的导航菜单模块；
</li>
<li>Toolbar 模块：独立的固定定位的工具栏模块；
</li>
</ul>
</li>
<li>拥有 AnchorJS 基础功能；
</li>
<li>支持中文和英文标题文字生成ID；
</li>
<li>支持生成独立的侧边栏导航菜单；
</li>
<li>支持直接在文章中生成文章导读导航；
</li>
<li>自动分析标题关系，生成段落层级索引值；
</li>
<li>可以作为 jQuery 插件使用；
</li>
<li>界面简洁大方；
</li>
<li>配置灵活，丰富，让你随心所欲掌控 outline.js；
</li>
</ul><h2>安装说明</h2>
<p>outline.js 提供多种安装方式的支持： npm 安装、加载 CDN 资源、以及本地资源调用。
</p>
</div>
<div class="col col-lg-3 d-lg-block aside" id="aside">
</div>
</div>
<div class="row fixed-bottom">
<footer class="footer mt-5">
<footer class="align-middle text-center mt-2" id="footer">
<p>Copyright © 2023
</footer>
</footer>
</div>
</div>
<script src="https://static.htmltoo.com/master/static/outline/outline.min.js"></script>
<script>const defaults = Outline.DEFAULTS
let outline
defaults.position = 'sticky'
defaults.stickyHeight = '90'
defaults.articleElement='#main'
defaults.parentElement = '#aside'
defaults.animationCurrent = 'false'
defaults.hasToolbar = 'true'
defaults.homepage = '../index.html'
defaults.selector = 'h1,h2,h3,h4,h5,h6'
outline = new Outline(defaults)
</script>
<script src="https://static.htmltoo.com/master/bootstrap/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
---
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Outline.js</title>
<link href="https://cdn.jsdelivr.net/gh/yaohaixiao/outline.js/outline.min.css" rel="stylesheet" />
</head>
<body>
<main>
<!--这里 outline.js 会生成导航菜单-->
<aside id="aside">
</aside>
<article id="article">
---文章内容---
<h1>Outline.js</h1>
<p>xxx</p>
<h2>Features</h2>
<p>xxx</p>
<h2>Usage</h2>
<p>xxx</p>
<h2>Examples</h2>
<p>xxx</p>
---文章内容---
</article>
</main>
<script src="https://cdn.jsdelivr.net/gh/yaohaixiao/outline.js/outline.min.js"></script>
<script>
(function(){
const defaults = Outline.DEFAULTS
let outline
defaults.position = 'flex'
defaults.stickyHeight = 86
// position 的值为 sticky 或者 fixed 时需要指定
// parentElement 参数，即文章导航菜单插入的 DOM 位置
// 可以时 dom 元素，也可以是 DOM 元素的选择器字符串
defaults.parentElement = '#aside'
defaults.articleElement = '#article'
defaults.homepage = './index.html'
// Outline.DEFAULTS 是对象，应用类型的
// defaults 的属性操作，就是在修改 Outline.DEFAULTS
outline = new Outline(Outline.DEFAULTS)
})()
</script>
</body>
</html>
签名：这个人很懒，什么也没有留下！
