-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: 添加 hasToolbar 配置，可以隐藏按钮工具栏；添加 Anchors 模块的独立调用实例；
- Loading branch information
1 parent
f807da0
commit b5ec0d4
Showing
34 changed files
with
344 additions
and
65 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| doctype html | ||
| html(lang='en') | ||
| head | ||
| include ./meta | ||
| title outline.js - 自动生成文章导读（Table of Contents）导航的 JavaScript 工具 | ||
| link(href="css/example.min.css" rel="stylesheet") | ||
| body | ||
| .paper | ||
| header#header.header | ||
| h1.title Outline.js | ||
| article#article.article | ||
| main#main.article__main | ||
| include ./example | ||
| h2 License | ||
| p JavaScript Code Licensed under MIT License. | ||
| p API Documentation Licensed under CC BY 3.0 | ||
| footer.footer | ||
| include ./footer | ||
| script(src="js/anchors.min.js") | ||
| script. | ||
| new Anchors(Anchors.DEFAULTS) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| section.section | ||
| header.section__header | ||
| h3.section__h3 hasToolbar | ||
| div.section__content | ||
| h4.section__h4 Description | ||
| dl.section__dl | ||
| dt.section__dt Type： | ||
| dd.section__dd Boolean | ||
| dl.section__dl | ||
| dt.section__dt Default： | ||
| dd.section__dd true | ||
| p 可选，是否显示侧边的按钮工具栏： | ||
| ul | ||
| li true - 显示按钮工具栏（默认值）； | ||
| li false - 不显示按钮工具栏； |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="keywords" content="outline.js,Automatic Create,Article,Outline,JavaScript,Toolkit"><meta name="description" content="outline.js - 自动生成文章导读（Table of Contents）导航的 JavaScript 工具。会自动分析文章中的标题（ h1~h6 ）标签，并生成文章段落层次结构的导读导航菜单。"><link rel="shortcut icon" href="./favicon.ico"><title>outline.js - 自动生成文章导读（Table of Contents）导航的 JavaScript 工具</title><link href="css/example.min.css" rel="stylesheet"></head><body><div class="paper"><header class="header" id="header"><h1 class="title">Outline.js</h1></header><article class="article" id="article"><main class="article__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><h4>npm install</h4><pre><code>$ npm install -S @yaohaixiao/outline.js</code></pre><h3>CDN 调用</h3><pre><code><script src="https://cdn.jsdelivr.net/gh/yaohaixiao/outline.js/outline.min.js"></script></code></pre><h3>调用本地JS文件</h3><pre><code><script src="path/to/outline.min.js"></script></code></pre><h2>使用说明</h2><p>outline.js 既支持在 node.js 环境中以 CommonJS 模块调用，也支持 ES6 模块方式加载。</p><pre><code>// Node.js 环境中使用 | ||
| const Outline = require('@yaohaixiao/outline.js') | ||
|
|
||
| // 作为 ES6 模块使用 | ||
| import Outline from '@yaohaixiao/outline.js/src/outline' | ||
| // 调用其他独立模块 | ||
| import Anchors from '@yaohaixiao/outline.js/src/anchors' | ||
| import Chapters from '@yaohaixiao/outline.js/src/chapters' | ||
| import Drawer from '@yaohaixiao/outline.js/src/drawer' | ||
| import Toolbar from '@yaohaixiao/outline.js/src/toolbar' | ||
|
|
||
| // 创建 Outline 实例 | ||
| // 2.0.0 调整了配置参数，配置更加简单 | ||
| const outline = new Outline({ | ||
| // 文章显示区域的 DOM 元素或者选择器字符串 | ||
| articleElement: '#article', | ||
| // 要收集的标题选择器 | ||
| selector: 'h2,h3,h4,h5,h6', | ||
| // 负责文章区域滚动的元素 | ||
| // String 类型 - 选择器字符串，默认值：html,body（window窗口） | ||
| // HTMLElement 类型 - DOM 元素 | ||
| scrollElement: 'html,body', | ||
| // 文章导读菜单的位置 | ||
| // relative - （默认值）创建独立的侧滑菜单 | ||
| // sticky - 导航菜单将以 sticky 模式布局（需要确保菜单插入位置支持 sticky 模式布局） | ||
| // fixed - 导航菜单将以 fixed 模式布局，会自动监听滚动位置，模拟 sticky 布局 | ||
| // sticky 和 fixed 布局时，需要设置 parentElement | ||
| // 2.0.0 暂时不支持在文章开始位置插入 chapters 导航菜单 | ||
| position: 'sticky', | ||
| // 设置 position: relative 时，placment 定义侧滑菜单和 toolbar 导航位置： | ||
| // rtl - 菜单位置在窗口右侧，滑动动画为：right to left | ||
| // ltr - 菜单位置在窗口左侧，滑动动画为：left to right | ||
| // ttb - 菜单位置在窗口上方，滑动动画为：top to bottom | ||
| // btt - 菜单位置在窗口下方，滑动动画为：bottom to top | ||
| placement: '', | ||
| // 导航菜单将要插入的位置（DOM 元素） | ||
| // String 类型 - 选择器字符串 | ||
| // HTMLElement 类型 - 插入的 DOM 元素 | ||
| // 仅在 position 设置为 sticky 和 fixed 布局时有效 | ||
| parentElement: '#aside', | ||
| // 是否显示段落章节编号 | ||
| showCode: true, | ||
| // 标题图标链接的 URL 地址 | ||
| // （默认）没有设置定制，点击链接页面滚动到标题位置 | ||
| // 设置了链接地址，则不会滚动定位 | ||
| anchorURL: '', | ||
| // DIYer的福利 | ||
| // 独立侧滑菜单时，customClass 会追加到 drawer 侧滑窗口组件 | ||
| // 在文章中显示导航菜单时，customClass 会追加到 chapters 导航菜单 | ||
| customClass | ||
| }); | ||
|
|
||
| // 可以在创建导航后，重置配置信息，重新生成新的导航 | ||
| Outline.reload({ | ||
| // 调整位直接在文章内生成导航 | ||
| position: 'sticky', | ||
| articleElement: '#article' | ||
| })</code></pre><h2>License</h2><p>JavaScript Code Licensed under MIT License.</p><p>API Documentation Licensed under CC BY 3.0</p></main></article><footer class="footer"><footer class="main__footer" id="footer"><p>Copyright © 2023 <a href="https://github.com/yaohaixiao">Robert Yao</a>, all right reserved.</p><p>Code licensed under <a href="http://opensource.org/licenses/mit-license.html">MIT License</a></p><p>Documentation licensed under | ||
| <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a></p><p><a href="https://github.com/yaohaixiao/outline.js">View on GitHub</a> · | ||
| <a href="https://github.com/yaohaixiao/outline.js/issues">Issues</a></p></footer></footer></div><script src="js/anchors.min.js"></script><script>new Anchors(Anchors.DEFAULTS)</script></body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.