figure shortcode

figure는 <figure>, <img>, <figcaption> 구조를 한 번에 만들고 싶을 때 쓰는 shortcode입니다.
이미지 본문, 캡션, 출처, 링크를 하나의 단위로 묶기 좋습니다.

공식 문서 기준으로 src, alt, width, height, loading, class, link, target, rel, title, caption, attr, attrlink를 사용할 수 있습니다. src는 이미지 경로, caption은 설명, attr과 attrlink는 출처 표기에 특히 유용합니다. 문서에는 내부 리소스, 전역 리소스, 원격 주소를 모두 지원한다고 설명되어 있습니다. citeturn791175view5turn241043view1

렌더링 결과

Hugo figure shortcode를 위한 샘플 SVG

샘플 figure

local page resource를 사용해 외부 의존성을 없앤 figure 예시입니다. Hugo shortcode archive

원형

{{< figure
  src="figure-sample.svg"
  alt="Hugo figure shortcode를 위한 샘플 SVG"
  link="https://gohugo.io/shortcodes/figure/"
  target="_blank"
  rel="noopener noreferrer"
  title="샘플 figure"
  caption="local page resource를 사용해 외부 의존성을 없앤 figure 예시입니다."
  attr="Hugo shortcode archive"
  attrlink="https://gohugo.io/content-management/shortcodes/"
  class="figure-lab"
  loading="lazy"
>}}

해석 포인트

  • src는 가능한 한 페이지 리소스나 전역 리소스로 두는 편이 관리가 쉽습니다.
  • link를 주면 이미지를 클릭해서 관련 문서로 이동시킬 수 있습니다.
  • title은 캡션 위쪽, caption은 아래쪽에 놓는 식으로 정보 위계를 나눌 수 있습니다.
  • attr과 attrlink는 출처를 명시할 때 좋습니다.

이 페이지가 일부러 local resource를 쓰는 이유

이 예제는 외부 이미지 서비스에 기대지 않기 위해 같은 bundle 안의 figure-sample.svg를 사용합니다.
그래서 저장소만 있으면 렌더링 결과를 재현하기 쉽습니다.