initial commit

themes/hugo-theme-relearn/docs/content/configuration/customization/linkeffects.en.md

@@ -0,0 +1,71 @@
++++
+categories = ["explanation", "howto"]
+description = "How to extend link effects"
+options = ["linkEffects"]
+title = "Link Effects"
+weight = 3
++++
+
+This page shows you, how to configure custom [link effects](authoring/markdown#link-effects) on top of existing ones.
+
+This setting can also [be overridden by your front matter](authoring/linkeffects).
+
+If you don't configure anything in your `hugo.toml`, the link effects default to
+
+## Default Values
+
+{{< multiconfig >}}
+[linkEffects]
+  download = false
+  target = false
+{{< /multiconfig >}}
+
+## Configuration
+
+{{% badge style="cyan" icon="gears" title=" " %}}Option{{% /badge %}} You can change these settings in your `hugo.toml` and add arbitrary custom effects as boolean values (like `bg-white` in the below snippet).
+
+{{< multiconfig file=hugo >}}
+[params]
+  [params.linkEffects]
+    bg-white = true
+    target = '_blank'
+{{< /multiconfig >}}
+
+This would result in
+
+{{< multiconfig >}}
+[linkEffects]
+  bg-white = true
+  download = false
+    target = '_blank'
+{{< /multiconfig >}}
+
+### Example
+
+With this configuration in effect, the following URL
+
+````markdown {title="Markdown"}
+[Magic in new window](images/magic.gif)
+````
+
+would result in
+
+````html {title="HTML"}
+<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:
+
+````html {title="layouts/partials/content-header.html"}
+<style>
+a.bg-white {
+  background-color: white;
+}
+</style>
+````