feat: 添加 tools 配置添加自定义按钮配置；添加 addButton() 和 removeButton() 两个方法，用来在工具…

…栏添加按钮或者移除工具栏按钮

api/less/section.less

@@ -30,28 +30,26 @@
     color: @fourth_text_color;
   }
 
+  &__dl,
+  &__dt,
+  &__dd {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
   &__dl {
     position: relative;
     z-index: 1;
-    overflow: hidden;
   }
 
   &__dt {
-    position: absolute;
-    z-index: 2;
-    top: 0;
-    left: 0;
-    width: 60px;
-    margin: 0;
-    overflow: hidden;
+    display:inline-block;
   }
 
   &__dd {
-    position: relative;
-    z-index: 1;
-    margin: 0 0 0 60px;
+    display:inline-block;
     color: @success_color;
-    overflow: hidden;
   }
 
   &__pre {

api/pug/fixed.pug

@@ -22,7 +22,7 @@ html(lang='en')
         include ./footer
     script(src="js/outline.min.js")
     script.
-        const $header = document.querySelector('#header')
+      const $header = document.querySelector('#header')
         const HEADER_STICKY = 'header_sticky'
         const defaults = Outline.DEFAULTS
         let outline

api/pug/methods.pug

@@ -28,6 +28,8 @@ ul.aside__list
     a.aside__anchor(href="#option-tags") tags
   li.aside__item
     a.aside__anchor(href="#option-issues") issues
+  li.aside__item
+    a.aside__anchor(href="#option-tools") tools
   li.aside__item
     a.aside__anchor(href="#option-customClass") customClass
   li.aside__item
@@ -42,6 +44,8 @@ ul.aside__list
     a.aside__anchor(href="#property-defaults") DEFAULTS
   li.aside__item
     a.aside__anchor(href="#property-attrs") attrs
+  li.aside__item
+    a.aside__anchor(href="#property-buttons") buttons
   li.aside__item
     a.aside__anchor(href="#property-anchors") anchors
   li.aside__item
@@ -58,6 +62,10 @@ ul.aside__list
     a.aside__anchor(href="#method-getChapters") getChapters()
   li.aside__item
     a.aside__anchor(href="#method-count") count()
+  li.aside__item
+    a.aside__anchor(href="#method-addButton") addButton()
+  li.aside__item
+    a.aside__anchor(href="#method-removeButton") removeButton()
   li.aside__item
     a.aside__anchor(href="#method-toTop") toTop()
   li.aside__item

api/pug/methods/addButton.pug

@@ -0,0 +1,45 @@
+section.section
+  header.section__header
+    h3#method-addButton.section__h3 addButton(button)
+  div.section__content
+    h4.section__h4 Description
+    p addButton() 方法添加自定义的工具栏按钮。
+    h4.section__h4 Parameters
+    h5.section__h4 button
+    dl.section__dl
+      dt.section__dt Type：
+      dd.section__dd Object|Array
+    p （必须）单个按钮的配置信息或者多个按钮的配置信息。
+    h4.section__h4 Returns
+    dl.section__dl
+      dt.section__dt Type：
+      dd.section__dd Outline
+    p Outline 对象，便于链式方法调用。
+    pre.section__pre
+      code.section__code.
+        const outline = new Outline(Outline.DEFAULTS)
+        // 如果需要其它图标，可以到 https://github.com/yaohaixiao/icons.toolkit.vue 项目中选择需要的图标资源
+        const clean = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 1024 1024">' +
+          '<path d="M704 32V320h288a32 32 0 0 1 32 32v320a32 32 0 0 1-32 32H32a32 32 0 0 1-32-32v-320A32 32 0 0 1 32 320H320V32a32 32 0 0 1 32-32h320a32 32 0 0 1 32 32zM576 128H448v320H128v128h768V448H576V128z"></path>' +
+          '<path d="M896 576v416a32 32 0 0 1-32 32h-704a32 32 0 0 1-32-32V576h768z m-128 128H256v192h512v-192z"></path>' +
+          '</svg>'
+
+        outline.addButton({
+          name: 'clean',
+          // 图标
+          icon: clean,
+          size: 20,
+          color: '#f00'
+          // link 指定按钮点击后页面的跳转地址
+          link: 'https://github.com/yaohaixiao',
+          // link 和 action 只能二选一
+          // action 指定按钮的处理方式
+          action: {
+            type: 'click',
+            // 指定回调函数的 this 上下文，不设置 this 指向 toolbar 组件
+            context: outline,
+            handler: function() {
+              // 回调函数的处理逻辑
+            }
+          }
+        })

api/pug/methods/removeButton.pug

@@ -0,0 +1,49 @@
+section.section
+  header.section__header
+    h3#method-removeButton.section__h3 removeButton(name)
+  div.section__content
+    h4.section__h4 Description
+    p removeButton() 方法移除工具栏按钮。
+    h4.section__h4 Parameters
+    h5.section__h4 name
+    dl.section__dl
+      dt.section__dt Type：
+      dd.section__dd String
+    p （必须）按钮名称。
+    h4.section__h4 Returns
+    dl.section__dl
+      dt.section__dt Type：
+      dd.section__dd Outline
+    p Outline 对象，便于链式方法调用。
+    pre.section__pre
+      code.section__code.
+        const outline = new Outline(Outline.DEFAULTS)
+        // 如果需要其它图标，可以到 https://github.com/yaohaixiao/icons.toolkit.vue 项目中选择需要的图标资源
+        const clean = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 1024 1024">' +
+          '<path d="M704 32V320h288a32 32 0 0 1 32 32v320a32 32 0 0 1-32 32H32a32 32 0 0 1-32-32v-320A32 32 0 0 1 32 320H320V32a32 32 0 0 1 32-32h320a32 32 0 0 1 32 32zM576 128H448v320H128v128h768V448H576V128z"></path>' +
+          '<path d="M896 576v416a32 32 0 0 1-32 32h-704a32 32 0 0 1-32-32V576h768z m-128 128H256v192h512v-192z"></path>' +
+          '</svg>'
+
+        outline.addButton({
+          name: 'clean',
+          // 图标
+          icon: clean,
+          size: 20,
+          color: '#f00'
+          // link 指定按钮点击后页面的跳转地址
+          link: 'https://github.com/yaohaixiao',
+          // link 和 action 只能二选一
+          // action 指定按钮的处理方式
+          action: {
+            type: 'click',
+            // 指定回调函数的 this 上下文，不设置 this 指向 toolbar 组件
+            context: outline,
+            handler: function() {
+              // 回调函数的处理逻辑
+            }
+          }
+        })
+
+        setTimeout(() => {
+          outline.addButton('clean')
+        }, 5000)

api/pug/methods/section.pug

@@ -6,6 +6,8 @@ section.section
   include attr
   include getChapters
   include count
+  include addButton
+  include removeButton
   include toTop
   include toBottom
   include scrollTo

api/pug/options/section.pug

@@ -16,6 +16,7 @@ section.section
   include git
   include tags
   include issues
+  include tools
   include customClass
   include afterScroll
   include afterSticky

api/pug/options/tools.pug

@@ -0,0 +1,46 @@
+section.section
+  header.section__header
+    h3#option-tools.section__h3 tools
+  div.section__content
+    h4.section__h4 Description
+    dl.section__dl
+      dt.section__dt Type：
+      dd.section__dd Array
+    dl.section__dl
+      dt.section__dt Default：
+      dd.section__dd []
+    p 可选，自定义的按钮配置项。tools 中的按钮会排列显示在 homepage, git, tags, issues 等按钮之后。
+    pre.section__pre
+      code.section__code.
+        const outline = new Outline(Outline.DEFAULTS)
+        // 如果需要其它图标，可以到 https://github.com/yaohaixiao/icons.toolkit.vue 项目中选择需要的图标资源
+        const clean = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 1024 1024">' +
+          '<path d="M704 32V320h288a32 32 0 0 1 32 32v320a32 32 0 0 1-32 32H32a32 32 0 0 1-32-32v-320A32 32 0 0 1 32 320H320V32a32 32 0 0 1 32-32h320a32 32 0 0 1 32 32zM576 128H448v320H128v128h768V448H576V128z"></path>' +
+          '<path d="M896 576v416a32 32 0 0 1-32 32h-704a32 32 0 0 1-32-32V576h768z m-128 128H256v192h512v-192z"></path>' +
+          '</svg>'
+
+        // 侧边栏的 Toolbar 会多出一个 git 图标的按钮
+        outline.reload({
+          git: 'https://github.com/yaohaixiao/outline.js',
+          tools: [
+            {
+              name: 'clean',
+              // 图标
+              icon: clean,
+              size: 20,
+              color: '#f00'
+              // link 指定按钮点击后页面的跳转地址
+              link: 'https://github.com/yaohaixiao',
+              // link 和 action 只能二选一
+              // action 指定按钮的处理方式
+              action: {
+                type: 'click',
+                // 指定回调函数的 this 上下文，不设置 this 指向 toolbar 组件
+                context: outline,
+                handler: function() {
+                  // 回调函数的处理逻辑
+                }
+              }
+            }
+          ]
+        })

api/pug/properties/buttons.pug

@@ -0,0 +1,17 @@
+section.section
+  header.section__header
+    h3#property-buttons.section__h3 buttons
+  div.section__content
+    h4.section__h4 Description
+    dl.section__dl
+      dt.section__dt Type：
+      dd.section__dd Array
+    p 存储的是 Outline 对象当前工具栏的完整的按钮配置信息：
+    pre.section__pre
+      code.section__code.
+        // 设置默认配置项
+        const outline = new Outline(Outline.DEFAULTS)
+
+        // 查看全部按钮配置信息
+        outline.buttons
+

api/pug/properties/section.pug

@@ -5,6 +5,7 @@ section.section
     p outline.js 重构后，对外放 4 个重要的属性：anchors、drawer、chapters 和 toolbar。它们都是独立的对象实例，提供了 outline.js 所有的能力（属性和方法）。
   include DEFAULTS
   include attrs
+  include buttons
   include anchors
   include chapters
   include drawer