Flexweg CMS

Thème default

Le thème default est l'option polyvalente, multi-usage livrée pré-activée à chaque installation fraîche de Flexweg CMS. Il est conçu pour les blogs, sites personnels, documentation et publications de

Le thème default est l'option polyvalente, multi-usage livrée pré-activée à chaque installation fraîche de Flexweg CMS. Il est conçu pour les blogs, sites personnels, documentation et publications de contenu mixte — pas flashy, mais solide et prévisible.

Le thème default est spécial : il reste toujours bundlé dans l'admin SPA, même quand les autres thèmes sont désinstallés. Il sert de fallback quand aucun autre thème n'est actif. Vous ne pouvez jamais « désinstaller » le thème default.

Style visuel

  • Mise en page de lecture single-column — contenu centré, max-width ~720px
  • Sidebar optionnelle pour les posts (toggleable via les réglages thème)
  • Home en grille de cartes avec image hero + grille de posts 3 colonnes
  • Archives de catégorie avec breadcrumbs et cartes de posts
  • Pages profil d'auteur avec bio + avatar + liste de posts
  • Palette adaptable — 22 variables CSS éditables depuis les réglages
  • Polices au choix — une serif + une sans configurables (Inter + Charter par défaut)

Templates

Les six templates standards. Aucun template d'archive dédié — category est utilisé partout (home avec mode latest, archives, catégories).

Pipeline CSS

SCSS via theme.scss importé avec ?inline. Vite compile au build et manifest.cssText contient la CSS résultante.

Réglages

Quatre onglets dans Theme settings :

Home

  • Mode home — duplicate de Réglages → Général. Pratique pour basculer entre latest-posts et static-page sans changer d'onglet.
  • Variantes — heroVariant (image-overlay / split / banner) selon le format de votre image hero

Single

  • Toggle Show sidebar — affiche / cache la sidebar à droite sur les posts single
  • Toggle Show breadcrumbs — affiche le fil d'ariane Home > Catégorie > Post
  • Toggle Show author block — affiche le bloc auteur en bas du post

Sidebar

  • Items du footer — éditer le wordmark / liens / social

Style

  • 22 variables CSS éditables (palette, spacing, border radius, etc.) — voir le code source pour la liste complète
  • Choix de fonts serif + sans depuis Google Fonts (~25 paires curated)
  • Bouton ↺ par champ pour reset à la valeur par défaut

compileCss

Le default a un compileCss(config) qui :

  1. Swap la ligne @import url(...) de Google Fonts avec la paire de fonts choisie
  2. Append un :root { ... } en fin de fichier avec les overrides de variables
  3. Si pas de personnalisation : retourne cssText brute (fast path)

Donc chaque save de la page de réglages re-upload une CSS bake avec les overrides.

Blocs spécifiques

Aucun. Le thème default ne contribue pas de blocs — il utilise uniquement les blocs de cœur (paragraphes, titres, listes, images, citations) + ceux des must-use plugins (colonnes, HTML personnalisé, embeds).

Variantes d'image

TS
variants: [
  { name: "thumbnail", maxWidth: 400, maxHeight: 400, fit: "cover" },
  { name: "medium", maxWidth: 1200, maxHeight: 1200, fit: "contain" },
  { name: "large", maxWidth: 2000, maxHeight: 2000, fit: "contain" },
]

Menu loader

theme-assets/default-menu.js est uploadé par le thème. Le BaseLayout référence ce fichier. Le loader fetche /menu.json et fill les containers [data-cms-menu="header"] et [data-cms-menu="footer"].

Le mobile burger menu est aussi géré par ce loader.

Cas multilang

Le thème default supporte multilang via currentLocale dans BaseLayoutProps :

  • <html lang={currentLocale ?? site.settings.language}>
  • localePrefix(site.homePath) pour préfixer les liens

Le menu-loader.js du default lit currentLocale (via attribut data-cms-locale sur le <html>) et picke le label correspondant dans menu.json.

Idéal pour

  • Blogs personnels
  • Sites de documentation
  • Newsletters statiques
  • Publications mixtes (posts + pages)
  • Premiers déploiements (default est facile à customiser)

Pas idéal pour

  • Sites éditoriaux long-format (utiliser magazine)
  • Vitrines / landing pages SaaS (utiliser corporate)
  • Marketplaces / catalogues riches (utiliser marketplace-core)