Why it's impossible to use one shortcode inside another directly?

Hello! For instance I have the following badge.html shortcode:

<!--
Parameters:
- hint
- leftColor (inheritable)
- rightColor (inheritable)
- logoName
- logoColor (inheritable)
-->

{{ $hint := "" }}
{{ with .Get "hint" }}
    {{ $hint = . }}
{{ else }}
    {{ errorf "`%s` parameter must be set" "hint" }}
{{ end }}
{{ if not (in $hint "-") }}
    {{ errorf "`%s` parameter doesn't have `-`" "hint" }}
{{ end }}

{{ $leftColor := "58158f" }}
{{ with .Parent.Get "leftColor" }}
    {{ $leftColor = . }}
{{ end }}
{{ with .Get "leftColor" }}
    {{ $leftColor = . }}
{{ end }}

{{ $rightColor := "000000" }}
{{ with .Parent.Get "rightColor" }}
    {{ $rightColor = . }}
{{ end }}
{{ with .Get "rightColor" }}
    {{ $rightColor = . }}
{{ end }}

{{ if and (not (.Get "logoName")) (.Get "logoColor")  }}
    {{ errorf "`%s` must be set to use `%s`" "logoName" "logoColor" }}
{{ end }}

{{ $logoColor := "e9e0ff" }}
{{ with .Parent.Get "logoColor" }}
    {{ $logoColor = . }}
{{ end }}
{{ with .Get "logoColor" }}
    {{ $logoColor = . }}
{{ end }}

{{ $params := "" }}
{{ with .Get "logoName" }}
    {{ $params = printf "&logo=%s&logoColor=%s" . $logoColor }}
{{ end }}

<img src='https://img.shields.io/badge/{{ $hint }}-{{ $rightColor }}?labelColor={{ $leftColor }}{{ $params | safeURL }}' alt="{{ $hint }}"></a>

I want reuse it smth like this to show all my skills which are in my data folder:

{{ range $Site.Data.about.skills.languages.actual }}
    {{< badge hint=(printf "%s-%s" .name .version) >}}
{{ end }}

My data file is:

- name: "Zsh"
  version: "5.8"
- name: "Bash"
  version: "5.0.17"
  logo: "gnubash"
- name: "Python"
  version: "3.8.10"
  logo: "python"
- name: "Gawk"
  version: "5.0.1"
- name: "Sed"
  version: "4.7"
- name: "Jq"
  version: "1.6"
- name: "PascalABC.NET"
  version: "3.8.3"

But I can’t do it due to shortcodes/skillList.html:7: unexpected "<" in command. What’s the best way to resolve this problem? Of course I can copy-paste and slightly modify badge.html inside this range loop but I don’t like this decision: badge drawing is not encapsulated inside some shortcode. I can inherit shortcodes but in this case I don’t know what exactly to inherit. :thinking:

P.S. Why this limitation exists at all?

Hugo comments are usually written like this {{/* Comment Here */}}

1 Like

{{< shortcodes >}} only executed inside content file.

if you want to make a shortcode template reusable. Write it as partial template.

layouts/
  shortcodes/
    badge.html
  partials/
    badge.html

layouts/partials/badge.html:

{{ REAL CODE THAT RETURN THE BADGE }}

layouts/shortcodes/badge.html:

<!-- Call badge.html partial template and pass required arguments -->
{{ partial "badge.html" ARGUMENTS -}}
1 Like

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