소개

Hugo로 홈페이지를 제작할 때 주로 마크다운(markdown)으로 작업을 한다. 코드블럭을 사용할 때 원래 소스파일이 변경되면 다시 마크다운 문서도 수정을 해야한다. 이 때 직접 소스 파일을 읽어서 페이지를 만든다면 해당 소스파일만 관리하면 문서에 일관성이 생기고 변경하더라도 즉시 반영된다. Hugo에서는 shortcode라는 방법을 제공하여 사용자만의 shortcode를 작성할 수 있다.

Shortcode Include - 마크다운 파일 포함하기

  • Hugo Project 내에 다음 파일을 작성: layouts/shortcodes/include.html
{{- $relPath := .Get 0 -}}
{{- $baseDir := .Page.File.Dir -}}
{{- $fullPath := path.Join $baseDir $relPath -}}
{{- readFile $fullPath | markdownify -}}
  • 작성된 shortcode 사용하기: content/posts/mypost.md에 foo.md를 포함하기
{{< include "foo.md" >}}

Shortcode Code - 코드 파일 포함하기

  • Hugo Project 내에 다음 파일을 작성: layouts/shortcodes/code.html
{{ $language := .Get "language" }}
{{ $source := .Get "source" }}
{{ $options := .Get "options" }}

{{ with $source | readFile }}
  {{ highlight (trim . "\n\r") $language $options }}
{{ end }}
  • 작성된 shortcode 사용하기: content/posts/mypost.md에 foo.c를 포함하기
  • 코드블럭 내에 아래 코드를 넣으면 foo.c를 채워 넣고 language옵션에 따라 컬러가 지원된다.
{{< code source="example/foo.c" >}}

REFERENCE