feat: 调整 getChapters() 方法，可以获取树结构的数据；添加 homepage 配置参数；调整 Toolbar 按钮样式；

yaohaixiao · Jul 21, 2023 · b6193de · b6193de
1 parent 2a8f528
commit b6193de
Show file tree

Hide file tree

Showing 83 changed files with 2,311 additions and 351 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 [![npm version](https://img.shields.io/npm/v/@yaohaixiao/outline.js)](https://www.npmjs.com/package/@yaohaixiao/outline.js)
 [![Github file size](https://img.shields.io/github/size/yaohaixiao/outline.js/outline.min.js.svg)](https://github.com/yaohaixiao/outline.js/blob/master/outline.min.js)
 [![prettier code style](https://img.shields.io/badge/code_style-prettier-07b759.svg)](https://prettier.io)
-[![Coverage](https://codecov.io/gh/yaohaixiao/outline.js/branch/main/graph/badge.svg)](https://codecov.io/gh/yaohaixiao/outline.js)
+[![Coverage](https://codecov.io/gh/yaohaixiao/outline.js/branch/master/graph/badge.svg)](https://codecov.io/gh/yaohaixiao/outline.js)
 [![npm downloads](https://img.shields.io/npm/dm/@yaohaixiao/outline.js)](https://npmcharts.com/compare/@yaohaixiao/outline.js?minimal=true)
 [![MIT License](https://img.shields.io/github/license/yaohaixiao/outline.js.svg)](https://github.com/yaohaixiao/outline.js/blob/master/LICENSE)
 
@@ -130,6 +130,8 @@ const outline = new Outline({
     // （默认）没有设置定制，点击链接页面滚动到标题位置
     // 设置了链接地址，则不会滚动定位
     anchorURL: '',
+    // 指定当前站点主页地址
+    homepage: '',
     // DIYer的福利
     // 独立侧滑菜单时，customClass 会追加到 drawer 侧滑窗口组件
     // 在文章中显示导航菜单时，customClass 会追加到 chapters 导航菜单
@@ -270,6 +272,17 @@ Default: `''`
 * '' - 点击链接页面滚动到标题位置（默认值）；
 * 其它 URL 值 - 就直接跳转到指定页面了；
 
+### homepage
+
+Type: `String`
+
+Default: `''`
+
+可选，用来指定当前站点的主页链接地址：
+
+* '' - 不会创建 Homepage 按钮（默认值）；
+* 其它 URL 值 - 不会创建 Homepage 按钮，点按钮就直接跳转到指定页面了；
+
 
 ### customClass
 
@@ -306,6 +319,7 @@ Outline.DEFAULTS = {
   placement: 'rtl',
   showCode: true,
   anchorURL: '',
+  homepage: '',
   customClass: ''
 }
 ```
@@ -382,10 +396,22 @@ Type: `Any`
 Outline 对象，以便实现链式调用。
 
 
-### getChapters()
+### getChapters([isTreeStructured])
 
 返回 outline.js 分析后的文章段落信息数据。
 
+#### Parameters
+
+##### isTreeStructured
+
+Type: `Boolean`
+Default: `false`
+
+（可选）是否为树结构的数据。
+
+* false: (默认值）输出打平的一维数组格式数据；
+* true: 输出树结构格式的数据；
+
 #### Returns
 
 Type: `Outline`

diff --git a/TODO.md b/TODO.md
diff --git a/anchors.min.js b/anchors.min.js
diff --git a/anchors.min.js.map b/anchors.min.js.map
diff --git a/api/less/example.less b/api/less/example.less
@@ -38,9 +38,19 @@
     padding: 0 2em;
     overflow: hidden;
 
-    .section__header,
-    .section__content {
-      margin: 0;
+    .section {
+      overflow: visible;
+
+      &__content,
+      &__footer,
+      &__header {
+        overflow: visible;
+      }
+
+      &__header,
+      &__content {
+        margin: 0;
+      }
     }
   }
 
@@ -55,15 +65,18 @@
   }
 }
 
-pre {
+pre,
+.section__pre {
   padding: 2em;
-  background-color: @bg_color;
   font-family: "Courier New", Arial, sans-serif;
+  background-color: @bg_color;
   overflow: auto;
 }
 
-code {
-  font-size: 14px;
+code,
+.section__code {
+  font-family: "Courier New", Arial, sans-serif;
+  font-size: 16px;
 }
 
 .footer {

diff --git a/api/pug/example.pug b/api/pug/example.pug
@@ -38,75 +38,79 @@ html(lang='en')
           h2 安装说明
           p outline.js 提供多种安装方式的支持： npm 安装、加载 CDN 资源、以及本地资源调用。
           h3 npm install
-          pre.
-            $ npm install -S @yaohaixiao/outline.js
+          pre
+            code.
+              $ npm install -S @yaohaixiao/outline.js
           h3 CDN 调用
-          pre.
-            &lt;script&nbsp;src=&quot;https://cdn.jsdelivr.net/gh/yaohaixiao/outline.js/subscribers.min.js&quot;&gt;&lt;/script&gt;
+          pre
+            code.
+              &lt;script&nbsp;src=&quot;https://cdn.jsdelivr.net/gh/yaohaixiao/outline.js/subscribers.min.js&quot;&gt;&lt;/script&gt;
           h3 调用本地JS文件
-          pre.
-            &lt;script&nbsp;src=&quot;path/to/outline.min.js&quot;&gt;&lt;/script&gt;
+          pre
+            code.
+              &lt;script&nbsp;src=&quot;path/to/outline.min.js&quot;&gt;&lt;/script&gt;
           h2 使用说明
           p outline.js 既支持在 node.js 环境中以 CommonJS 模块调用，也支持 ES6 模块方式加载。
-          pre.
-            // Node.js 环境中使用
-            const Outline = require('@yaohaixiao/outline.js')
+          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'
+              // 作为 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 实例
+              // 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'
-            })
+              // 可以在创建导航后，重置配置信息，重新生成新的导航
+              Outline.reload({
+                // 调整位直接在文章内生成导航
+                position: 'sticky',
+                articleElement: '#article'
+              })
           include ./options/section
           include ./properties/section
           include ./methods/section
@@ -117,4 +121,8 @@ html(lang='en')
         include ./footer
     script(src="js/outline.min.js")
     script.
-        const outline = new Outline(Outline.DEFAULTS)
+        const defaults = Outline.DEFAULTS
+        let outline
+
+        defaults.homepage = './index.html'
+        outline = new Outline(Outline.DEFAULTS)
diff --git a/api/pug/methods.pug b/api/pug/methods.pug
@@ -18,6 +18,8 @@ ul.aside__list
     a.aside__anchor(href="#option-showCode") showCode
   li.aside__item
     a.aside__anchor(href="#option-anchorURL") anchorURL
+  li.aside__item
+    a.aside__anchor(href="#option-homepage") homepage
   li.aside__item
     a.aside__anchor(href="#option-customClass") customClass
 h3.aside__h3 Properties

diff --git a/api/pug/methods/count.pug b/api/pug/methods/count.pug
@@ -9,8 +9,8 @@ section.section
       dt.section__dt Type：
       dd.section__dd Number
     p outline.js 分析的 chapters 数据数量。
-    pre.api-code
-      code.
+    pre.section__pre
+      code.section__code.
           const outline = new Outline({
              article: '#article',
              title: 'Outline v2.0.0'