Define Headers to Parse during Page Prep - resolve #984

packages/@vuepress/core/lib/prepare/AppContext.js

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

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

@@ -45,7 +45,8 @@ module.exports = class Page {
     relative,
     permalink,
     frontmatter = {},
-    permalinkPattern
+    permalinkPattern,
+    siteConfig
   }, context) {
     this.title = title
     this._meta = meta
@@ -54,7 +55,9 @@ module.exports = class Page {
     this._permalink = permalink
     this.frontmatter = frontmatter
     this._permalinkPattern = permalinkPattern
+    this._siteConfig = siteConfig
     this._context = context
+    this._siteConfig = siteConfig
 
     if (relative) {
       this.regularPath = encodeURI(fileToPath(relative))
@@ -108,9 +111,13 @@ module.exports = class Page {
         }
 
         // headers
+        this.headersToExtract = ['h2', 'h3']
+        if (this._siteConfig.markdown && this._siteConfig.markdown.extractHeaders) {
+          this.headersToExtract = this._siteConfig.markdown.extractHeaders
+        }
         const headers = extractHeaders(
           this._strippedContent,
-          ['h2', 'h3'],
+          this.headersToExtract,
           markdown
         )
         if (headers.length) {

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

@@ -116,7 +116,7 @@ module.exports = function createBaseConfig ({
   mdRule
     .use('markdown-loader')
       .loader(require.resolve('@vuepress/markdown-loader'))
-      .options({ sourceDir, markdown })
+      .options({ sourceDir, markdown, siteConfig })
 
   config.module
     .rule('pug')

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

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

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

@@ -154,6 +154,20 @@ 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 `themeConfig` options.
+
+``` js
+module.exports = {
+  themeConfig: {
+    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:
@@ -331,7 +345,7 @@ module.exports = {
 ```
 
 ::: warning Note
-Unlike the [built-in search](#built-in-search) engine which works out of the box, [Algolia DocSearch](https://community.algolia.com/docsearch/) requires you to submit your site to them for indexing before it starts working. 
+Unlike the [built-in search](#built-in-search) engine which works out of the box, [Algolia DocSearch](https://community.algolia.com/docsearch/) requires you to submit your site to them for indexing before it starts working.
 :::
 
 For more options, refer to [Algolia DocSearch's documentation](https://github.com/algolia/docsearch#docsearch-options).
@@ -375,10 +389,10 @@ module.exports = {
   themeConfig: {
     serviceWorker: {
       updatePopup: true // Boolean | Object, default to undefined.
-      // If set to true, the default text config will be: 
-      // updatePopup: { 
-      //    message: "New content is available.", 
-      //    buttonText: "Refresh" 
+      // If set to true, the default text config will be:
+      // updatePopup: {
+      //    message: "New content is available.",
+      //    buttonText: "Refresh"
       // }
     }
   }

vuepress/404.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>VuePress</title>
+    <meta name="description" content="Vue-powered Static Site Generator">
+    <link rel="icon" href="/logo.png">
+  <link rel="manifest" href="/manifest.json">
+  <meta name="theme-color" content="#3eaf7c">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <link rel="apple-touch-icon" href="/icons/apple-touch-icon-152x152.png">
+  <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#3eaf7c">
+  <meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
+  <meta name="msapplication-TileColor" content="#000000">
+
+    <link rel="preload" href="/assets/css/0.styles.6cc590e0.css" as="style"><link rel="preload" href="/assets/js/app.8ac36d9d.js" as="script"><link rel="preload" href="/assets/js/2.9a3d3cef.js" as="script"><link rel="preload" href="/assets/js/95.36017126.js" as="script"><link rel="prefetch" href="/assets/js/3.be112e9f.js"><link rel="prefetch" href="/assets/js/4.d16007cf.js"><link rel="prefetch" href="/assets/js/5.18c31fb7.js"><link rel="prefetch" href="/assets/js/6.8ca9ae3b.js"><link rel="prefetch" href="/assets/js/7.6d6f900c.js"><link rel="prefetch" href="/assets/js/8.a7e0b975.js"><link rel="prefetch" href="/assets/js/9.164bd82f.js"><link rel="prefetch" href="/assets/js/10.90b6f866.js"><link rel="prefetch" href="/assets/js/11.bb178c57.js"><link rel="prefetch" href="/assets/js/12.1501540a.js"><link rel="prefetch" href="/assets/js/13.6e978c39.js"><link rel="prefetch" href="/assets/js/14.136ae6a3.js"><link rel="prefetch" href="/assets/js/15.0c645d16.js"><link rel="prefetch" href="/assets/js/16.8741a547.js"><link rel="prefetch" href="/assets/js/17.5e50cd1d.js"><link rel="prefetch" href="/assets/js/18.790476d7.js"><link rel="prefetch" href="/assets/js/19.6749c256.js"><link rel="prefetch" href="/assets/js/20.52144952.js"><link rel="prefetch" href="/assets/js/21.a733da80.js"><link rel="prefetch" href="/assets/js/22.cca14839.js"><link rel="prefetch" href="/assets/js/23.d93cc55b.js"><link rel="prefetch" href="/assets/js/24.1e5b5d2a.js"><link rel="prefetch" href="/assets/js/25.7c13839d.js"><link rel="prefetch" href="/assets/js/26.2a3806b6.js"><link rel="prefetch" href="/assets/js/27.c450e6fb.js"><link rel="prefetch" href="/assets/js/28.9169fe43.js"><link rel="prefetch" href="/assets/js/29.0a1ff843.js"><link rel="prefetch" href="/assets/js/30.25e010af.js"><link rel="prefetch" href="/assets/js/31.effc1422.js"><link rel="prefetch" href="/assets/js/32.86f38218.js"><link rel="prefetch" href="/assets/js/33.0fab7803.js"><link rel="prefetch" href="/assets/js/34.5e0d5a74.js"><link rel="prefetch" href="/assets/js/35.e4e7fe67.js"><link rel="prefetch" href="/assets/js/36.ca792103.js"><link rel="prefetch" href="/assets/js/37.6d74e878.js"><link rel="prefetch" href="/assets/js/38.a1c5df9a.js"><link rel="prefetch" href="/assets/js/39.b0d2ff36.js"><link rel="prefetch" href="/assets/js/40.af5932b9.js"><link rel="prefetch" href="/assets/js/41.e26383c5.js"><link rel="prefetch" href="/assets/js/42.bf69bddd.js"><link rel="prefetch" href="/assets/js/43.c0368a24.js"><link rel="prefetch" href="/assets/js/44.d601f92a.js"><link rel="prefetch" href="/assets/js/45.5939c636.js"><link rel="prefetch" href="/assets/js/46.2bc10ed6.js"><link rel="prefetch" href="/assets/js/47.15e6f040.js"><link rel="prefetch" href="/assets/js/48.a114b415.js"><link rel="prefetch" href="/assets/js/49.a51c6fdf.js"><link rel="prefetch" href="/assets/js/50.ed42f747.js"><link rel="prefetch" href="/assets/js/51.f6a2c8b3.js"><link rel="prefetch" href="/assets/js/52.522513d8.js"><link rel="prefetch" href="/assets/js/53.2bdd820d.js"><link rel="prefetch" href="/assets/js/54.15937a2d.js"><link rel="prefetch" href="/assets/js/55.d78fbc49.js"><link rel="prefetch" href="/assets/js/56.934f8911.js"><link rel="prefetch" href="/assets/js/57.f2538317.js"><link rel="prefetch" href="/assets/js/58.f465a17a.js"><link rel="prefetch" href="/assets/js/59.00cd99d8.js"><link rel="prefetch" href="/assets/js/60.e2e817e9.js"><link rel="prefetch" href="/assets/js/61.e351f282.js"><link rel="prefetch" href="/assets/js/62.7cb85843.js"><link rel="prefetch" href="/assets/js/63.7a736cf3.js"><link rel="prefetch" href="/assets/js/64.589ebe9e.js"><link rel="prefetch" href="/assets/js/65.c7b9d4e8.js"><link rel="prefetch" href="/assets/js/66.ee83944c.js"><link rel="prefetch" href="/assets/js/67.1b7b5854.js"><link rel="prefetch" href="/assets/js/68.b4e58228.js"><link rel="prefetch" href="/assets/js/69.73f71dfd.js"><link rel="prefetch" href="/assets/js/70.d0ec8013.js"><link rel="prefetch" href="/assets/js/71.34cb1f27.js"><link rel="prefetch" href="/assets/js/72.6528f86e.js"><link rel="prefetch" href="/assets/js/73.ceac5146.js"><link rel="prefetch" href="/assets/js/74.907fe0dc.js"><link rel="prefetch" href="/assets/js/75.3ff1a49a.js"><link rel="prefetch" href="/assets/js/76.22069a19.js"><link rel="prefetch" href="/assets/js/77.8c5d4344.js"><link rel="prefetch" href="/assets/js/78.79c9fb4c.js"><link rel="prefetch" href="/assets/js/79.776ba4c9.js"><link rel="prefetch" href="/assets/js/80.c82818bd.js"><link rel="prefetch" href="/assets/js/81.95ebb7bf.js"><link rel="prefetch" href="/assets/js/82.230a5beb.js"><link rel="prefetch" href="/assets/js/83.ca9f99e0.js"><link rel="prefetch" href="/assets/js/84.4ef99674.js"><link rel="prefetch" href="/assets/js/85.05d2f860.js"><link rel="prefetch" href="/assets/js/86.a3020788.js"><link rel="prefetch" href="/assets/js/87.f276c65b.js"><link rel="prefetch" href="/assets/js/88.4a8aea21.js"><link rel="prefetch" href="/assets/js/89.b51fcc0a.js"><link rel="prefetch" href="/assets/js/90.3bdc019a.js"><link rel="prefetch" href="/assets/js/91.cd31807c.js"><link rel="prefetch" href="/assets/js/92.a4808ccd.js"><link rel="prefetch" href="/assets/js/93.09fb2654.js"><link rel="prefetch" href="/assets/js/94.c8b3bda3.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.67496cf7.js"><link rel="prefetch" href="/assets/js/vendors~notification.cb8b10f9.js">
+    <link rel="stylesheet" href="/assets/css/0.styles.6cc590e0.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><div class="content"><h1>404</h1> <blockquote>There's nothing here.</blockquote> <a href="/" class="router-link-active">Take me home.</a></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/2.9a3d3cef.js" defer></script><script src="/assets/js/95.36017126.js" defer></script><script src="/assets/js/app.8ac36d9d.js" defer></script>
+  </body>
+</html>