Jekyll Target Blank

Automatically adds a target="_blank" rel="noopener noreferrer" attribute to all external links in Jekyll's content plus several other automation features for the external links. Read more here

Add the following to your site's Gemfile

gem 'jekyll-target-blank'

and add the following to your site's _config.yml

plugins:
  - jekyll-target-blank

Note: if jekyll --version is less than 3.5 use:

gems:
  - jekyll-target-blank

By default. all anchor tags and markdown links pointing to an external host, other than the one listed as the url in Jekyll's _config.yml will automatically be opened in a new browser tab once the site is generated.

All the links in pages, posts and custom collections are included except for __plain text links.

The following HTML anchor tag:

<a href="https://google.com">Google</a>

will be replaced with:

<a href="https://google.com" target="_blank" rel="noopener noreferrer">Google</a>

..unless your website's URL is google.com 😉

[Google](https://google.com)

will be generated as:

<a href="https://google.com" target="_blank" rel="noopener noreferrer">Google</a>

No custom configuration is needed for using this plugin, however, you can override some default behaviours and also make use of some extra features as explained in this section.

You can override the default behaviour and only force external links to open in new browser if they have a CSS class name included with the same value as the one listed in the Jekyll _config.yml file.

To override this automation, add an entry in your site's config.yml file, specifying which CSS class name a link must have for it to be forced to open in a new browser:

target-blank:
    css_class: ext-link

With the above setting, only links containing the class="ext-link" attribute will be forced to open in a new browser.

You can also automatically add additional CSS classes to qualifying external links. This feature is useful when you want to add CSS styling to external links such as automatically displaying an icon to show the reader that the link will open in a new browser.

You can add one or more space separated CSS classes in _config.yml like so:

target-blank:
    add_css_classes: css-class-one css-class-two

The above example will add class="css-class-one css-class-two" to the generated anchor tag. These CSS class names will be added in addition to any other existing CSS class names of a link.

For security reasons, rel="noopener noreferrer" are added by default to all the processed external links. You can override adding any of the noopener and noreferrer values with the following entries in your site's _config.yml file.

To exclude the noopener value:

target-blank:
   noopener: false

To exclude the noreferrer value:

target-blank:
   noreferrer: false

To exclude both noopener and noreferrer values:

target-blank:
   noopener: false
   noreferrer: false

You can add additional rel="" attribute values by simply specifying them in your site's _config.yml file.

target-blank:
    rel: nofollow

or even more than one extra:

target-blank:
    rel: nofollow

Note:

The rel setting overrides other default rel attribute values. Therefore, (for example), if you exclude the noopener value and then add it to the rel property, it will still be added. The following config:

target-blank:
    noopener: false
    rel: noopener

will output:

<a href"https://some-external-website.what" target="_blank" rel="noreferrer noopener">Some link</a>

Simply create an issue and I will respond as soon as possible.

1. Fork it
2. Create your feature branch (`git checkout -b my-new-feature)
3. Commit your changes (git commit -m 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request

rake spec
# or
rspec

The logo illustration was Designed by Freepik. Thank you ❤️

This software is distributed under the MIT license.

© 2018 - Keith Mifsud https://keith-mifsud.me and approved contributors.