Link Effects

This page shows you, how to configure custom link effects on top of existing ones.

This setting can also be overridden by your front matter.

If you don’t configure anything in your hugo.toml, the link effects default to

Default Values

[linkEffects]
  download = false
  target = false

linkEffects:
  download: false
  target: false

{
   "linkEffects": {
      "download": false,
      "target": false
   }
}

Configuration

Option You can change these settings in your hugo.toml and add arbitrary custom effects as boolean values (like bg-white in the below snippet).

[params]
  [params.linkEffects]
    bg-white = true
    target = '_blank'

params:
  linkEffects:
    bg-white: true
    target: _blank

{
   "params": {
      "linkEffects": {
         "bg-white": true,
         "target": "_blank"
      }
   }
}

This would result in

[linkEffects]
  bg-white = true
  download = false
  target = '_blank'

linkEffects:
  bg-white: true
  download: false
  target: _blank

{
   "linkEffects": {
      "bg-white": true,
      "download": false,
      "target": "_blank"
   }
}

Example

With this configuration in effect, the following URL

[Magic in new window](images/magic.gif)

would result in

<a href="/images/magic.gif?target=_blank" target="_blank" class="bg-white">Magic in new window</a>

Styling Effects

If the resulting effect value is true a class with the effect’s name will be added.

Styles for default effects are contained in the theme. Add styles for your custom effects to layouts/partials/content-header.html.

For the above custom effect you could add the following style:

<style>
a.bg-white {
  background-color: white;
}
</style>