Add anchors for headings while keeping existing links on them

Here is a problematic page. What I wanna do with it:

  • enable # automatically appear on eg, TlDr, pros and cons headings on hovering cursor over them
  • but at the same time, I wonder to be able to open project’s page (for instance eg GitHub one) by clicking on the header text (not on appearing #)
  • also it would be great to have eg, TlDr, pros and cons appear in the TOC

The issue that this project list is auto generated from projects.yaml data file. How can I fix these problems with my site page?

Those three issues could be fixed by moving the project’s partial into a shortcode.

{{ range site.Data.projects }}
## {{ printf "[%s](%s)" .name .url }}
{{ .description }}
{{ end }}
{{% projects %}}

Please note that use % instead of < to render the content in Markdown fully. The headings handled by markdownify method will not be included into the TableOfContents.

1 Like

Here is my shortcode:

{{ range $project := $.Site.Data.projects }}
{{ printf "## [%s](%s)" $ $project.url | emojify }}
{{ $project.description }}
{{ if $project.image }}
{{ printf "![%s](%s)" $project.image $ | emojify }}
{{ end }}
{{ if $project.pros }}
{{ printf "%s" "### Pros :smile:" | emojify }}
{{ range $pros := $project.pros }}
- {{ $pros }}
{{ end }}
{{ end }}
{{ if $project.cons }}
{{ printf "%s" "### Cons :disappointed:" | emojify }}
{{ range $cons := $project.cons }}
- {{ $cons }}
{{ end }}
{{ end }}
{{ end }}

and my project page:

title: "Similar projects"
date: 2023-03-24T09:12:35+10:00
draft: false

# Introduction

There are several projects listed down below.

## List

> :warning: Note: projects are compared to this one.

{{% project_list %}}

There is just one issue left: images are not rendered now. I wonder to know why. :thinking:

There is a typo, ![TEXT](IMG_URL), it should be:

{{ printf "![%s](%s)" $ $project.image | emojify }}
1 Like

Thanks. :slight_smile: Hmm… It seems that I can’t reuse {{< image src="git-man.jpg" alt="git man" position="center" style="border-radius: 4px;" >}} in the shortcode. To check whether HTML can be used I’ve typed <h1>bla bla bla</h1> and such headers got discarded after rendering. :thinking: Is it expected? And how to make image corners rounded in a shortcode which is called with percent signs? Or I have to change theme CSS to do it?

As I know, it’s not allowed that use a shortcode inside the shortcode template, but nested shortcode is valid, see Create Your Own Shortcodes | Hugo for details.

A workaround is that create an image partial, and invoke it inside shortcode template. You can reuse the image partial on the image shortcode.
You can also output the raw HTML, see below.

I guess the RAW HTML was omitted, you can turn it off.

// config.yaml
      unsafe: true
1 Like

Yes, it solved my problem. :slight_smile:

1 Like

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