Hugo에는 Shortcode라는 snippet이 있습니다. 제가 hugo로 넘어오고 굉장히 맘에 들었던 부분인데요. 오늘은 shortcode가 뭔지, 어떻게 사용하는지 그리고 어떻게 쓰면 더 좋을지 이야기해볼게요.
Shortcode
우리가 shell에서 command snippet을 사용하듯이 Hugo에서는 미리 Content에서 사용할 template을 정의한 후 글 작성 중간에 shortcode를 호출하여 사용할 수 있습니다.
여기서의 template은 html, js 등도 사용이 가능하기 때문에 미리 스크립트 코드르 만들어두고 markdown 내부에서 쉽게 호출할 수 있습니다.
shortcode는 아래 패턴으로 사용합니다. shortcode를 사용하겠다고 명시하고, 안에 shortcodename과 넘겨줄 인자값을 적어주면 됩니다.
|
|
이게 뭔가 싶을텐데, 우선 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 코드를 호출할 때 받은 파라미터를 사용할 수도 있습니다.
|
|
어쩄던 위 shortcode는 youtube를 위한 iframe 태그를 생성해주는 shortcode이고, 첫번째 인자값(.Get 0)으로 받은 값을 iframe src 주소 중 embed에 사용되는 id로 지정해주게 됩니다.
Use shortcode
그러면 방금 만든 shortcode를 사용해봐야겠죠? markdown 본문에서 아래와 같이 shortcode에 name과 parameter를 넘겨줍니다.
|
|
이후 빌드해서 보면 잘 적용되는 것을 볼 수 있습니다.
Useful built-in shortcodes
hugo에는 기본적으로 built-in shortcode가 있습니다. 따로 정의하지 않아도 바로 사용할 수 있죠.
vimeo
|
|
youtube
|
|
|
|
Instalgram
|
|
gist
|
|
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