HUGO

Help with nested shortcode

Hello everyone. I am trying to create a shortcode to make the creation of tabed code views easier. In my case, I will always be displaying tabs for only two languages. So, I want to make a short code whose arguments are the two code blocks.

t{{< tabs tabTotal="2" tabName1="Pyret" tabName2="BSL">}}
{{< tab tabNum="1" >}}
<pre>
  {{.Get 0}}
</pre>
{{< /tab >}}
{{< tab tabNum="2" >}}
<pre>
 {{.Get 1}}
</pre>
{{< /tab >}}
{{< /tabs >}}

When i tried to make the above into a short code called code it did not allow me to reference the tab and tabs shortcodes.

I feel like maybe my entire approach is wrong and I should be using .Parent but i am not really sure how.

You need to call .Get from inside the shortcode definition (layouts/shortcodes/foo.html), not inside the shortcode call from your content. Also, you are using .Get 0, which is used for positional parameters, while you have named parameters.

Have a read about shortcode templates here: Create Your Own Shortcodes | Hugo

I suggest you start with a smaller example and build up on it.

<!-- content/test.md -->
{{< foo >}}
{{< bar >}}
bar 1
{{< /bar >}}
{{< bar >}}
bar 2
{{< /bar >}}
{{< /foo >}}
<!-- shortcodes/foo.html -->
begin inner:
<br>{{ .Inner }}<br>
:end inner
<!-- shorcodes/bar.html -->
<br>
begin bar:
<br>{{ .Inner }}<br>
: end bar
<br>

Will result in:

begin inner:

begin bar:
bar 1
: end bar

begin bar:
bar 2
: end bar

:end inner

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