E EmDash CMS Everything Guides, use cases, plugins, templates
Italiano

Panoramica sui temi

In questa pagina

Un tema EmDash è un sito Astro completo — pagine, layout, componenti, stili — distribuito tramite create-astro. Include anche un file seed che inizializza il database con collezioni, campi, menu, reindirizzamenti e contenuti di esempio al primo avvio.

Cosa offre un tema

Un tema è un progetto Astro funzionante con:

  • Pages — route Astro per il rendering dei contenuti (home, post del blog, archivi, ecc.)
  • Layouts — struttura HTML condivisa
  • Components — elementi UI riutilizzabili (navigazione, card, footer)
  • Styles — CSS o configurazione Tailwind
  • Un file seed — JSON che indica al CMS quali tipi di contenuto e campi creare

Struttura di un tema

my-theme/
├── package.json           # Metadati del tema + config EmDash
├── astro.config.mjs       # Setup integrazione Astro
├── src/
│   ├── live.config.ts     # Configurazione Live Collections
│   ├── pages/             # Route Astro
│   ├── layouts/           # Componenti layout
│   └── components/        # Componenti UI
└── .emdash/
    ├── seed.json          # Schema + contenuto di esempio
    └── uploads/           # File media locali opzionali

Come i temi avviano i siti

Quando crei un sito da un tema succede quanto segue:

  1. create-astro genera il progetto dal template
  2. Esegui npm install e npm run dev
  3. Alla prima visita all’admin parte automaticamente la Configurazione guidata
  4. La procedura applica il file seed, creando collezioni, menu, reindirizzamenti e contenuti
  5. Il sito è pronto all’uso

Per gli utenti

Scegli un tema, avvia la procedura guidata, inizia a modificare. Non serve conoscere il database.

Per gli sviluppatori

I temi sono progetti Astro standard. Personalizza liberamente dopo la generazione.

Installare un tema

Usa create-astro con un template:

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

I temi della community usano GitHub:

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

Dopo l’installazione:

cd my-site
npm install
npm run dev

Visita http://localhost:4321/_emdash/admin per completare la Configurazione guidata.

La Configurazione guidata

La Configurazione guidata parte automaticamente alla prima visita all’admin. Essa:

  1. Chiede titolo del sito, slogan e credenziali amministratore
  2. Offre l’opzione di includere contenuti di esempio
  3. Applica il file seed al database
  4. Reindirizza alla dashboard di amministrazione
┌────────────────────────────────────────────────────────┐
│                                                        │
│                    ◆ EmDash                            │
│                                                        │
│            Benvenuto nel tuo nuovo sito                │
│                                                        │
│  Titolo sito:    [Il mio blog fantastico             ] │
│  Slogan:         [Pensieri e idee                    ] │
│                                                        │
│  Email admin:    [[email protected]                  ] │
│  Password admin: [••••••••••••                       ] │
│                                                        │
│  ☑ Includi contenuti di esempio                        │
│                                                        │
│                   [Crea sito →]                        │
│                                                        │
│  Template: Blog Starter                                │
│  Crea: 2 collezioni, 3 pagine, 1 post                 │
└────────────────────────────────────────────────────────┘

Temi ufficiali

EmDash fornisce temi di partenza ufficiali, ciascuno disponibile in variante locale (SQLite + filesystem) e Cloudflare (D1 + R2):

TemaDescrizioneCaso d’uso
@emdash-cms/template-blogBlog minimale con post, pagine, categorie e modalità scuraBlog personali, siti semplici
@emdash-cms/template-portfolioPortfolio in stile editoriale con progetti, tipografia serif (Playfair Display) e layout incentrati sulle immaginiFreelancer, agenzie, creativi
@emdash-cms/template-marketingSito marketing deciso con blocchi Portable Text personalizzati (hero, funzionalità, testimonianze, prezzi, FAQ)Landing page, siti SaaS, marketing prodotto

Varianti Cloudflare

Per il deploy su Cloudflare Pages con D1 e R2, aggiungi -cloudflare al nome del 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-cloudflare

Queste varianti includono wrangler.jsonc per la configurazione del deploy.

Personalizzare dopo l’installazione

Dopo la Configurazione guidata, il tuo sito è un progetto Astro standard. Personalizzalo come qualsiasi altro sito Astro:

  • Modifica le pagine in src/pages/
  • Aggiorna i layout in src/layouts/
  • Aggiungi collezioni dall’interfaccia admin
  • Installa integrazioni Astro
  • Esegui il deploy ovunque Astro sia supportato

Il file seed viene usato solo durante la configurazione iniziale. Una volta applicato, lo schema risiede nel database.

Passi successivi