Hugo Shortcodes 안에서 Shortcodes 호출

Hugo 개발하다 shortcodes 안에서 shortcodes 호출이 필요할 때.

Nested Shortcodes

Shortcodes 샘플

layouts/shortcodes/gallery.html

1
2
3
<div class="{{.Get "class"}}">
  {{.Inner}}
</div>

layouts/shortcodes/img.html

1
2
3
4
5
6
{{- $src := .Get "src" -}}
{{- with .Parent -}}
  <img src="{{$src}}" class="{{.Get "class"}}-image">
{{- else -}}
  <img src="{{$src}}">
{{- end }}

.Parent는 부모 shortcode 호출 및 context 접근 가능 여부.

호출

콘텐츠에서 Shortcodes 호출.

1
2
3
4
5
{{< gallery class="content-gallery" >}}
  {{< img src="/images/one.jpg" >}}
  {{< img src="/images/two.jpg" >}}
{{< /gallery >}}
{{< img src="/images/three.jpg" >}}

결과

1
2
3
4
5
<div class="content-gallery">
    <img src="/images/one.jpg" class="content-gallery-image">
    <img src="/images/two.jpg" class="content-gallery-image">
</div>
<img src="/images/three.jpg">

Shortcodes 대신 Partials 호출

중첩 shortcodes 보다 자유롭게 응용할 수 있음.

Shortcodes 안에서 Shortcodes 호출

4
5
<!-- Inside shortcode -->
{{< other-shortcode >}}

Shortcode 직접 호출은 불가.

Shortcodes 안에서 Partials 호출

4
5
<!-- Inside shortcode -->
{{ partial "something.html" . }}

그게 다야. 축하해! 👏