feat: 添加 print 配置，支持 print 基础打印样式

README.md

@@ -201,7 +201,7 @@ const outline = new Outline({
     // ltr - 菜单位置在窗口左侧，滑动动画为：left to right
     // ttb - 菜单位置在窗口上方，滑动动画为：top to bottom
     // btt - 菜单位置在窗口下方，滑动动画为：bottom to top
-    placement: '',
+    placement: 'rtl',
     // 页面中其它 sticky 或者模拟 skicky 的 fiexed 定位的 DOM 元素的高度。例如 wordpress 系统中，
     // 就会有 sticky 定位的导航菜单。这些 sticky 元素脱离了正常的流布局后，原来 h1~h6 标题标签的 
     // offsetTop 计算会出现偏差。sticky 元素会遮挡标题，因此针对页面中有其它 sticky 元素会遮挡标题，
@@ -224,10 +224,24 @@ const outline = new Outline({
     tags: '',
     // 指定git仓库中的 issues 地址
     issues: '',
+    // 自定义按钮配置
+    tools: [],
+    // 为文章页添加基础的打印样式
+    // 如果您的页面已经有打印样式，就无需设置了
+    print: {
+      element: '',
+      title: ''
+    },
     // DIYer的福利
     // 独立侧滑菜单时，customClass 会追加到 drawer 侧滑窗口组件
     // 在文章中显示导航菜单时，customClass 会追加到 chapters 导航菜单
-    customClass
+    customClass,
+    // position: fixed，当导航菜单样式进入 fixed 定位后，触发的回调函数
+    afterSticky: null,
+    // 当导航菜单隐藏或者显示后，触发的回调函数
+    afterToggle: null,
+    // 当点击上下滚动按钮，导航菜单或者文章中的 # 图标，滚动结束后触发的回调函数
+    afterScroll: null
 });
 
 // 可以在创建导航后，重置配置信息，重新生成新的导航
@@ -442,11 +456,20 @@ Outline.DEFAULTS = {
   placement: 'rtl',
   showCode: true,
   anchorURL: '',
+  stickyHeight: 0,
   homepage: '',
   git: '',
   tags: '',
   issues: '',
-  customClass: ''
+  tools: [],
+  print: {
+    element: '',
+    title: ''
+  },
+  customClass: '',
+  afterSticky: null,
+  afterToggle: null,
+  afterScroll: null
 }
 ```
 

api/less/example.less

@@ -9,5 +9,4 @@
 @import '../../src/theme/anchors';
 @import '../../src/theme/chapters';
 @import '../../src/theme/toolbar';
-
-
+@import '../../src/theme/print';

api/pug/flex.pug

@@ -41,4 +41,8 @@ html(lang='en')
         defaults.git = 'https://github.com/yaohaixiao/outline.js'
         defaults.tags = 'https://github.com/yaohaixiao/outline.js/tags'
         defaults.issues = 'https://github.com/yaohaixiao/outline.js/issues'
+        defaults.print = {
+          element: '#article',
+          title: 'Outline.js 自动生成文章导读（Table of Contents）导航的 JavaScript 工具'
+        }
         outline = new Outline(Outline.DEFAULTS)

api/pug/methods.pug

@@ -30,6 +30,8 @@ ul.aside__list
     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-print") print
   li.aside__item
     a.aside__anchor(href="#option-customClass") customClass
   li.aside__item

api/pug/options/print.pug

@@ -0,0 +1,38 @@
+section.section
+  header.section__header
+    h3#option-print.section__h3 print
+  div.section__content
+    h4.section__h4 Description
+    dl.section__dl
+      dt.section__dt Type：
+      dd.section__dd Object
+    dl.section__dl
+      dt.section__dt Default：
+      dd.section__dd {element: '', title: ''}
+    p 可选，自定义的是否自动为文章页面创建打印样式。
+    dl.section__dl
+      dt.section__dt element：
+      dd.section__dd （必须）要打印的文章区域，DOM 元素或者选择器字符串。
+    dl.section__dl
+      dt.section__dt title：
+      dd.section__dd （可选）要打印的文章标题。如果 element 区域有 h1 标签则无需设置。
+    pre.section__pre
+      code.section__code.
+        const defaults = Outline.DEFAULTS
+        let outline
+
+        defaults.position = 'sticky'
+        defaults.stickyHeight = 86
+        defaults.parentElement = '#aside'
+        defaults.scrollElement = '#main'
+        defaults.homepage = './index.html'
+        defaults.git = 'https://github.com/yaohaixiao/outline.js'
+        defaults.tags = 'https://github.com/yaohaixiao/outline.js/tags'
+        defaults.issues = 'https://github.com/yaohaixiao/outline.js/issues'
+        defaults.print = {
+          element: '#article',
+          title: 'Outline.js 自动生成文章导读（Table of Contents）导航的 JavaScript 工具'
+        }
+        outline = new Outline(Outline.DEFAULTS)
+    p 演示地址：
+      a(target="_blank" href="https://yaohaixiao.github.io/outline.js/flex.html") https://yaohaixiao.github.io/outline.js/flex.html

api/pug/options/section.pug

@@ -17,6 +17,7 @@ section.section
   include tags
   include issues
   include tools
+  include print
   include customClass
   include afterScroll
   include afterSticky

api/pug/properties/defaults.pug

@@ -11,18 +11,26 @@ section.section
       code.section__code.
         Outline.DEFAULTS = {
           articleElement: '#article',
-          selector: 'h2,h3,h4,h5,h6',
-          title: '目录',
-          scrollElement: 'html,body',
-          position: 'relative',
-          parentElement: '#aside',
-          placement: 'rtl',
-          stickyHeight: 0,
-          showCode: true,
-          anchorURL: '',
-          homepage: '',
-          git: '',
-          tags: '',
-          issues: '',
-          customClass: ''
+            selector: 'h2,h3,h4,h5,h6',
+            title: '目录',
+            scrollElement: 'html,body',
+            position: 'relative',
+            parentElement: '#aside',
+            placement: 'rtl',
+            showCode: true,
+            anchorURL: '',
+            stickyHeight: 0,
+            homepage: '',
+            git: '',
+            tags: '',
+            issues: '',
+            tools: [],
+            print: {
+              element: '',
+              title: ''
+            },
+            customClass: '',
+            afterSticky: null,
+            afterToggle: null,
+            afterScroll: null
         }

docs/fixed.html

@@ -150,7 +150,22 @@
       }
     }
   ]
-})</code></pre></div></section><section class="section"><header class="section__header"><h3 class="section__h3" id="option-customClass">customClass</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">String</dd></dl><dl class="section__dl"><dt class="section__dt">Default：</dt><dd class="section__dd">''</dd></dl><p>可选，(DIYer福利)设置自定义样式的 class 名称：</p><ul><li>'' - 采用默认 outline.js 的 UI 界面（默认值）；</li><li>设置自定义样式 - 自己根据需求设置个性化的 UI 界面；</li></ul><pre class="section__pre"><code class="section__code">// Default UI
+})</code></pre></div></section><section class="section"><header class="section__header"><h3 class="section__h3" id="option-print">print</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">Object</dd></dl><dl class="section__dl"><dt class="section__dt">Default：</dt><dd class="section__dd">{element: '', title: ''}</dd></dl><p>可选，自定义的是否自动为文章页面创建打印样式。</p><dl class="section__dl"><dt class="section__dt">element：</dt><dd class="section__dd">（必须）要打印的文章区域，DOM 元素或者选择器字符串。</dd></dl><dl class="section__dl"><dt class="section__dt">title：</dt><dd class="section__dd">（可选）要打印的文章标题。如果 element 区域有 h1 标签则无需设置。</dd></dl><pre class="section__pre"><code class="section__code">const defaults = Outline.DEFAULTS
+let outline
+
+defaults.position = 'sticky'
+defaults.stickyHeight = 86
+defaults.parentElement = '#aside'
+defaults.scrollElement = '#main'
+defaults.homepage = './index.html'
+defaults.git = 'https://github.com/yaohaixiao/outline.js'
+defaults.tags = 'https://github.com/yaohaixiao/outline.js/tags'
+defaults.issues = 'https://github.com/yaohaixiao/outline.js/issues'
+defaults.print = {
+  element: '#article',
+  title: 'Outline.js 自动生成文章导读（Table of Contents）导航的 JavaScript 工具'
+}
+outline = new Outline(Outline.DEFAULTS)</code></pre><p>演示地址：<a target="_blank" href="https://yaohaixiao.github.io/outline.js/flex.html">https://yaohaixiao.github.io/outline.js/flex.html</a></p></div></section><section class="section"><header class="section__header"><h3 class="section__h3" id="option-customClass">customClass</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">String</dd></dl><dl class="section__dl"><dt class="section__dt">Default：</dt><dd class="section__dd">''</dd></dl><p>可选，(DIYer福利)设置自定义样式的 class 名称：</p><ul><li>'' - 采用默认 outline.js 的 UI 界面（默认值）；</li><li>设置自定义样式 - 自己根据需求设置个性化的 UI 界面；</li></ul><pre class="section__pre"><code class="section__code">// Default UI
 new Outline(Outline.DEFAULTS)
 
 // Customized
@@ -256,20 +271,28 @@
 }
 outline = new Outline(Outline.DEFAULTS)</code></pre></div></section></section><section class="section"><header class="section__header"><h2 class="section__title">Properties</h2></header><div class="section__content"><p>outline.js 重构后，对外放 4 个重要的属性：anchors、drawer、chapters 和 toolbar。它们都是独立的对象实例，提供了 outline.js 所有的能力（属性和方法）。</p></div><section class="section"><header class="section__header"><h3 class="section__h3" id="property-defaults">DEFAULTS</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="api-param-value">Object</dd></dl><p>静态属性，存储的是 Outline 对象默认配置选项：</p><pre class="section__pre"><code class="section__code">Outline.DEFAULTS = {
   articleElement: '#article',
-  selector: 'h2,h3,h4,h5,h6',
-  title: '目录',
-  scrollElement: 'html,body',
-  position: 'relative',
-  parentElement: '#aside',
-  placement: 'rtl',
-  stickyHeight: 0,
-  showCode: true,
-  anchorURL: '',
-  homepage: '',
-  git: '',
-  tags: '',
-  issues: '',
-  customClass: ''
+    selector: 'h2,h3,h4,h5,h6',
+    title: '目录',
+    scrollElement: 'html,body',
+    position: 'relative',
+    parentElement: '#aside',
+    placement: 'rtl',
+    showCode: true,
+    anchorURL: '',
+    stickyHeight: 0,
+    homepage: '',
+    git: '',
+    tags: '',
+    issues: '',
+    tools: [],
+    print: {
+      element: '',
+      title: ''
+    },
+    customClass: '',
+    afterSticky: null,
+    afterToggle: null,
+    afterScroll: null
 }</code></pre></div></section><section class="section"><header class="section__header"><h3 class="section__h3" id="property-attrs">attrs</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">Object</dd></dl><p>存储的是 Outline 对象当前使用中的配置选项：</p><p>说明：建议使用 attr(prop) 方法来获取属性，避免直接调用属性。</p><pre class="section__pre"><code class="section__code">// 设置默认配置项
 const outline = new Outline(Outline.DEFAULTS)
 

docs/flex.html

@@ -156,7 +156,22 @@
       }
     }
   ]
-})</code></pre></div></section><section class="section"><header class="section__header"><h3 class="section__h3" id="option-customClass">customClass</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">String</dd></dl><dl class="section__dl"><dt class="section__dt">Default：</dt><dd class="section__dd">''</dd></dl><p>可选，(DIYer福利)设置自定义样式的 class 名称：</p><ul><li>'' - 采用默认 outline.js 的 UI 界面（默认值）；</li><li>设置自定义样式 - 自己根据需求设置个性化的 UI 界面；</li></ul><pre class="section__pre"><code class="section__code">// Default UI
+})</code></pre></div></section><section class="section"><header class="section__header"><h3 class="section__h3" id="option-print">print</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">Object</dd></dl><dl class="section__dl"><dt class="section__dt">Default：</dt><dd class="section__dd">{element: '', title: ''}</dd></dl><p>可选，自定义的是否自动为文章页面创建打印样式。</p><dl class="section__dl"><dt class="section__dt">element：</dt><dd class="section__dd">（必须）要打印的文章区域，DOM 元素或者选择器字符串。</dd></dl><dl class="section__dl"><dt class="section__dt">title：</dt><dd class="section__dd">（可选）要打印的文章标题。如果 element 区域有 h1 标签则无需设置。</dd></dl><pre class="section__pre"><code class="section__code">const defaults = Outline.DEFAULTS
+let outline
+
+defaults.position = 'sticky'
+defaults.stickyHeight = 86
+defaults.parentElement = '#aside'
+defaults.scrollElement = '#main'
+defaults.homepage = './index.html'
+defaults.git = 'https://github.com/yaohaixiao/outline.js'
+defaults.tags = 'https://github.com/yaohaixiao/outline.js/tags'
+defaults.issues = 'https://github.com/yaohaixiao/outline.js/issues'
+defaults.print = {
+  element: '#article',
+  title: 'Outline.js 自动生成文章导读（Table of Contents）导航的 JavaScript 工具'
+}
+outline = new Outline(Outline.DEFAULTS)</code></pre><p>演示地址：<a target="_blank" href="https://yaohaixiao.github.io/outline.js/flex.html">https://yaohaixiao.github.io/outline.js/flex.html</a></p></div></section><section class="section"><header class="section__header"><h3 class="section__h3" id="option-customClass">customClass</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">String</dd></dl><dl class="section__dl"><dt class="section__dt">Default：</dt><dd class="section__dd">''</dd></dl><p>可选，(DIYer福利)设置自定义样式的 class 名称：</p><ul><li>'' - 采用默认 outline.js 的 UI 界面（默认值）；</li><li>设置自定义样式 - 自己根据需求设置个性化的 UI 界面；</li></ul><pre class="section__pre"><code class="section__code">// Default UI
 new Outline(Outline.DEFAULTS)
 
 // Customized
@@ -262,20 +277,28 @@
 }
 outline = new Outline(Outline.DEFAULTS)</code></pre></div></section></section><section class="section"><header class="section__header"><h2 class="section__title">Properties</h2></header><div class="section__content"><p>outline.js 重构后，对外放 4 个重要的属性：anchors、drawer、chapters 和 toolbar。它们都是独立的对象实例，提供了 outline.js 所有的能力（属性和方法）。</p></div><section class="section"><header class="section__header"><h3 class="section__h3" id="property-defaults">DEFAULTS</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="api-param-value">Object</dd></dl><p>静态属性，存储的是 Outline 对象默认配置选项：</p><pre class="section__pre"><code class="section__code">Outline.DEFAULTS = {
   articleElement: '#article',
-  selector: 'h2,h3,h4,h5,h6',
-  title: '目录',
-  scrollElement: 'html,body',
-  position: 'relative',
-  parentElement: '#aside',
-  placement: 'rtl',
-  stickyHeight: 0,
-  showCode: true,
-  anchorURL: '',
-  homepage: '',
-  git: '',
-  tags: '',
-  issues: '',
-  customClass: ''
+    selector: 'h2,h3,h4,h5,h6',
+    title: '目录',
+    scrollElement: 'html,body',
+    position: 'relative',
+    parentElement: '#aside',
+    placement: 'rtl',
+    showCode: true,
+    anchorURL: '',
+    stickyHeight: 0,
+    homepage: '',
+    git: '',
+    tags: '',
+    issues: '',
+    tools: [],
+    print: {
+      element: '',
+      title: ''
+    },
+    customClass: '',
+    afterSticky: null,
+    afterToggle: null,
+    afterScroll: null
 }</code></pre></div></section><section class="section"><header class="section__header"><h3 class="section__h3" id="property-attrs">attrs</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">Object</dd></dl><p>存储的是 Outline 对象当前使用中的配置选项：</p><p>说明：建议使用 attr(prop) 方法来获取属性，避免直接调用属性。</p><pre class="section__pre"><code class="section__code">// 设置默认配置项
 const outline = new Outline(Outline.DEFAULTS)
 
@@ -938,4 +961,8 @@
 defaults.git = 'https://github.com/yaohaixiao/outline.js'
 defaults.tags = 'https://github.com/yaohaixiao/outline.js/tags'
 defaults.issues = 'https://github.com/yaohaixiao/outline.js/issues'
+defaults.print = {
+  element: '#article',
+  title: 'Outline.js 自动生成文章导读（Table of Contents）导航的 JavaScript 工具'
+}
 outline = new Outline(Outline.DEFAULTS)</script></body></html>