E EmDash CMS Everything Guides, use cases, plugins, templates
한국어

테마 개요

이 페이지

EmDash 테마는 create-astro를 통해 배포되는 완전한 Astro 사이트(페이지, 레이아웃, 컴포넌트, 스타일)입니다. 또한 첫 실행 시 컬렉션, 필드, 메뉴, 리디렉션 및 샘플 콘텐츠로 데이터베이스를 초기화하는 시드 파일도 포함되어 있습니다.

테마가 제공하는 것

테마는 다음을 포함하는 작동하는 Astro 프로젝트입니다:

  • Pages — 콘텐츠 렌더링을 위한 Astro 라우트(홈페이지, 블로그 게시물, 아카이브 등)
  • Layouts — 공유 HTML 구조
  • Components — 재사용 가능한 UI 요소(네비게이션, 카드, 푸터)
  • Styles — CSS 또는 Tailwind 구성
  • 시드 파일 — CMS에 어떤 콘텐츠 타입과 필드를 생성할지 알려주는 JSON

테마 구조

테마는 다음과 같은 레이아웃을 가지고 있습니다:

my-theme/
├── package.json           # 테마 메타데이터 + EmDash 구성
├── astro.config.mjs       # Astro 통합 설정
├── src/
│   ├── live.config.ts     # Live Collections 구성
│   ├── pages/             # Astro 라우트
│   ├── layouts/           # 레이아웃 컴포넌트
│   └── components/        # UI 컴포넌트
└── .emdash/
    ├── seed.json          # 스키마 + 샘플 콘텐츠
    └── uploads/           # 선택적 로컬 미디어 파일

테마가 사이트를 시작하는 방법

테마에서 사이트를 만드는 과정은 다음 단계를 따릅니다:

  1. create-astro가 템플릿에서 프로젝트를 생성
  2. npm install 및 npm run dev 실행
  3. 첫 관리자 방문 시 설정 마법사가 자동으로 실행
  4. 마법사가 시드 파일을 적용하여 컬렉션, 메뉴, 리디렉션 및 콘텐츠 생성
  5. 사이트 사용 준비 완료

사용자용

테마를 선택하고, 마법사를 실행하고, 편집을 시작하세요. 데이터베이스 지식이 필요하지 않습니다.

개발자용

테마는 표준 Astro 프로젝트입니다. 스캐폴딩 후 자유롭게 커스터마이징하세요.

테마 설치

다음 명령은 공식 테마 템플릿에서 사이트를 생성합니다:

npm create astro@latest -- --template @emdash-cms/template-blog

GitHub에 호스팅된 커뮤니티 테마는 github: 템플릿 접두사를 사용합니다:

npm create astro@latest -- --template github:user/emdash-portfolio

스캐폴딩 후 종속성을 설치하고 개발 서버를 시작합니다:

cd my-site
npm install
npm run dev

설정 마법사를 완료하려면 http://localhost:4321/_emdash/admin을 방문하세요.

설정 마법사

설정 마법사는 첫 관리자 방문 시 자동으로 실행됩니다. 다음 단계를 수행합니다:

  1. 사이트 제목, 태그라인 및 관리자 자격 증명 입력 요청
  2. 샘플 콘텐츠 포함 옵션 제공
  3. 시드 파일을 데이터베이스에 적용
  4. 관리자 대시보드로 리디렉션

공식 테마

EmDash는 각각 로컬(SQLite + 파일 시스템) 및 Cloudflare(D1 + R2) 변형으로 제공되는 공식 스타터 테마를 제공합니다:

테마설명사용 사례
@emdash-cms/template-blog게시물, 페이지, 카테고리 및 다크 모드가 있는 미니멀 블로그개인 블로그, 간단한 사이트
@emdash-cms/template-portfolio프로젝트, 세리프 타이포그래피(Playfair Display), 이미지 중심 레이아웃이 있는 에디토리얼 스타일 포트폴리오프리랜서, 에이전시, 크리에이티브
@emdash-cms/template-marketing커스텀 Portable Text 블록(히어로, 기능, 추천사, 가격, FAQ)이 있는 대담한 마케팅 사이트랜딩 페이지, SaaS 사이트, 제품 마케팅

Cloudflare 변형

D1 및 R2를 사용한 Cloudflare Workers 배포의 경우 다음 명령과 같이 템플릿 이름에 -cloudflare를 추가합니다:

npm create astro@latest -- --template @emdash-cms/template-blog-cloudflare
npm create astro@latest -- --template @emdash-cms/template-portfolio-cloudflare
npm create astro@latest -- --template @emdash-cms/template-marketing-cloudflare

이러한 변형에는 배포 구성을 위한 wrangler.jsonc가 포함되어 있습니다.

설치 후 커스터마이징

설정 마법사가 완료되면 사이트는 표준 Astro 프로젝트입니다. 다른 Astro 사이트처럼 커스터마이징하세요:

  • src/pages/에서 페이지 편집
  • src/layouts/에서 레이아웃 수정
  • 관리 UI를 통해 컬렉션 추가
  • Astro 통합 설치
  • Astro가 실행되는 곳이면 어디서나 배포

시드 파일은 초기 설정 중에만 사용됩니다. 그 이후에는 관리 패널 또는 CLI에서 콘텐츠 모델을 관리합니다.

다음 단계