Um tema EmDash é um site Astro completo — páginas, layouts, componentes, estilos — distribuído via create-astro. Também inclui um arquivo seed que inicializa o banco de dados com coleções, campos, menus, redirecionamentos e conteúdo de exemplo na primeira execução.
O que um tema oferece
Um tema é um projeto Astro funcional com:
- Pages — rotas Astro para renderizar conteúdo (página inicial, posts do blog, arquivos etc.)
- Layouts — estrutura HTML compartilhada
- Components — elementos de UI reutilizáveis (navegação, cards, rodapés)
- Styles — CSS ou configuração do Tailwind
- Um arquivo seed — JSON que informa ao CMS quais tipos de conteúdo e campos criar
Estrutura do tema
my-theme/
├── package.json # Metadados do tema + config EmDash
├── astro.config.mjs # Configuração da integração Astro
├── src/
│ ├── live.config.ts # Configuração Live Collections
│ ├── pages/ # Rotas Astro
│ ├── layouts/ # Componentes de layout
│ └── components/ # Componentes de UI
└── .emdash/
├── seed.json # Esquema + conteúdo de exemplo
└── uploads/ # Arquivos de mídia locais opcionaisComo os temas inicializam sites
Ao criar um site a partir de um tema, ocorre o seguinte:
- O
create-astrogera o projeto a partir do template - Você executa
npm installenpm run dev - Na primeira visita ao admin, o Assistente de configuração roda automaticamente
- O assistente aplica o arquivo seed, criando coleções, menus, redirecionamentos e conteúdo
- O site fica pronto para uso
Para usuários
Escolha um tema, execute o assistente, comece a editar. Não é necessário conhecer banco de dados.
Para desenvolvedores
Temas são projetos Astro padrão. Personalize à vontade após a geração.
Instalar um tema
Use o create-astro com um template:
npm create astro@latest -- --template @emdash-cms/template-blogTemas da comunidade funcionam via GitHub:
npm create astro@latest -- --template github:user/emdash-portfolioApós a instalação:
cd my-site
npm install
npm run devAcesse http://localhost:4321/_emdash/admin para concluir o Assistente de configuração.
O Assistente de configuração
O Assistente de configuração roda automaticamente na primeira visita ao admin. Ele:
- Solicita título do site, slogan e credenciais de administrador
- Oferece a opção de incluir conteúdo de exemplo
- Aplica o arquivo seed ao banco de dados
- Redireciona ao painel de administração
┌────────────────────────────────────────────────────────┐
│ │
│ ◆ EmDash │
│ │
│ Bem-vindo ao seu novo site │
│ │
│ Título do site: [Meu blog incrível ] │
│ Slogan: [Pensamentos e ideias ] │
│ │
│ E-mail admin: [[email protected] ] │
│ Senha admin: [•••••••••••• ] │
│ │
│ ☑ Incluir conteúdo de exemplo │
│ │
│ [Criar site →] │
│ │
│ Template: Blog Starter │
│ Cria: 2 coleções, 3 páginas, 1 post │
└────────────────────────────────────────────────────────┘Temas oficiais
O EmDash oferece temas iniciais oficiais, cada um disponível nas variantes local (SQLite + sistema de arquivos) e Cloudflare (D1 + R2):
| Tema | Descrição | Caso de uso |
|---|---|---|
@emdash-cms/template-blog | Blog mínimo com posts, páginas, categorias e modo escuro | Blogs pessoais, sites simples |
@emdash-cms/template-portfolio | Portfólio editorial com projetos, tipografia serif (Playfair Display) e layouts focados em imagem | Freelancers, agências, criativos |
@emdash-cms/template-marketing | Site de marketing ousado com blocos Portable Text personalizados (hero, recursos, depoimentos, preços, FAQ) | Landing pages, sites SaaS, marketing de produto |
Variantes Cloudflare
Para implantação no Cloudflare Pages com D1 e R2, acrescente -cloudflare ao nome do template:
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-cloudflareEssas variantes incluem wrangler.jsonc para configuração de implantação.
Personalizar após a instalação
Depois que o Assistente de configuração termina, seu site é um projeto Astro padrão. Personalize como qualquer site Astro:
- Edite páginas em
src/pages/ - Ajuste layouts em
src/layouts/ - Adicione coleções pela interface de administração
- Instale integrações Astro
- Implante em qualquer lugar onde o Astro rode
O arquivo seed só é usado na configuração inicial. Depois de aplicado, o esquema fica no banco de dados.
Próximos passos
- Criando temas — Construa seu próprio tema EmDash
- Formato do arquivo seed — Referência da estrutura do seed
- Primeiros passos — Crie seu primeiro site EmDash