Jekyll Target Blank
Last updated: 24th December, 2018 By: Keith Mifsud
Sick of writing raw HTML anchor tags in your markdown or forcing your writers to add more technical attributes such as:
[External link](https://rubygems.org/gems/jekyll-target-blank){:target="_blank"}
Well, I was, and so were some of my clients. That’s how this project came alive. Jekyll Target Blank forces all external links to open in a new tab or window within Jekyll pages, posts and collections.
Pimp out your external links
As of version 1.1.0
Jekyll Target Blank includes some cool new features.
Security
Adds rel="noopener noreferrer"
by default. ❤️ to @buren for your contribution.
This new default behaviour can be configured as detailed below 😉
️️🌶️ Added spice
- Control which links are opened in a new browser tab.
- Automatically add CSS class names to your external links.
Installation
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
Usage
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.
Examples
HTML
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 😉
Markdown
[Google](https://google.com)
will be generated as:
<a href="https://google.com" target="_blank" rel="noopener noreferrer">Google</a>
Configuration
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.
Override the default behaviour
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.
Automatically add additional CSS Classes
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.
Override the default rel attributes
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 noopner
and noreferrer
values:
target-blank:
noopener: false
noreferrer: false
Adding additional rel attribute values
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>
Support
Contributing
- Create your feature branch (`git checkout -b my-new-feature)
- Commit your changes (
git commit -m 'Add some feature'
) - Push to the branch (git push origin my-new-feature)
- Create a new Pull Request
Testing
rake spec
# or
rspec
Credits
Legal
© 2018 - 2022 - Keith Mifsud https://keith-mifsud.me and approved contributors.
Was this project useful to you?
Don't be selfish, share it with your friends 😉
Got questions or feedback? Leave a comment, I will reply.