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 예제가 안정적으로 동작하도록 만든 내부 대상 페이지입니다.

읽는 순서

1. 01-embedded/01-details.md
2. 01-embedded/02-figure/
3. 01-embedded/03-highlight.md
4. 01-embedded/04-instagram.md
5. 01-embedded/05-param.md
6. 01-embedded/06-qr.md
7. 01-embedded/07-ref.md
8. 01-embedded/08-relref.md
9. 01-embedded/09-vimeo.md
10. 01-embedded/10-x.md
11. 01-embedded/11-youtube.md
12. 04-coverage/_index.md

이 아카이브의 기준

이 문서는 단순 예제 모음이 아니라, 실제로 복사해서 시작점으로 쓸 수 있게 구성했습니다.

• 코드 블록은 가독성을 위해 줄바꿈을 넣었습니다.
• 각 페이지는 렌더링 결과와 원형을 분리해 보여 줍니다.
• 설명은 기능 설명과 예외 사항을 같이 적었습니다.
• 내부 링크 예제는 빌드가 깨지지 않도록 참조 대상 페이지를 함께 둡니다.

빠른 요약

• details는 접고 펼치는 설명 상자입니다.
• figure는 이미지와 캡션, 링크를 모두 담는 구조입니다.
• highlight는 코드 하이라이트와 인라인 코드 강조에 모두 쓸 수 있습니다.
• instagram, vimeo, x, youtube는 외부 미디어 임베드입니다.
• param은 front matter 또는 site config 값을 본문에 꺼내오는 용도입니다.
• qr은 텍스트를 QR 코드 이미지로 바꿉니다.
• ref, relref는 페이지 참조 링크를 안전하게 연결합니다.