이 페이지는 CTA가 실제 포스팅 맥락에서 어떻게 보이는지 확인하기 위한 전용 테스트다.
중앙 제어 구조는 다음 순서로 읽힌다.
- shortcode 인자
- page front matter의
params.cta - site config의
params.cta - defaults
렌더링 경로에서 볼 것
- label이 비어 있어도 fallback이 살아 있는가
href와ref정책이 충돌하지 않는가_blank일 때rel이 안전하게 붙는가- compact / disabled / align / tone가 실제 레이아웃에 반영되는가
- unknown kind가 들어와도 렌더링이 조용히 유지되는가
기본형
< cta kind=“trial” label=“14일 무료 체험 시작” />
복사
block CTA
< cta kind=“consult” label=“상담 신청” > 평일 기준 1영업일 내 회신합니다. < /cta >
페이지 전용 preset이 먼저 먹는지 확인
원문 코드
<div class="cta-card"><strong>뉴스레터 CTA</strong><a href="/" class="button button--primary">구독</a></div>
<div class="cta-card"><strong>상담 신청</strong><p>평일 기준 1영업일 내 회신</p></div>
<div class="cta-card"><a href="https://example.com/docs" target="_blank" rel="noopener" class="button">외부 문서 열기</a></div>
검증 기준
- 라벨, 배지, 노트가 한 줄씩 자연스럽게 정렬되는가
- block CTA가 본문과 너무 강하게 분리되지 않는가
- wide / compact / hero / after-content 같은 표면 차이가 읽히는가
- 외부 링크의 안전 옵션이 빠지지 않는가