Example of Attributes Render Hook in v0.82.0

support
#1

Does anyone have an example of a working render hook using “Attributes (map)” working, specifically for class and id? The docs say it’s possible for v0.82.0 (which I have) but there is no example of how to use it for both the markdown and the HTML equivalent.

My use case: I have a link in the middle of a markdown file that needs to have a certain ID on it, so I can “select” it via JavaScript. I’m lost as to what the Markdown Syntax and the HTML syntax is for id and class for the “render-link.html” render hook placed inside of “layouts/_default/_markup/render-link.html”

1 Like
#2

Support for attributes is limited to headings, code blocks, and block elements. Links and images are inline elements. See https://discourse.gohugo.io/t/is-it-possible-to-use-attribute-lists-with-render-hooks/31374/6.

See https://discourse.gohugo.io/t/32131/5 for a workaround.

#3

Perhaps it is possible -in markdown file- to wrap the link with a shortcode {{<link-with-id id = "link-id">}} link {{</ link-with-id>}}

And then in the shortcode file replace the content of the <a> tag using Hugo’s replace function.
https://gohugo.io/functions/replace/
Similar to what is suggested here:

#4

markdown

{{< a href="https://gohugo.io/" id="foo" style="color: green" >}}
This is **bold** text.
{{< /a >}}

layouts/shortcodes/a.html

<a
  {{- range $k, $v := .Params -}}
    {{- (printf " %s=%q" $k $v) | safeHTMLAttr -}}
  {{- end -}}
  >
  {{- .Inner | .Page.RenderString -}}
</a>

Resulting HTML

<a href="https://gohugo.io/" id="foo" style="color: green">This is <strong>bold</strong> text.</a>
3 Likes
#6

Nice solution.
:+1:

1 Like
#7

I was afraid I would have to depend on a shortcode. Which is fine, except when I start nesting shortcodes and HTML stops being rendered.

This is the cleanest and best “a” link shortcode I’ve ever seen. Bravo, and many thanks. I will utilize this and re-think my nested shortcodes.

2 Likes
#8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.