eleventy-plugin-external-links
v1.1.2
Published
Eleventy plugin to make all external links open securely in a new tab
Downloads
368
Readme
eleventy-plugin-external-links
Eleventy plugin to make all external links open securely in a new tab
npm install -D eleventy-plugin-external-links
Then simply add it to you eleventy config
const externalLinks = require('eleventy-plugin-external-links')
module.exports = (eleventyConfig) => {
eleventyConfig.addPlugin(externalLinks, {
// Plugin defaults:
name: 'external-links', // Plugin name
regex: /^(([a-z]+:)|(\/\/))/i, // Regex that test if href is external
target: "_blank", // 'target' attribute for external links
rel: "noopener", // 'rel' attribute for external links
extensions: [".html"], // Extensions to apply transform to
includeDoctype: true, // Default to include '<!DOCTYPE html>' at the beginning of the file
})
}
Under the hood it adds a simple transform that:
- Checks the file extension
- Parses the file using node-html-parser
- Finds all the
<a />
tags whichhref
matches regex - Add
target
andrel
attributes to the elements - Return the content with '' added at the beginning of the file as default
The default regex will detect links as follows:
| Link | External | | ---- | -------- | | http://google.com | ✔ | | https://google.com | ✔ | | //google.com | ✔ | | mailto:[email protected] | ✔ | | /about | ❌ | | image.jpg | ❌ | | #anchor | ❌ |