feat: implement support for chapter names in links (#19)

* implement chapter text with each pagination item

* support conditional visibility of chapter text

* support variable chapter name visibility

* remove unnecessary var

* default to true

* demo changes

* feat: keep default rendering consistent as the previous version

* docs: add corssChapterText option

Co-authored-by: yelo <zhihuzeye@gmail.com>

Author: kirkyoder

example/_sidebar.md

@@ -1,12 +1,18 @@
-- [Home](/)
-- [Foo](foo.md#section-3)
-- [Bar A Long Long Long Title](bar.md)
-- [Baz](baz.md)
+- Chapter 1
+
+    - [Home](/)
+    - [Foo](foo.md#section-3)
+    - [Bar A Long Long Long Title](bar.md)
+    - [Baz](baz.md)
+
 - Chapter 2
-  - [Foo](foo.md)
-  - [Bar](bar.md)
-  - [Baz](baz.md)
+
+    - [Foo](foo.md)
+    - [Bar](bar.md)
+    - [Baz](baz.md)
+
 - Chapter 3
-  - [Foo](foo.md)
-  - [Bar](bar.md)
-  - [Baz](baz.md)
+
+    - [Foo](foo.md)
+    - [Bar](bar.md)
+    - [Baz](baz.md)

example/index.html

@@ -39,6 +39,7 @@
         previousText: '上一章节',
         nextText: '下一章节',
         crossChapter: true,
+        crossChapterText: true,
       }
     }
   </script>

readme.md

@@ -23,7 +23,8 @@
     pagination: {
       previousText: '上一章节',
       nextText: '下一章节',
-      crossChapter: true
+      crossChapter: true,
+      crossChapterText: true,
     },
   }
   ```
@@ -44,6 +45,11 @@
 * **Type:** ``Boolean``
 * **Description:** Allow navigation to previous/next chapter.
 
+### pagination.crossChapterText
+* **Default:** `false`
+* **Type:** ``Boolean``
+* **Description:** Display chapter name.
+
 ## Example
 - [example/index.html](example/index.html)
 - [Tina.js](https://tina.js.org/)

src/pagination.js

@@ -10,6 +10,7 @@ const DEFAULT_OPTIONS = {
   previousText: 'PREVIOUS',
   nextText: 'NEXT',
   crossChapter: false,
+  crossChapterText: false,
 }
 const CONTAINER_CLASSNAME = 'docsify-pagination-container'
 
@@ -19,6 +20,10 @@ const CONTAINER_CLASSNAME = 'docsify-pagination-container'
 function toArray (elements) {
   return Array.prototype.slice.call(elements)
 }
+function findChapter (element) {
+  const container = closest(element, 'div > ul > li')
+  return query('p', container)
+}
 function findHyperlink (element) {
   return element.href ? element : query('a', element)
 }
@@ -38,6 +43,7 @@ class Link {
     if (!element) {
       return
     }
+    this.chapter = findChapter(element)
     this.hyperlink = findHyperlink(element)
   }
   toJSON () {
@@ -47,6 +53,7 @@ class Link {
     return {
       name: this.hyperlink.innerText,
       href: this.hyperlink.getAttribute('href'),
+      chapterName: this.chapter && this.chapter.innerText || ''
     }
   }
 }
@@ -93,7 +100,9 @@ const template = {
               <span>${options.previousText}</span>
             </div>
             <div class="pagination-item-title">${data.prev.name}</div>
-          </a>
+      `,
+      data.prev && options.crossChapterText && `<div class="pagination-item-subtitle">${data.prev.chapterName}</div>`,
+      data.prev && `</a>
         </div>
       `,
       data.next && `
@@ -106,7 +115,9 @@ const template = {
               </svg>
             </div>
             <div class="pagination-item-title">${data.next.name}</div>
-          </a>
+      `,
+      data.next && options.crossChapterText && `<div class="pagination-item-subtitle">${data.next.chapterName}</div>`,
+      data.next && `</a>
         </div>
       `
     ].filter(Boolean).join('')

src/stylesheet.css

@@ -20,7 +20,8 @@
   text-decoration: underline;
 }
 .pagination-item:not(:last-child) a .pagination-item-label,
-.pagination-item:not(:last-child) a .pagination-item-title {
+.pagination-item:not(:last-child) a .pagination-item-title,
+.pagination-item:not(:last-child) a .pagination-item-subtitle {
   opacity: 0.3;
   transition: all 200ms;
 }
@@ -59,3 +60,7 @@
 .pagination-item-title {
   font-size: 1.6em;
 }
+.pagination-item-subtitle {
+  text-transform: uppercase;
+  opacity: 0.3;
+}