Un thème EmDash est un site Astro complet — pages, mises en page, composants, styles — distribué via create-astro. Il inclut aussi un fichier seed qui initialise la base de données avec des collections, des champs, des menus, des redirections et du contenu d’exemple au premier lancement.
Ce qu’apporte un thème
Un thème est un projet Astro fonctionnel avec :
- Pages — routes Astro pour afficher le contenu (accueil, articles de blog, archives, etc.)
- Layouts — structure HTML partagée
- Components — éléments d’interface réutilisables (navigation, cartes, pieds de page)
- Styles — CSS ou configuration Tailwind
- Un fichier seed — JSON qui indique au CMS quels types de contenu et champs créer
Structure d’un thème
my-theme/
├── package.json # Métadonnées du thème + config EmDash
├── astro.config.mjs # Configuration de l'intégration Astro
├── src/
│ ├── live.config.ts # Configuration Live Collections
│ ├── pages/ # Routes Astro
│ ├── layouts/ # Composants de mise en page
│ └── components/ # Composants d'interface
└── .emdash/
├── seed.json # Schéma + contenu d'exemple
└── uploads/ # Fichiers média locaux optionnelsComment les thèmes initialisent les sites
Lorsque vous créez un site à partir d’un thème, voici ce qui se passe :
create-astrogénère le projet à partir du modèle- Vous exécutez
npm installetnpm run dev - Lors de la première visite à l’admin, l’assistant de configuration s’exécute automatiquement
- L’assistant applique le fichier seed, créant collections, menus, redirections et contenu
- Le site est prêt à l’emploi
Pour les utilisateurs
Choisissez un thème, lancez l’assistant, commencez à éditer. Aucune connaissance de base de données requise.
Pour les développeurs
Les thèmes sont des projets Astro standard. Personnalisez librement après la génération.
Installer un thème
Utilisez create-astro avec un modèle :
npm create astro@latest -- --template @emdash-cms/template-blogLes thèmes communautaires passent par GitHub :
npm create astro@latest -- --template github:user/emdash-portfolioAprès l’installation :
cd my-site
npm install
npm run devRendez-vous sur http://localhost:4321/_emdash/admin pour terminer l’assistant de configuration.
L’assistant de configuration
L’assistant de configuration s’exécute automatiquement lors de la première visite à l’admin. Il :
- Demande le titre du site, le slogan et les identifiants administrateur
- Propose d’inclure du contenu d’exemple
- Applique le fichier seed à la base de données
- Redirige vers le tableau de bord admin
┌────────────────────────────────────────────────────────┐
│ │
│ ◆ EmDash │
│ │
│ Bienvenue sur votre nouveau site │
│ │
│ Titre du site : [Mon super blog ] │
│ Slogan : [Pensées et idées ] │
│ │
│ E-mail admin : [[email protected] ] │
│ Mot de passe : [•••••••••••• ] │
│ │
│ ☑ Inclure du contenu d'exemple │
│ │
│ [Créer le site →] │
│ │
│ Modèle : Blog Starter │
│ Crée : 2 collections, 3 pages, 1 article │
└────────────────────────────────────────────────────────┘Thèmes officiels
EmDash propose des thèmes de démarrage officiels, chacun disponible en variante locale (SQLite + système de fichiers) et Cloudflare (D1 + R2) :
| Thème | Description | Cas d’usage |
|---|---|---|
@emdash-cms/template-blog | Blog minimal avec articles, pages, catégories et mode sombre | Blogs personnels, sites simples |
@emdash-cms/template-portfolio | Portfolio éditorial avec projets, typographie serif (Playfair Display) et mises en page axées sur l’image | Freelances, agences, créatifs |
@emdash-cms/template-marketing | Site marketing marqué avec blocs Portable Text personnalisés (hero, fonctionnalités, témoignages, tarifs, FAQ) | Pages d’atterrissage, sites SaaS, marketing produit |
Variantes Cloudflare
Pour un déploiement sur Cloudflare Pages avec D1 et R2, ajoutez -cloudflare au nom du modèle :
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-cloudflareCes variantes incluent wrangler.jsonc pour la configuration du déploiement.
Personnaliser après l’installation
Une fois l’assistant de configuration terminé, votre site est un projet Astro standard. Personnalisez-le comme n’importe quel site Astro :
- Modifiez les pages dans
src/pages/ - Ajustez les mises en page dans
src/layouts/ - Ajoutez des collections via l’interface d’administration
- Installez des intégrations Astro
- Déployez partout où Astro peut s’exécuter
Le fichier seed n’est utilisé que lors de la configuration initiale. Une fois appliqué, votre schéma vit dans la base de données.
Étapes suivantes
- Créer des thèmes — Construire votre propre thème EmDash
- Format du fichier seed — Référence pour la structure du fichier seed
- Démarrage — Créer votre premier site EmDash