feat($core): add canonical link to frontmatter (#2658)

vuejs · Oct 13, 2020 · ff6c51a · ff6c51a
1 parent 931e7d9
commit ff6c51a
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 0 deletions.
diff --git a/packages/@vuepress/core/lib/client/index.ssr.html b/packages/@vuepress/core/lib/client/index.ssr.html
@@ -7,6 +7,7 @@
     <meta name="generator" content="VuePress {{ version }}">
     {{{ userHeadTags }}}
     {{{ pageMeta }}}
+    {{{ canonicalLink }}}
     {{{ renderResourceHints() }}}
     {{{ renderStyles() }}}
   </head>

diff --git a/packages/@vuepress/core/lib/client/root-mixins/updateMeta.js b/packages/@vuepress/core/lib/client/root-mixins/updateMeta.js
@@ -13,6 +13,7 @@ export default {
       this.$ssrContext.title = this.$title
       this.$ssrContext.lang = this.$lang
       this.$ssrContext.pageMeta = renderPageMeta(mergedMetaItems)
+      this.$ssrContext.canonicalLink = renderCanonicalLink(this.$canonicalUrl)
     }
   },
   // Other life cycles will only be called at client
@@ -22,6 +23,7 @@ export default {
 
     // update title / meta tags
     this.updateMeta()
+    this.updateCanonicalLink()
   },
 
   methods: {
@@ -39,18 +41,45 @@ export default {
       // description needs special attention as it has too many entries
       return unionBy([{ name: 'description', content: this.$description }],
         pageMeta, this.siteMeta, metaIdentifier)
+    },
+
+    updateCanonicalLink () {
+      removeCanonicalLink()
+
+      if (!this.$canonicalUrl) {
+        return
+      }
+
+      document.head.insertAdjacentHTML('beforeend', renderCanonicalLink(this.$canonicalUrl))
     }
   },
 
   watch: {
     $page () {
       this.updateMeta()
+      this.updateCanonicalLink()
     }
   },
 
   beforeDestroy () {
     updateMetaTags(null, this.currentMetaTags)
+    removeCanonicalLink()
+  }
+}
+
+function removeCanonicalLink () {
+  const canonicalEl = document.querySelector("link[rel='canonical']")
+
+  if (canonicalEl) {
+    canonicalEl.remove()
+  }
+}
+
+function renderCanonicalLink (link = '') {
+  if (!link) {
+    return ''
   }
+  return `<link href="${link}" rel="canonical" />`
 }
 
 /**

diff --git a/packages/@vuepress/core/lib/node/ClientComputedMixin.js b/packages/@vuepress/core/lib/node/ClientComputedMixin.js
@@ -65,6 +65,16 @@ module.exports = siteData => {
       return this.$localeConfig.title || this.$site.title || ''
     }
 
+    get $canonicalUrl () {
+      const { canonical } = this.$page.frontmatter
+
+      if (typeof canonical === 'string') {
+        return canonical
+      }
+
+      return false
+    }
+
     get $title () {
       const page = this.$page
       const { metaTitle } = this.$page.frontmatter

diff --git a/packages/docs/docs/guide/frontmatter.md b/packages/docs/docs/guide/frontmatter.md
@@ -110,6 +110,13 @@ meta:
 ---
 ```
 
+### canonicalUrl <Badge text="1.7.0+" />
+
+- Type: `string`
+- Default: `undefined`
+
+Set the canonical URL for the current page.
+
 ## Predefined Variables Powered By Default Theme
 
 ### navbar