feat: Support history router-mode (#11)

* feat: add routerMode option, support history router mode

* docs: add history router mode example

* docs: update readme about router mode

* feat: clean dependencies

example/index.html → example/default/index.html

@@ -40,7 +40,7 @@
         nextText: '下一章节',
         crossChapter: true,
         crossChapterText: true,
-      }
+      },
     }
   </script>
 
@@ -49,6 +49,6 @@
 
   <!-- plugins -->
   <script src="//unpkg.com/docsify/lib/plugins/zoom-image.min.js"></script>
-  <script src="../dist/docsify-pagination.js"></script>
+  <script src="../../dist/docsify-pagination.js"></script>
 </body>
 </html>

example/router-mode-history/README.md

@@ -0,0 +1,13 @@
+# Example
+
+## Section 1
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non erat eu leo eleifend dictum porta non libero. Proin eu quam sed dui sodales semper sagittis at nisl. Mauris dignissim vel urna ac vehicula. Mauris sapien risus, luctus quis consectetur nec, vestibulum a nisl. Proin tellus massa, auctor a fringilla quis, pretium eu felis. Nulla facilisi. Proin nunc nisl, interdum at pellentesque sed, porttitor at purus. Nulla gravida nibh sapien, vitae vulputate neque tempus quis. Quisque vitae lacus id tortor lobortis semper. Praesent ut elementum leo. Fusce venenatis ultricies turpis ut ultricies. Nullam blandit augue nibh, sit amet finibus sapien posuere sit amet. Integer faucibus purus eu arcu pretium imperdiet. Morbi vitae vestibulum velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae magna ornare, dictum velit eget, placerat arcu.
+
+Integer nec placerat risus. Suspendisse potenti. Vestibulum at leo sit amet dolor semper consectetur. Integer lacinia orci eros, quis egestas erat consequat ac. Nulla aliquet lectus sit amet nisl consequat, ut maximus lectus vehicula. Vivamus enim neque, elementum fermentum interdum quis, interdum ut purus. Sed ut tincidunt arcu. Mauris consequat pellentesque purus. Nam aliquet faucibus magna non ultricies. Sed lacus erat, hendrerit eget venenatis in, auctor a sem. Sed elementum sit amet augue et finibus. Donec sagittis imperdiet lectus et faucibus. Maecenas sagittis dui nec sem imperdiet malesuada. Duis id hendrerit ante, quis ornare nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec rutrum lorem a est varius congue nec ut diam.
+
+Curabitur est purus, fringilla quis posuere vitae, fringilla sit amet lorem. Vivamus in elit ut arcu vestibulum luctus tristique eu nulla. Suspendisse ut nibh eros. Duis scelerisque rhoncus congue. Duis vitae dui quis augue convallis cursus. Integer sagittis maximus sapien, a faucibus quam dictum eu. Suspendisse a felis metus. Etiam consectetur vitae tortor sit amet mattis.
+
+## Section 2
+Phasellus at turpis ac nisi tincidunt laoreet sed id ipsum. Suspendisse nec neque arcu. Suspendisse efficitur maximus justo et commodo. Duis fringilla ex in arcu luctus posuere. Sed ligula tortor, auctor sit amet pretium et, iaculis eu nunc. Vestibulum sit amet lobortis neque. Nulla ultrices dolor ut dapibus congue. Aliquam tincidunt, tortor in euismod condimentum, nulla nibh egestas velit, quis tincidunt mauris odio vitae lorem. Praesent laoreet massa et sollicitudin luctus. In eget gravida velit. Aliquam tempus tempus tincidunt. Integer a lectus sodales, venenatis arcu eu, volutpat neque. Morbi interdum molestie leo, vel pharetra ipsum pellentesque sed. Donec iaculis consequat risus, sit amet pulvinar ante volutpat eget. In hac habitasse platea dictumst.
+
+Ut at est egestas, tempor eros ullamcorper, dignissim sapien. In ut aliquet nulla. Praesent in ligula nec metus luctus rutrum eu non massa. Maecenas eget lorem quis tortor hendrerit ultricies volutpat nec nisi. Pellentesque varius iaculis porta. Quisque sit amet ullamcorper libero, a tristique urna. Ut ornare, dui et efficitur molestie, dolor dolor porttitor mauris, sodales elementum tortor nisi tempus dolor. Phasellus in augue aliquet, commodo felis vel, vulputate ipsum.

example/router-mode-history/_sidebar.md

@@ -0,0 +1,4 @@
+- [Home](/example/router-mode-history/)
+- [Foo](/example/router-mode-history/foo.md#section-3)
+- [Bar A Long Long Long Title](/example/router-mode-history/bar.md)
+- [Baz](/example/router-mode-history/baz.md)

example/router-mode-history/bar.md

@@ -0,0 +1,14 @@
+# Bar A Long Long Long Title
+
+## Section 5
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et nulla congue, facilisis felis non, scelerisque mi. Fusce commodo pharetra vehicula. Maecenas ac tristique lectus. Curabitur id convallis dui, tristique consequat dui. Nunc egestas sem et libero maximus mattis. Maecenas consequat volutpat elit et iaculis. Quisque quis nisi varius, rhoncus mauris sit amet, mattis nisl. Praesent at venenatis odio, sed lobortis ligula. Praesent tempus neque non porta viverra. Fusce efficitur sit amet tortor eu maximus. Aliquam iaculis dui nec tincidunt rhoncus. Suspendisse potenti. In ut leo eget mi egestas dictum.
+
+Suspendisse libero magna, tincidunt in accumsan ac, sollicitudin nec risus. Suspendisse lacus diam, cursus et ipsum eu, aliquet tempor arcu. Donec sed ex ultricies, semper orci ac, semper massa. Nam quis est eleifend, pretium lorem id, mollis velit. Ut non eros quam. Praesent rutrum ante dignissim massa ullamcorper blandit. Curabitur id quam bibendum, efficitur felis sed, faucibus risus. Proin quis convallis odio, tristique interdum tellus. Nullam accumsan, diam faucibus placerat tincidunt, mi magna congue tellus, quis tempus urna justo et diam. Phasellus orci elit, placerat in iaculis ac, tincidunt in ipsum. Pellentesque vehicula sed lacus non interdum. Nunc nisi quam, hendrerit vitae diam nec, placerat feugiat metus. Quisque interdum posuere nulla vel luctus. Vivamus volutpat feugiat orci, in molestie quam venenatis et. Proin eu porta magna, quis faucibus augue. Etiam malesuada, nisi in mollis cursus, est sem malesuada ipsum, sed finibus leo lorem non enim.
+
+## Section 6
+
+Vivamus porttitor lectus et imperdiet ullamcorper. Sed id odio interdum, congue ligula vitae, sodales felis. Nunc vel consequat leo. Nunc a laoreet nisi, porta tincidunt odio. Nunc ultrices a turpis non feugiat. Sed placerat sollicitudin orci, nec tincidunt libero suscipit nec. Sed iaculis eleifend imperdiet.
+
+Sed risus sapien, scelerisque in scelerisque et, ornare non sem. Duis mauris ligula, pretium quis feugiat eget, hendrerit in lacus. Ut venenatis neque tortor, ut commodo purus commodo tempus. Cras ornare enim libero, vel maximus purus sodales nec. Donec ac molestie orci, quis aliquet sem. Sed lacinia diam vitae dui tempor dictum. Duis eu lorem ut velit feugiat tempus. Cras fringilla leo volutpat, pharetra eros suscipit, ultrices ante.
+
+Donec nec sodales nisi. Vivamus tempor condimentum erat, in eleifend arcu egestas nec. Proin et orci nisi. Sed mollis dignissim augue, ut congue est sagittis in. Aenean lobortis, sem nec mollis vulputate, elit turpis mollis tellus, eget pretium urna risus eu quam. Vivamus volutpat arcu dolor, fermentum efficitur arcu laoreet at. Vestibulum quam mauris, mollis nec elit consequat, malesuada aliquet enim. Aenean luctus ipsum a velit dignissim facilisis. Vestibulum et mauris euismod ipsum pharetra consectetur non ac leo. Curabitur vulputate a odio sit amet efficitur. Sed imperdiet, risus eu consequat vulputate, nisl dui auctor mi, vitae porta arcu justo quis odio. Suspendisse nisi felis, mattis sit amet nisl at, condimentum ultricies tellus. Pellentesque efficitur sit amet enim at auctor.

example/router-mode-history/baz.md

@@ -0,0 +1,14 @@
+# Baz
+
+## Section 5
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et nulla congue, facilisis felis non, scelerisque mi. Fusce commodo pharetra vehicula. Maecenas ac tristique lectus. Curabitur id convallis dui, tristique consequat dui. Nunc egestas sem et libero maximus mattis. Maecenas consequat volutpat elit et iaculis. Quisque quis nisi varius, rhoncus mauris sit amet, mattis nisl. Praesent at venenatis odio, sed lobortis ligula. Praesent tempus neque non porta viverra. Fusce efficitur sit amet tortor eu maximus. Aliquam iaculis dui nec tincidunt rhoncus. Suspendisse potenti. In ut leo eget mi egestas dictum.
+
+Suspendisse libero magna, tincidunt in accumsan ac, sollicitudin nec risus. Suspendisse lacus diam, cursus et ipsum eu, aliquet tempor arcu. Donec sed ex ultricies, semper orci ac, semper massa. Nam quis est eleifend, pretium lorem id, mollis velit. Ut non eros quam. Praesent rutrum ante dignissim massa ullamcorper blandit. Curabitur id quam bibendum, efficitur felis sed, faucibus risus. Proin quis convallis odio, tristique interdum tellus. Nullam accumsan, diam faucibus placerat tincidunt, mi magna congue tellus, quis tempus urna justo et diam. Phasellus orci elit, placerat in iaculis ac, tincidunt in ipsum. Pellentesque vehicula sed lacus non interdum. Nunc nisi quam, hendrerit vitae diam nec, placerat feugiat metus. Quisque interdum posuere nulla vel luctus. Vivamus volutpat feugiat orci, in molestie quam venenatis et. Proin eu porta magna, quis faucibus augue. Etiam malesuada, nisi in mollis cursus, est sem malesuada ipsum, sed finibus leo lorem non enim.
+
+## Section 6
+
+Vivamus porttitor lectus et imperdiet ullamcorper. Sed id odio interdum, congue ligula vitae, sodales felis. Nunc vel consequat leo. Nunc a laoreet nisi, porta tincidunt odio. Nunc ultrices a turpis non feugiat. Sed placerat sollicitudin orci, nec tincidunt libero suscipit nec. Sed iaculis eleifend imperdiet.
+
+Sed risus sapien, scelerisque in scelerisque et, ornare non sem. Duis mauris ligula, pretium quis feugiat eget, hendrerit in lacus. Ut venenatis neque tortor, ut commodo purus commodo tempus. Cras ornare enim libero, vel maximus purus sodales nec. Donec ac molestie orci, quis aliquet sem. Sed lacinia diam vitae dui tempor dictum. Duis eu lorem ut velit feugiat tempus. Cras fringilla leo volutpat, pharetra eros suscipit, ultrices ante.
+
+Donec nec sodales nisi. Vivamus tempor condimentum erat, in eleifend arcu egestas nec. Proin et orci nisi. Sed mollis dignissim augue, ut congue est sagittis in. Aenean lobortis, sem nec mollis vulputate, elit turpis mollis tellus, eget pretium urna risus eu quam. Vivamus volutpat arcu dolor, fermentum efficitur arcu laoreet at. Vestibulum quam mauris, mollis nec elit consequat, malesuada aliquet enim. Aenean luctus ipsum a velit dignissim facilisis. Vestibulum et mauris euismod ipsum pharetra consectetur non ac leo. Curabitur vulputate a odio sit amet efficitur. Sed imperdiet, risus eu consequat vulputate, nisl dui auctor mi, vitae porta arcu justo quis odio. Suspendisse nisi felis, mattis sit amet nisl at, condimentum ultricies tellus. Pellentesque efficitur sit amet enim at auctor.

example/router-mode-history/foo.md

@@ -0,0 +1,16 @@
+# Foo
+
+## Section 3
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consequat tortor elit, eu semper sem mollis at. Aliquam tortor nulla, maximus vel efficitur sit amet, mattis ut odio. Maecenas sit amet purus sed orci ultricies rutrum. Praesent euismod quam dui, sit amet ultrices odio rutrum quis. Nulla nec elit elementum, scelerisque justo rutrum, lacinia dolor. Integer vehicula faucibus sapien, in imperdiet dolor facilisis vel. Proin lacinia eu est non rutrum. Aliquam tincidunt eget lectus eu vulputate. In placerat felis at tincidunt cursus. Vivamus quis elit ac est imperdiet suscipit. Vestibulum rutrum vel metus ac auctor. Morbi at dapibus nisi. Phasellus dignissim varius ipsum at fringilla. Ut ligula lorem, consectetur sit amet bibendum a, consequat eu dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
+Mauris ut congue lectus, ut gravida est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tincidunt non ex eu porttitor. Duis id diam sit amet ante molestie volutpat id ut justo. In vitae dui quis eros porttitor iaculis. Nunc lectus massa, sollicitudin ut tempor at, iaculis a risus. Phasellus convallis velit justo, ut semper lacus consequat eu. Integer in consequat ligula, ac consectetur mauris. Suspendisse consequat eget lacus sed rhoncus. Nulla placerat ex non sem lobortis, ut luctus tellus ullamcorper. Morbi non justo sit amet nibh dictum volutpat. Donec ut lobortis metus, ut elementum justo. Nunc est orci, vestibulum vel turpis nec, malesuada malesuada purus. Cras feugiat augue in ullamcorper convallis.
+
+Donec lobortis est faucibus, mollis metus vel, imperdiet erat. Sed accumsan faucibus sapien eu aliquam. Ut mollis lorem sem, eu sagittis leo suscipit a. Nam non ultrices odio. Sed ante enim, volutpat id blandit nec, pulvinar quis tortor. Donec blandit arcu sed vulputate pharetra. Aliquam blandit molestie lectus ac euismod. Curabitur eget nunc sit amet nibh consectetur euismod. Donec tincidunt elementum ligula sit amet convallis. Nam fermentum purus et diam scelerisque elementum. Morbi id elit a risus vestibulum dignissim nec ac ipsum. Proin tristique finibus dui ut pretium. Nulla vitae neque non nisl porttitor iaculis. Nullam vel arcu vitae dolor viverra scelerisque dictum at diam. Donec tellus risus, finibus vitae finibus sit amet, viverra ut dui. Donec gravida odio nunc.
+
+## Section 4
+Donec faucibus euismod augue, vitae euismod leo luctus vitae. Maecenas mollis sed felis sit amet ullamcorper. Maecenas tempor diam vel metus viverra consequat. Mauris in venenatis mi. Sed elit dui, iaculis et purus ut, pellentesque accumsan nisi. Etiam suscipit laoreet tellus quis finibus. Aliquam sollicitudin velit a nulla tristique dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eget ex volutpat, dapibus leo id, convallis magna. Morbi a mi id magna cursus luctus. Vestibulum in sem a ante auctor mollis. Praesent dictum nisl vel fringilla egestas. Nullam at magna aliquam, rutrum enim ut, molestie erat. Pellentesque convallis nibh nec odio dignissim, volutpat interdum massa imperdiet. Donec luctus congue risus, a viverra diam congue sed. Nulla nisl turpis, cursus eget tincidunt eget, mollis vel ante.
+
+Aliquam gravida orci ut odio dapibus aliquet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam a ultrices quam. Cras convallis diam eu molestie tincidunt. Nulla id efficitur ligula. Sed sem diam, imperdiet tristique tellus at, imperdiet elementum nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris mi odio, tempor ut tempus ut, egestas vitae elit. Suspendisse pretium accumsan sapien quis sollicitudin. Donec laoreet lectus a nulla pellentesque convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+
+## Image
+![](https://docsify.js.org/_media/icon.svg)

example/router-mode-history/index.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Docsify-Pagination Example</title>
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css" />
+  <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/dark.css"> -->
+  <!-- <style>
+    body {
+      color: yellow;
+      font-size: 20px;
+      background: #999;
+    }
+
+    body .docsify-pagination-container {
+      border-width: 5px;
+      border-color: red;
+    }
+
+    body .pagination-item-label svg {
+      height: 1.5em;
+      stroke-linecap: square;
+      stroke-linejoin: square;
+      stroke-width: 3px;
+    }
+  </style> -->
+</head>
+
+<body>
+  <div id="app"></div>
+
+  <script>
+    window.$docsify = {
+      routerMode: 'history',
+      loadSidebar: true,
+      subMaxLevel: 4,
+      pagination: {
+        previousText: '上一章节',
+        nextText: '下一章节',
+      },
+    }
+  </script>
+
+  <!-- docsify -->
+  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+
+  <!-- plugins -->
+  <script src="//unpkg.com/docsify/lib/plugins/zoom-image.min.js"></script>
+  <script src="../../dist/docsify-pagination.js"></script>
+</body>
+</html>

readme.md

@@ -50,8 +50,14 @@
 * **Type:** ``Boolean``
 * **Description:** Display chapter name.
 
+### pagination.routerMode
+* **Default:** [`window.$docsify.routerMode`](https://docsify.js.org/#/configuration?id=routermode)
+* **Type:** ``String``
+* **Description:** Router mode. In most cases, you don't need to modify it. Docsify-Pagination will take care of it for you.
+
 ## Example
-- [example/index.html](example/index.html)
+- [Example](example/default/index.html)
+- [Example with Docsify's History Route-Mode](example/router-mode-history/index.html)
 - [Tina.js](https://tina.js.org/)
 
 ## Related

src/pagination.js

@@ -1,17 +1,22 @@
 import query from 'component-query'
 import closest from 'component-closest'
 import matches from 'component-matches-selector'
-import stylesheet from './stylesheet.css'
+import './stylesheet.css'
 
 /**
  * constants
  */
-const DEFAULT_OPTIONS = {
+const ROUTER_MODE = {
+  HASH: 'hash',
+  HISTORY: 'history',
+}
+const DEFAULT_OPTIONS = (config) => ({
   previousText: 'PREVIOUS',
   nextText: 'NEXT',
   crossChapter: false,
   crossChapterText: false,
-}
+  routerMode: config.routerMode || ROUTER_MODE.HASH,
+})
 const CONTAINER_CLASSNAME = 'docsify-pagination-container'
 
 /**
@@ -31,7 +36,7 @@ function isALinkTo (path, element) {
   if (arguments.length === 1) {
     return (element) => isALinkTo(path, element)
   }
-  return decodeURIComponent(element.getAttribute('href').split('?')[0]) === decodeURIComponent(`#${path}`)
+  return decodeURIComponent(element.getAttribute('href').split('?')[0]) === decodeURIComponent(path)
 }
 
 
@@ -58,9 +63,11 @@ class Link {
   }
 }
 
-function pagination (vm, crossChapter) {
+function pagination (vm, { crossChapter, routerMode }) {
   try {
-    const path = vm.route.path
+    const path = routerMode === ROUTER_MODE.HISTORY ?
+      vm.route.path :
+      `#${vm.route.path}`
     const all = toArray(query.all('.sidebar li a')).filter((element) => !matches(element, '.section-link'))
     const active = all.find(isALinkTo(path))
     const group = toArray((closest(active, 'ul') || {}).children)
@@ -128,14 +135,18 @@ const template = {
  * installation
  */
 export function install (hook, vm) {
-  let options = Object.assign({}, DEFAULT_OPTIONS, vm.config.pagination || {})
+  let options = Object.assign(
+    {},
+    DEFAULT_OPTIONS(vm.config),
+    vm.config.pagination || {}
+  )
 
   function render () {
     const container = query(`.${CONTAINER_CLASSNAME}`)
     if (!container) {
       return
     }
-    container.innerHTML = template.inner(pagination(vm, options.crossChapter), options)
+    container.innerHTML = template.inner(pagination(vm, options), options)
   }
 
   hook.afterEach((html) => html + template.container())