eleventy-plugin-external-links
Eleventy plugin to make all external links open securely in a new tab
npm install -D eleventy-plugin-external-linksThen 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 whichhrefmatches regex - Add
targetandrelattributes 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:mail@example.com | |
| /about | |
| image.jpg | |
| #anchor |