E EmDash CMS Everything Guides, use cases, plugins, templates
Português

Visão Geral de Temas

Nesta página

Um tema EmDash é um site Astro completo — páginas, layouts, componentes, estilos — distribuído via create-astro. Ele 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 fornece

Um tema é um projeto Astro funcional com:

  • Pages — Rotas Astro para renderizar conteúdo (página inicial, posts de blog, arquivos, etc.)
  • Layouts — Estrutura HTML compartilhada
  • Components — Elementos UI reutilizáveis (navegação, cards, rodapés)
  • Styles — Configuração CSS ou Tailwind
  • Um arquivo seed — JSON que informa ao CMS quais tipos de conteúdo e campos criar

Estrutura do tema

Um tema tem o seguinte layout:

my-theme/
├── package.json           # Metadados do tema + configuração EmDash
├── astro.config.mjs       # Configuração de integração Astro
├── src/
│   ├── live.config.ts     # Configuração Live Collections
│   ├── pages/             # Rotas Astro
│   ├── layouts/           # Componentes de layout
│   └── components/        # Componentes UI
└── .emdash/
    ├── seed.json          # Esquema + conteúdo de exemplo
    └── uploads/           # Arquivos de mídia locais opcionais

Como os temas inicializam sites

Criar um site a partir de um tema segue estes passos:

  1. create-astro cria o projeto a partir do template
  2. Executar npm install e npm run dev
  3. Na primeira visita ao admin, o Assistente de Configuração é executado automaticamente
  4. O assistente aplica o arquivo seed, criando coleções, menus, redirecionamentos e conteúdo
  5. O site está pronto para usar

Para Usuários

Escolha um tema, execute o assistente, comece a editar. Nenhum conhecimento de banco de dados necessário.

Para Desenvolvedores

Temas são projetos Astro padrão. Personalize livremente após o scaffolding.

Instalar um tema

O seguinte comando cria um site a partir de um template de tema oficial:

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

Temas da comunidade hospedados no GitHub usam o prefixo de template github::

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

Após o scaffolding, instale as dependências e inicie o servidor de desenvolvimento:

cd my-site
npm install
npm run dev

Visite http://localhost:4321/_emdash/admin para completar o Assistente de Configuração.

O Assistente de Configuração

O Assistente de Configuração é executado automaticamente na primeira visita ao admin. Ele realiza estes passos:

  1. Solicita título do site, tagline e credenciais de administrador
  2. Oferece uma opção para incluir conteúdo de exemplo
  3. Aplica o arquivo seed ao banco de dados
  4. Redireciona para o painel de administração

Temas oficiais

EmDash fornece temas iniciais oficiais, cada um disponível em variantes locais (SQLite + sistema de arquivos) e Cloudflare (D1 + R2):

TemaDescriçãoCaso de uso
@emdash-cms/template-blogBlog minimalista com posts, páginas, categorias e modo escuroBlogs pessoais, sites simples
@emdash-cms/template-portfolioPortfólio de estilo editorial com projetos, tipografia serifada (Playfair Display) e layouts focados em imagensFreelancers, agências, criativos
@emdash-cms/template-marketingSite 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 Workers com D1 e R2, adicione -cloudflare ao nome do template, como nos seguintes comandos:

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

Essas variantes incluem wrangler.jsonc para configuração de implantação.

Personalização após instalação

Após a conclusão do Assistente de Configuração, o site é um projeto Astro padrão. Personalize-o como qualquer site Astro:

  • Edite páginas em src/pages/
  • Modifique layouts em src/layouts/
  • Adicione coleções através da UI admin
  • Instale integrações Astro
  • Implante em qualquer lugar onde o Astro funcione

O arquivo seed é usado apenas durante a configuração inicial. Depois disso, gerencie o modelo de conteúdo no painel admin ou com a CLI.

Próximos passos