Hugo에는 Shortcode라는 snippet이 있습니다. 제가 hugo로 넘어오고 굉장히 맘에 들었던 부분인데요. 오늘은 shortcode가 뭔지, 어떻게 사용하는지 그리고 어떻게 쓰면 더 좋을지 이야기해볼게요.

Shortcode

우리가 shell에서 command snippet을 사용하듯이 Hugo에서는 미리 Content에서 사용할 template을 정의한 후 글 작성 중간에 shortcode를 호출하여 사용할 수 있습니다.

여기서의 template은 html, js 등도 사용이 가능하기 때문에 미리 스크립트 코드르 만들어두고 markdown 내부에서 쉽게 호출할 수 있습니다.

shortcode는 아래 패턴으로 사용합니다. shortcode를 사용하겠다고 명시하고, 안에 shortcodename과 넘겨줄 인자값을 적어주면 됩니다.

{{﹤ shortcodename parameters >}}

이게 뭔가 싶을텐데, 우선 shortcode를 하나 만들어보죠.

Make shortcode

shortcode는 layout/shortcodes/ 하위에 html 파일로 정의할 수 있습니다. 서비스 앱, 테마 즉 2개의 path에서 정의가 가능하죠.

• /layouts/shortcodes/.html
• /themes//layouts/shortcodes/.html

하위에 html 파일을 하나 만들어봅시다. html 파일 내부에선 당연히 Hugo 라서 Go template 문법을 사용할 수 있고, 이를 통해서 shortcode로 출력할 데이터를 작성해주시면 됩니다.

이 때 Go template을 통해 현재 날짜 정보({{now.Format “2006-01-01”}})나, 환경 정보 등을 읽어올 수 있고 short 코드를 호출할 때 받은 파라미터를 사용할 수도 있습니다.

<!-- Filename: youtube.html -->
{{- $pc := .Page.Site.Config.Privacy.YouTube -}}
{{- if not $pc.Disable -}}
{{- $ytHost := cond $pc.PrivacyEnhanced  "www.youtube-nocookie.com" "www.youtube.com" -}}
{{- $id := .Get "id" | default (.Get 0) -}}
<div class="video-wrapper">
    <iframe loading="lazy"
            src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}"
            allowfullscreen
            title="YouTube Video"
    >
    </iframe>
</div>
{{ end -}}

어쩄던 위 shortcode는 youtube를 위한 iframe 태그를 생성해주는 shortcode이고, 첫번째 인자값(.Get 0)으로 받은 값을 iframe src 주소 중 embed에 사용되는 id로 지정해주게 됩니다.

Use shortcode

그러면 방금 만든 shortcode를 사용해봐야겠죠? markdown 본문에서 아래와 같이 shortcode에 name과 parameter를 넘겨줍니다.

---
title: "123"
date: 2021-08-18T13:57:59+09:00
last_modified_at: 2021-08-18T13:57:59+09:00
image:
tags:
- none
---

{{﹤ youtube "YG3qMjW_kLA" >}}

이후 빌드해서 보면 잘 적용되는 것을 볼 수 있습니다.

Useful built-in shortcodes

hugo에는 기본적으로 built-in shortcode가 있습니다. 따로 정의하지 않아도 바로 사용할 수 있죠.

vimeo

{{﹤ vimeo video-id >}}
{{﹤ vimeo 276071416 >}}

youtube

{{﹤ youtube video-id >}}
{{﹤ youtube YG3qMjW_kLA >}}

twitter

{{﹤ tweet tweet-ID >}}
{{﹤ tweet 1427445809973403659 >}}

Instalgram

{{﹤ instagram id >}}
{{﹤ instagram CQxw8lzjAg_ >}}

gist

{{﹤ gist user key file >}}
{{﹤ gist hahwul ac4ccea5e5e80625797241a9c8636885 "listen-port-mac.sh" >}}

Other shortcodes?

• https://github.com/parsiya/Hugo-Shortcodes
• https://github.com/ryansb/hugo-shortcodes
• https://github.com/sharadcodes/hugo-shortcodes-netlify-cms
• https://github.com/haideralipunjabi/hugo-shortcodes
• https://github.com/MatNoble/hugo-shortcodes-sets
• https://github.com/hertleinj/HugoShortCodes
• https://github.com/spech66/hugo-shortcodes

References

• https://gohugo.io/content-management/shortcodes/
• https://gohugo.io/templates/shortcode-templates/

Previous Post

Hugo Archetypes을 이용한 글 Template 사용하기

Next Post

[Cullinan #11] Add CSRF and SSRF