Hugo 기본 shortcode 아카이브#
이 폴더는 Hugo가 기본으로 제공하는 embedded shortcode를 실무 관점에서 다시 정리한 실습 묶음입니다.
Hugo의 공식 문서에는 embedded shortcode로 details, figure, highlight, instagram, param, qr, ref, relref, vimeo, x, youtube가 안내되어 있습니다. 이 아카이브는 그 11개를 모두 다루며, 각 shortcode마다 다음을 함께 봅니다.
- 어떤 용도인지
- 어떤 인자를 받는지
- 렌더링 결과가 어떤 모양인지
- 원형 shortcode가 어떻게 생겼는지
- 실무에서 주의할 점이 무엇인지
구성#
01-embedded/
shortcode별 개별 설명 페이지입니다.04-coverage/
모든 shortcode 예제를 한 페이지에 다시 모은 통합 페이지입니다.ref-target.md,relref-target.md
ref와relref예제가 안정적으로 동작하도록 만든 내부 대상 페이지입니다.
읽는 순서#
01-embedded/01-details.md01-embedded/02-figure/01-embedded/03-highlight.md01-embedded/04-instagram.md01-embedded/05-param.md01-embedded/06-qr.md01-embedded/07-ref.md01-embedded/08-relref.md01-embedded/09-vimeo.md01-embedded/10-x.md01-embedded/11-youtube.md04-coverage/_index.md
이 아카이브의 기준#
이 문서는 단순 예제 모음이 아니라, 실제로 복사해서 시작점으로 쓸 수 있게 구성했습니다.
- 코드 블록은 가독성을 위해 줄바꿈을 넣었습니다.
- 각 페이지는 렌더링 결과와 원형을 분리해 보여 줍니다.
- 설명은 기능 설명과 예외 사항을 같이 적었습니다.
- 내부 링크 예제는 빌드가 깨지지 않도록 참조 대상 페이지를 함께 둡니다.
빠른 요약#
details는 접고 펼치는 설명 상자입니다.figure는 이미지와 캡션, 링크를 모두 담는 구조입니다.highlight는 코드 하이라이트와 인라인 코드 강조에 모두 쓸 수 있습니다.instagram,vimeo,x,youtube는 외부 미디어 임베드입니다.param은 front matter 또는 site config 값을 본문에 꺼내오는 용도입니다.qr은 텍스트를 QR 코드 이미지로 바꿉니다.ref,relref는 페이지 참조 링크를 안전하게 연결합니다.