E EmDash CMS Everything Guides, use cases, plugins, templates
Français

Aperçu des thèmes

Sur cette page

Un thème EmDash est un site Astro complet — pages, layouts, composants, styles — distribué via create-astro. Il inclut également un fichier seed qui initialise la base de données avec des collections, des champs, des menus, des redirections et du contenu d’exemple lors de la première exécution.

Ce qu’un thème fournit

Un thème est un projet Astro fonctionnel avec :

  • Pages — Routes Astro pour le rendu du contenu (page d’accueil, articles de blog, archives, etc.)
  • Layouts — Structure HTML partagée
  • Components — Éléments UI réutilisables (navigation, cartes, pieds de page)
  • Styles — Configuration CSS ou Tailwind
  • Un fichier seed — JSON qui indique au CMS quels types de contenu et champs créer

Structure du thème

Un thème a la disposition suivante :

my-theme/
├── package.json           # Métadonnées du thème + configuration EmDash
├── astro.config.mjs       # Configuration d'intégration Astro
├── src/
│   ├── live.config.ts     # Configuration Live Collections
│   ├── pages/             # Routes Astro
│   ├── layouts/           # Composants layout
│   └── components/        # Composants UI
└── .emdash/
    ├── seed.json          # Schéma + contenu d'exemple
    └── uploads/           # Fichiers média locaux optionnels

Comment les thèmes initialisent les sites

Créer un site à partir d’un thème suit ces étapes :

  1. create-astro crée le projet à partir du template
  2. Exécuter npm install et npm run dev
  3. Lors de la première visite admin, l’Assistant de configuration s’exécute automatiquement
  4. L’assistant applique le fichier seed, créant des collections, des menus, des redirections et du contenu
  5. Le site est prêt à être utilisé

Pour les utilisateurs

Choisissez un thème, exécutez l’assistant, commencez à éditer. Aucune connaissance en bases de données requise.

Pour les développeurs

Les thèmes sont des projets Astro standard. Personnalisez-les librement après le scaffolding.

Installer un thème

La commande suivante crée un site à partir d’un template de thème officiel :

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

Les thèmes communautaires hébergés sur GitHub utilisent le préfixe de template github: :

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

Après le scaffolding, installez les dépendances et démarrez le serveur de développement :

cd my-site
npm install
npm run dev

Visitez 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 admin. Il effectue ces étapes :

  1. Demande le titre du site, le slogan et les identifiants admin
  2. Offre une option pour inclure du contenu d’exemple
  3. Applique le fichier seed à la base de données
  4. Redirige vers le tableau de bord admin

Thèmes officiels

EmDash fournit des thèmes de démarrage officiels, chacun disponible en variantes locales (SQLite + système de fichiers) et Cloudflare (D1 + R2) :

ThèmeDescriptionCas d’usage
@emdash-cms/template-blogBlog minimaliste avec posts, pages, catégories et mode sombreBlogs personnels, sites simples
@emdash-cms/template-portfolioPortfolio de style éditorial avec projets, typographie serif (Playfair Display) et layouts axés sur les imagesFreelances, agences, créatifs
@emdash-cms/template-marketingSite marketing audacieux avec blocs Portable Text personnalisés (hero, fonctionnalités, témoignages, tarifs, FAQ)Landing pages, sites SaaS, marketing produit

Variantes Cloudflare

Pour le déploiement sur Cloudflare Workers avec D1 et R2, ajoutez -cloudflare au nom du template, comme dans les commandes suivantes :

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

Ces variantes incluent wrangler.jsonc pour la configuration de déploiement.

Personnalisation après l’installation

Une fois l’Assistant de configuration terminé, le site est un projet Astro standard. Personnalisez-le comme n’importe quel site Astro :

  • Modifiez les pages dans src/pages/
  • Modifiez les layouts dans src/layouts/
  • Ajoutez des collections via l’interface admin
  • Installez des intégrations Astro
  • Déployez partout où Astro fonctionne

Le fichier seed n’est utilisé que lors de la configuration initiale. Après cela, gérez le modèle de contenu dans le panneau admin ou avec la CLI.

Prochaines étapes