마케팅 페이지

제품을 둘러싼 페이지를 만드는 레이아웃입니다. 무엇을 하는지, 얼마인지, 어디서 받는지, 어떻게 보여 줄지, 어떻게 연락하는지를 다룹니다. 자기 페이지에서만 modootoday-marketing.css를 불러오고 JavaScript는 추가하지 않습니다. 모든 레이아웃은 제목, 소개 문장인 description:, 선택 사항인 actions: [{label, url}] 버튼을 읽습니다.

레이아웃	front matter	구조화 데이터	데모
`feature`	`features: [{title, text}]`, `cta`	WebPage	기능
`pricing`	`plans`, `currency`	WebPage	요금
`download`	`version`, `date`, `downloads: [{label, url, size, checksum}]`	WebPage	다운로드
`brand`	`colors: [{name, hex}]`, `assets: [{label, url, format}]`	WebPage	브랜드
`links`	`image`, `name`, `links: [{label, url}]`	ProfilePage	링크
`contact`	`contacts: [{label, value, url}]`, `form: {action, fields}`	ContactPage	문의

제품 정보를 구조화 데이터로 내보내려면 schema: 맵(예: type: SoftwareApplication과 offers)을 추가하세요. 주요 개체로 출력됩니다.

요금

---
layout: pricing
currency: ₩
plans:
  - {name: 무료, monthly: 0, yearly: 0, features: [사이트 1개]}
  - {name: 팀, monthly: "15,000", yearly: "150,000", recommended: true, features: [사이트 10개, 지원], cta: {label: 팀 요금제 선택, url: /buy/}}
---

요금제 카드는 요금 컴포넌트 스타일을 씁니다. 요금제에 yearly가 있으면 라디오 버튼 두 개로 만든 월간/연간 전환이 CSS만으로 가격을 바꿉니다. yearly는 모든 요금제에 넣거나 하나도 넣지 마세요. recommended는 하나만 지정할 수 있고 글자로 표시됩니다.

링크

링크 페이지에는 사이트 머리글이 없습니다. links:는 큰 버튼이 되고, 전체 URL은 ProfilePage 데이터의 Person(또는 profile: organization)에 sameAs로 들어갑니다.

문의

---
layout: contact
contacts:
  - {label: 이메일, value: hello@example.com, url: "mailto:hello@example.com"}
form:
  action: https://forms.example.com/your-form   # 외부 폼 서비스, https만
  fields: [name, email, message]
---

GitHub Pages는 폼 전송을 받을 수 없으므로 form.action을 지정해야 폼이 나타납니다. 모든 입력란에는 보이는 레이블과 autocomplete가 있습니다.

브랜드

색상 견본은 SVG 채우기라서 엄격한 콘텐츠 보안 정책(CSP)에서도 인라인 스타일이 필요 없고, 색마다 16진수 코드를 글자로도 보여 줍니다. #rgb나 #rrggbb가 아닌 색은 modootoday-check가 알려 줍니다.

이 페이지 편집