Outline.js 使用教程
1、项目介绍
Outline.js 是一个用于自动生成文章导读(Table of Contents)导航的 JavaScript 工具。它能够自动分析文章中的标题(h1~h6)标签,并生成文章段落层次结构的导读导航菜单。Outline.js 使用原生 JavaScript 编写,无需任何依赖,支持 UMD 规范和 ES6 模块,提供了多个功能独立的模块,如 Anchors 模块、Drawer 模块、Navigator 模块和 Toolbar 模块。
2、项目快速启动
安装
你可以通过 npm 安装 Outline.js:
npm install @yaohaixiao/outline.js
引入
在你的项目中引入 Outline.js:
import Outline from '@yaohaixiao/outline.js/outline';
使用
在你的 HTML 文件中添加以下代码:
<!DOCTYPE html>
<html lang="en">
<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>
<aside id="aside"></aside>
<article id="article">
<h1>Outline.js</h1>
<p>这是一个示例文章。</p>
<h2>功能</h2>
<p>Outline.js 的功能包括自动生成文章导读导航。</p>
<h2>使用方法</h2>
<p>通过引入和初始化 Outline.js 来使用。</p>
</article>
</main>
<script src="https://cdn.jsdelivr.net/gh/yaohaixiao/outline.js/outline.min.js"></script>
<script>
new Outline({
articleElement: '#article',
asideElement: '#aside'
});
</script>
</body>
</html>
3、应用案例和最佳实践
案例一:独立侧滑菜单
在文章侧边生成一个独立的侧滑菜单:
<aside id="aside"></aside>
<article id="article">
<h1>Outline.js</h1>
<p>这是一个示例文章。</p>
<h2>功能</h2>
<p>Outline.js 的功能包括自动生成文章导读导航。</p>
<h2>使用方法</h2>
<p>通过引入和初始化 Outline.js 来使用。</p>
</article>
<script>
new Outline({
articleElement: '#article',
asideElement: '#aside',
position: 'relative'
});
</script>
案例二:固定定位的工具栏
在文章顶部生成一个固定定位的工具栏:
<article id="article">
<h1>Outline.js</h1>
<p>这是一个示例文章。</p>
<h2>功能</h2>
<p>Outline.js 的功能包括自动生成文章导读导航。</p>
<h2>使用方法</h2>
<p>通过引入和初始化 Outline.js 来使用。</p>
</article>
<script>
new Outline({
articleElement: '#article',
position: 'fixed'
});
</script>
4、典型生态项目
生态项目一:Outline.js 的 Vue 集成
在 Vue 项目中使用 Outline.js:
import Outline from '@yaohaixiao/outline.js/outline';
export default {
data() {
return {
outline: null
};
},
mounted() {
this.$nextTick(() => {
this.outline = new Outline({
articleElement: '#article',
asideElement: '#aside'
});
});
},
beforeDestroy() {
if (this.outline) {
this.outline.destroy();