External Links Plugin

The External Links plugin is a powerful tool for enhancing and managing external links on your Publii website. This plugin offers extensive customization options, allowing you to add icons, rel attributes, and additional CSS classes to external links, ensuring they seamlessly integrate with your site's design and functionality.

How the Plugin Works

The External Links plugin works dynamically during the rendering of your site, meaning it does not directly alter the input content but modifies the output during the rendering process. This ensures that the enhancements are seamlessly integrated without affecting the raw content in your CMS.

It scans for external links starting with http:// or https:// and applies the specified customizations to them. Internal links, identified based on the domain defined in Server Settings, are excluded from these modifications. This ensures that only external links are enhanced without affecting your site's internal navigation.

The plugin uses SVG icons to provide high-quality, scalable graphics that look great on all devices. Each icon was chosen for its clarity and ability to convey the nature of the link.

Enabling the Plugin

Open the Publii app and navigate to the Tools & Plugins section.
Find the External Links plugin in the list of installed plugins.
Click the switch button in the bottom-left corner of the plugin tile to activate it.

External Links Plugin Settings

Once the External Links plugin is enabled, you can access its settings screen. The settings are divided into three main categories: "General Settings", "Link Attributes", and "Styling Settings".

General Settings

This section allows you to configure the core behavior and appearance of external links.

Select Icon: Choose from various icons to be displayed with external links. Options include 12 different icons, each designed to suit different stylistic preferences.
Icon Position: Decide whether the icon should appear before or after the link text.
Apply to: Specify the plugin's scope. You can apply the settings site-wide or restrict them to post content only.

Rel and Title Attribute Management

Enhance the security, SEO, and usability of your external links by configuring their attributes.

Add 'nofollow' Attribute: Prevent search engines from following the link.
Add 'noopener' Attribute: This will enhance security by preventing the new page from accessing the window.opener property.
Add 'noreferrer' Attribute: Prevent the browser from sending the referrer header.
Add 'sponsored' Attribute: Indicate that the link is sponsored.
Add 'ugc' Attribute: Mark the link as user-generated content.
Override 'rel' Attribute: Replace existing rel attributes with the selected ones.
Tip: If all the above attributes are toggled off, no rel attribute will appear in the code, allowing you to remove the rel attribute from the link completely.
Link Title Attribute: Add a title attribute to provide additional context or information about the link destination. If a title is specified, it will override any existing title. If left blank, no title will be added unless one is present.

Styling Settings

Customize the visual presentation of your external links to match your site's design.

Additional CSS Class for Links: Add custom CSS classes to external links for advanced styling.
Icon Margin: Specify the margin between the icon and the link text. Example values include '5px' and '.3em'.
Icon Size: Define the icon's size, e.g., '16px' or '1.5rem'.
Icon Vertical Position: Adjust the vertical position of the icon from -20px to 20px to ensure perfect alignment with the link text.
Icon Color: Choose to match the icon color with the current link or specify a custom color.

Advanced Settings

This section provides options for excluding specific links from the plugin's modifications.

Exclude Selectors: Specify CSS classes and IDs of the links to exclude, one per line.
Example:
```
btn
myButton
```