feat($markdown): extractHeaders option (close: #1903) (#1945)

Author: kefranabg

packages/@vuepress/core/lib/node/App.js

@@ -344,6 +344,7 @@ module.exports = class App {
 
   async addPage (options) {
     options.permalinkPattern = this.siteConfig.permalink
+    options.extractHeaders = this.siteConfig.markdown && this.siteConfig.markdown.extractHeaders
     const page = new Page(options, this)
     await page.process({
       markdown: this.markdown,

packages/@vuepress/core/lib/node/Page.js

@@ -45,7 +45,8 @@ module.exports = class Page {
     relative,
     permalink,
     frontmatter = {},
-    permalinkPattern
+    permalinkPattern,
+    extractHeaders = ['h2', 'h3']
   }, context) {
     this.title = title
     this._meta = meta
@@ -54,6 +55,7 @@ module.exports = class Page {
     this._permalink = permalink
     this.frontmatter = frontmatter
     this._permalinkPattern = permalinkPattern
+    this._extractHeaders = extractHeaders
     this._context = context
 
     if (relative) {
@@ -111,12 +113,13 @@ module.exports = class Page {
           this.title = title
         }
 
-        // headers
+        // extract headers
         const headers = extractHeaders(
           this._strippedContent,
-          ['h2', 'h3'],
+          this._extractHeaders,
           markdown
         )
+
         if (headers.length) {
           this.headers = headers
         }

packages/@vuepress/core/lib/node/webpack/createBaseConfig.js

@@ -34,6 +34,7 @@ module.exports = function createBaseConfig (context, isServer) {
   const inlineLimit = 10000
 
   const config = new Config()
+  const extractHeaders = siteConfig.markdown && siteConfig.markdown.extractHeaders
 
   config
     .mode(isProd && !env.isDebug ? 'production' : 'development')
@@ -118,7 +119,7 @@ module.exports = function createBaseConfig (context, isServer) {
   mdRule
     .use('markdown-loader')
       .loader(require.resolve('@vuepress/markdown-loader'))
-      .options({ sourceDir, markdown })
+      .options({ sourceDir, markdown, extractHeaders })
 
   config.module
     .rule('pug')

packages/@vuepress/markdown-loader/index.js

@@ -22,7 +22,7 @@ module.exports = function (src) {
   const isServer = this.target === 'node'
   const options = getOptions(this)
   const loader = Object.create(this)
-  const { sourceDir } = options
+  const { sourceDir, extractHeaders: extractHeadersPattern = ['h2', 'h3'] } = options
   let { markdown } = options
   if (!markdown) {
     markdown = md()
@@ -43,7 +43,7 @@ module.exports = function (src) {
 
   if (!isProd && !isServer) {
     const inferredTitle = inferTitle(frontmatter.data, frontmatter.content)
-    const headers = extractHeaders(content, ['h2', 'h3'], markdown)
+    const headers = extractHeaders(content, extractHeadersPattern, markdown)
     delete frontmatter.content
 
     // diff frontmatter and title, since they are not going to be part of the

packages/@vuepress/theme-default/components/SidebarLink.vue

@@ -54,7 +54,7 @@ export default {
   }
 }
 
-function renderLink (h, to, text, active) {
+function renderLink (h, to, text, active, level) {
   return h('router-link', {
     props: {
       to,
@@ -64,6 +64,9 @@ function renderLink (h, to, text, active) {
     class: {
       active,
       'sidebar-link': true
+    },
+    style: {
+      'padding-left': level + 'rem'
     }
   }, text)
 }
@@ -73,7 +76,7 @@ function renderChildren (h, children, path, route, maxDepth, depth = 1) {
   return h('ul', { class: 'sidebar-sub-headers' }, children.map(c => {
     const active = isActive(route, path + '#' + c.slug)
     return h('li', { class: 'sidebar-sub-header' }, [
-      renderLink(h, path + '#' + c.slug, c.title, active),
+      renderLink(h, path + '#' + c.slug, c.title, active, c.level - 1),
       renderChildren(h, c.children, path, route, maxDepth, depth + 1)
     ])
   }))

packages/docs/docs/theme/default-theme-config.md

@@ -169,6 +169,17 @@ module.exports = {
 }
 ```
 
+### Extract Headers
+ While preparing the page, headers are extracted from the Markdown file and stored in `this.$page.headers`. By default, VuePress will extract `h2` and `h3` elements for you.
+ You can override the headers it pulls out in your `markdown` options.
+ ``` js
+module.exports = {
+  markdown: {
+    extractHeaders: [ 'h2', 'h3', 'h4' ]
+  }
+}
+```
+
 ### Active Header Links
 
 By default, the nested header links and the hash in the URL are updated as the user scrolls to view the different sections of the page. This behavior can be disabled with the following theme config: