link: introduce effects

- new link effects: target download
- effects can now be strings besides bools (to allow for custom download
  attribute on links)
- remove "no*" classes form image as they don't make sense for
  string effects and are cluttering the image class list for newly
  introduced effects
- refactor attribute parsing for later reusage in menu generation, button
  topbar, etc.
This commit is contained in:
Sören Weber 2025-02-07 14:28:26 +01:00
parent 516e552ece
commit aaf0c707a2
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
10 changed files with 230 additions and 93 deletions
docs/content
authoring
configuration/customization
introduction
quickstart
releasenotes/7

View file

@ -681,6 +681,34 @@ That's some more text with a footnote.[^someid]
Blue light glows blue.
{{% /notice %}}
### Link Effects
{{% badge color="#7dc903" icon="fa-fw fas fa-puzzle-piece" %}}Relearn{{% /badge %}} This theme allows additional non-standard formatting by setting query parameter at the end of the URL. See the [link effects docs](authoring/linkeffects) for a detailed example and how to configure it.
#### Target
Add query parameter `target=_self` or `target=_blank` to override [site-wide settings](authoring/frontmatter/linking#opening-links) of [the target behavior](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target) individuallly for each link.
````md
[Magic in new window](images/magic.gif?target=_blank)
````
{{% notice style="code" icon="eye" title="Result" %}}
[Magic in new window](images/magic.gif?target=_blank)
{{% /notice %}}
#### Download
Add query parameter `download` or `download=myfile.gif` to force your browser [to download the link target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download) instead of opening it.
````md
[Magic as a download](images/magic.gif?download)
````
{{% notice style="code" icon="eye" title="Result" %}}
[Magic as a download](images/magic.gif?download)
{{% /notice %}}
## Images
### Basic Images

View file

@ -56,27 +56,21 @@ With this configuration in effect, the following URL
would result in
````html {title="HTML"}
<img src="https://octodex.github.com/images/minion.png" loading="lazy" alt="Minion" class="bg-white border nolazy lightbox noshadow">
<img src="https://octodex.github.com/images/minion.png" loading="lazy" alt="Minion" class="bg-white border lightbox">
````
## Styling Effects
If the resulting effect value is
- `true`: add a class with the effect's name
- `false`: add a class with the effect's name and a "no" prefix
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 example you could add styles for both boolean cases:
For the above custom effect you could add the following style:
````html {title="layouts/partials/content-header.html"}
<style>
img.bg-white {
background-color: white;
}
img.nobg-white {
background-color: transparent;
}
</style>
````

View file

@ -127,7 +127,7 @@ Open [http://localhost:1313](http://localhost:1313) in your web browser.
You can keep the server running while you edit. The browser will update automatically when you save changes.
{{% figure src="magic.gif" link="https://gohugo.io" alt="Magic" caption="It's a kind of magic" %}}
{{% figure src="images/magic.gif" link="https://gohugo.io" alt="Magic" caption="It's a kind of magic" %}}
## Build and Deploy

Binary file not shown.

Before

(image error) Size: 1.4 MiB

View file

@ -10,9 +10,24 @@ weight = -4
### New
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} If [`link.errorlevel` is configured](authoring/frontmatter/linking/#enabling-link-and-image-link-warnings), now also the `pageRef` of a [Hugo menu item](https://gohugo.io/content-management/menus/) and the `menuPageRef` in a [page's front matter](configuration/sidebar/menus/#displaying-arbitrary-links-in-a-page-menu) will be checked for existence.
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme now allows page references (given as `pageRef` of a [Hugo menu item](https://gohugo.io/content-management/menus/), `pageRef` parameter of a [`sidebarmenus` entry ](configuration/sidebar/menus#defining-sidebar-menus) and the `menuPageRef` in a [page's front matter](configuration/sidebar/menus/#displaying-arbitrary-links-in-a-page-menu)) to also be global resources from your `assets` directory.
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} You can now [configure an ignore list](authoring/frontmatter/linking/#ignoring-false-negatives) of addresses that should be ignored if an errorlevel test fails. This is configured by setting `errorignore=[]` in your `hugo.toml`. This helps to remove false negatives from the output while still benefitting from the check for all other addresses.
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} If [`link.errorlevel` is configured](authoring/frontmatter/linking/#enabling-link-and-image-link-warnings), now also page references will be checked for existence.
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} It is now possible to add query parameter and an optional fragment part to all links. This is regardless whether it is a local or remote address and also applies to Hugo's internal path.
By that you can now use it on Markdown links, image links, page references.
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} This release introduces [link effects](authoring/markdown#link-effects) which work similar to [image effects](authoring/markdown#image-effects) and can be set as query parameter on any link.
With that you currently can specify
- a link target individually for each link
- that a link should result in a file download in your browser
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} You can now [configure an ignore list](authoring/frontmatter/linking/#ignoring-false-negatives) of addresses that should be ignored if an errorlevel test fails. This is configured by setting `errorignore=[]` globally in your `hugo.toml` for all errorlevel checks.
This helps to remove false negatives while still benefitting from the check for all other addresses.
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme supports the new [`source` output format](configuration/sitemanagement/outputformats/#source-support) which behaves similar in configuration as the `markdown` output format but allows the original Markdown source including the front matter of a page to be viewed.