fix: missing title and desc in 404 and custom theme.

Author: ulivz

lib/app/root-mixins/index.js

@@ -0,0 +1,2 @@
+import updateMeta from './updateMeta'
+export default [updateMeta]

lib/app/root-mixins/updateMeta.js

@@ -0,0 +1,48 @@
+export default {
+  created () {
+    if (this.$ssrContext) {
+      this.$ssrContext.title = this.$title
+      this.$ssrContext.lang = this.$lang
+      this.$ssrContext.description = this.$page.description || this.$description
+    }
+  },
+  mounted () {
+    // update title / meta tags
+    this.currentMetaTags = []
+    const updateMeta = () => {
+      document.title = this.$title
+      document.documentElement.lang = this.$lang
+      const meta = [
+        {
+          name: 'description',
+          content: this.$description
+        },
+        ...(this.$page.frontmatter.meta || [])
+      ]
+      this.currentMetaTags = updateMetaTags(meta, this.currentMetaTags)
+    }
+    this.$watch('$page', updateMeta)
+    updateMeta()
+  },
+  beforeDestroy () {
+    updateMetaTags(null, this.currentMetaTags)
+  }
+}
+
+function updateMetaTags (meta, current) {
+  if (current) {
+    current.forEach(c => {
+      document.head.removeChild(c)
+    })
+  }
+  if (meta) {
+    return meta.map(m => {
+      const tag = document.createElement('meta')
+      Object.keys(m).forEach(key => {
+        tag.setAttribute(key, m[key])
+      })
+      document.head.appendChild(tag)
+      return tag
+    })
+  }
+}

lib/code/injectRootMixins.js

@@ -0,0 +1,8 @@
+/* eslint-disable */
+import rootMixins from '@app/root-mixins'
+function injectRootMixins (options) {
+  if (!options.mixins) {
+    options.mixins = []
+  }
+  options.mixins.push(...rootMixins)
+}

lib/default-theme/Layout.vue

@@ -87,32 +87,7 @@ export default {
     }
   },
 
-  created () {
-    if (this.$ssrContext) {
-      this.$ssrContext.title = this.$title
-      this.$ssrContext.lang = this.$lang
-      this.$ssrContext.description = this.$page.description || this.$description
-    }
-  },
-
   mounted () {
-    // update title / meta tags
-    this.currentMetaTags = []
-    const updateMeta = () => {
-      document.title = this.$title
-      document.documentElement.lang = this.$lang
-      const meta = [
-        {
-          name: 'description',
-          content: this.$description
-        },
-        ...(this.$page.frontmatter.meta || [])
-      ]
-      this.currentMetaTags = updateMetaTags(meta, this.currentMetaTags)
-    }
-    this.$watch('$page', updateMeta)
-    updateMeta()
-
     window.addEventListener('scroll', this.onScroll)
 
     // configure progress bar
@@ -132,8 +107,6 @@ export default {
   },
 
   beforeDestroy () {
-    updateMetaTags(null, this.currentMetaTags)
-
     window.removeEventListener('scroll', this.onScroll)
   },
 
@@ -191,24 +164,6 @@ export default {
     }
   }
 }
-
-function updateMetaTags (meta, current) {
-  if (current) {
-    current.forEach(c => {
-      document.head.removeChild(c)
-    })
-  }
-  if (meta) {
-    return meta.map(m => {
-      const tag = document.createElement('meta')
-      Object.keys(m).forEach(key => {
-        tag.setAttribute(key, m[key])
-      })
-      document.head.appendChild(tag)
-      return tag
-    })
-  }
-}
 </script>
 
 <style src="prismjs/themes/prism-tomorrow.css"></style>

lib/prepare.js

@@ -342,9 +342,14 @@ async function genRoutesFile ({ siteData: { pages }, sourceDir, pageFiles }) {
     component: ThemeNotFound
   }`
 
+  const injectRootMixin = await fs.readFile(path.resolve(__dirname, 'code/injectRootMixins.js'), 'utf-8')
+
   return (
     `import ThemeLayout from '@themeLayout'\n` +
-    `import ThemeNotFound from '@themeNotFound'\n` +
+    `import ThemeNotFound from '@themeNotFound'\n\n` +
+    `${injectRootMixin}\n` +
+    `injectRootMixins(ThemeLayout)\n` +
+    `injectRootMixins(ThemeNotFound)\n\n` +
     `export const routes = [${pages.map(genRoute).join(',')}${notFoundRoute}\n]`
   )
 }