feat: support global markdown config for attributes of external links (…

…#358)
vuejs · May 8, 2018 · 20e5bd8 · 20e5bd8
1 parent 582723c
commit 20e5bd8
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/docs/config/README.md b/docs/config/README.md
@@ -134,6 +134,13 @@ Provide config options to the used theme. The options will vary depending on the
 
 Function for transforming header texts into slugs. This affects the ids/links generated for header anchors, table of contents and sidebar links.
 
+### markdown.externalLinks
+
+- Type: `Object`
+- Default: `{ target: '_blank', rel: 'noopener noreferrer' }`
+
+The key and value pair will be added to `<a>` tags that points to an external link. The default option will open external links in a new window.
+
 ### markdown.anchor
 
 - Type: `Object`

diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md
@@ -48,11 +48,13 @@ Given the following directory structure:
 
 ### External Links
 
-Outbound links automatically gets `target="_blank"`:
+Outbound links automatically gets `target="_blank" rel="noopener noreferrer"`:
 
 - [vuejs.org](https://vuejs.org)
 - [VuePress on GitHub](https://github.com/vuejs/vuepress)
 
+You can customize the attributes added to external links by setting `config.markdown.externalLinks`. See more [here](/config/#markdown-externalLinks).
+
 ## Front Matter
 
 [YAML front matter](https://jekyllrb.com/docs/frontmatter/) is supported out of the box:

diff --git a/lib/markdown/index.js b/lib/markdown/index.js
@@ -20,7 +20,10 @@ module.exports = ({ markdown = {}} = {}) => {
     // custom plugins
     .use(component)
     .use(highlightLines)
-    .use(convertRouterLink)
+    .use(convertRouterLink, Object.assign({
+      target: '_blank',
+      rel: 'noopener noreferrer'
+    }, markdown.externalLinks))
     .use(hoistScriptStyle)
     .use(containers)
 

diff --git a/lib/markdown/link.js b/lib/markdown/link.js
@@ -2,7 +2,7 @@
 // 1. adding target="_blank" to external links
 // 2. converting internal links to <router-link>
 
-module.exports = md => {
+module.exports = (md, externalAttrs) => {
   let hasOpenRouterLink = false
 
   md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
@@ -14,8 +14,9 @@ module.exports = md => {
       const isExternal = /^https?:/.test(href)
       const isSourceLink = /(\/|\.md|\.html)(#.*)?$/.test(href)
       if (isExternal) {
-        addAttr(token, 'target', '_blank')
-        addAttr(token, 'rel', 'noopener noreferrer')
+        Object.entries(externalAttrs).forEach(([key, val]) => {
+          addAttr(token, key, val)
+        })
       } else if (isSourceLink) {
         hasOpenRouterLink = true
         tokens[idx] = toRouterLink(token, link)