컴포넌트 19종에는 변형이 모두 51개 있어요. 사이트가 열 곳이면 모두 다른 모양이 되도록 변형을 사이트마다 달리 골라요. 방법은 두 가지예요. 사이트 설정 파일(site.json)의 variants 에 { "PostCard": "number" } 처럼 적거나, 적지 않으면 사이트 이름을 바탕으로 자동으로 정해요. 같은 사이트는 늘 같은 모양이고, 사이트를 더하거나 빼도 다른 사이트 모양은 바뀌지 않아요. 없는 컴포넌트나 변형 이름을 적으면 빌드가 멈춰요.
자동으로 정할 때는 규칙이 하나 있어요. 홈 머리가 주제 바로가기인 finder 이면 그 아래 주제 목록이 index(역시 바로가기)로 정해질 때 같은 목록이 두 번 나와요. 위 데모가 그 모양이에요. 그래서 자동 선택은 이 경우 주제 목록을 sections 로 바꿔요. 원본 코드를 읽어 보면 이 보정은 자동 선택에만 걸리고, site.json 에 두 변형을 모두 직접 적으면 걸리지 않아요. 직접 적을 때는 이 조합을 스스로 피해야 해요.
지금 열 곳은 첫인상을 정하는 컴포넌트 여섯 개(머리, 홈 머리, 글 머리, 글 카드, 주제 목록, 요약)가 사이트끼리 최소 세 개씩 다르게 정해졌어요. 이 값은 variants.test.ts 가 확인하고, 바꾸면 모든 사이트의 모양이 바뀌니 함부로 건드리지 않아요.
언제 쓰나
새 사이트를 만들 때, 또는 한 사이트의 모양을 일부러 바꾸고 싶을 때 떠올려요. 바꾸고 나서 같은 내용이 두 번 나오지 않는지 한 번 봐요.