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>

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;
+}