Faire tout votre site web avec Flocon AI

Toutes les pages peuvent venir de Flocon AI, la page d'accueil / aussi. Votre code peut être seulement le layout.

  • Votre code : header, footer, CSS.
  • Flocon AI : toutes les pages.
  • Votre IA les écrit et les publie.

Voici quelques idées. Prenez ce qui vous plaît. Elles marchent pour Next.js, Astro et React.

Partir de la démo

Le dépôt de démo public contient un site web qui marche pour chaque framework :

Idée : un layout autour de la route [...slug]

D'abord, installez le package et ajoutez la route [...slug]. Voir la page d'installation de votre framework : Next.js, Astro, React.

Ensuite, vous pourriez mettre un header et un footer autour de cette route. Votre code n'a peut-être pas besoin de plus.

Idée : une nav qui se construit toute seule

Vous pourriez construire la nav avec getAllPages(). Elle existe dans @flocon-ai/next, @flocon-ai/astro et @flocon-ai/react.

  • Elle renvoie seulement les pages publiées.
  • Elle n'a pas de blocks, donc elle est légère.
  • Chaque entrée a locale, path et title.

Une façon : groupez les pages par première partie du chemin :

  • /about → un lien simple.
  • /vs/a-vs-b, /vs/c-vs-d → un groupe « Vs » (menu déroulant).
  • /alternatives/x → un groupe « Alternatives ».

Le nom du groupe peut être le nom du dossier. Vous pouvez ajouter une petite table, par exemple vs → « Comparatifs ». Le texte du lien peut être le titre de la page.

Une façon simple de commencer :

const pages = (await getAllPages()).filter((p) => p.locale === locale)

const LABELS: Record<string, string> = { vs: "Comparatifs" } // optionnel

const links: typeof pages = []
const groups: Record<string, typeof pages> = {}
for (const p of pages) {
if (p.path === "/") continue // la page d'accueil est le lien du logo
const [, folder, sub] = p.path.split("/")
if (!sub) links.push(p) // /about
else (groups[folder] ??= []).push(p) // /vs/a-vs-b
}
// groups : { vs: [...], alternatives: [...] }, nom : LABELS[folder] ?? folder

Filtrez par la langue courante, comme ci-dessus. Affichez ensuite des liens et des menus avec vos propres composants.

Autres idées

  • Limitez chaque menu (par exemple 5 pages) et ajoutez un lien « Tout voir » vers une page hub (/vs).
  • Page hub. Si /vs n'a pas de page Flocon, affichez une liste simple de toutes les pages /vs/*. Bon pour le maillage interne.
  • Footer = toutes les pages, groupées par catégorie. Ça aide le crawl.
  • Liste d'exclusion pour les chemins que vous ne voulez pas dans la nav, par exemple /legal/*.
  • Récupérez la liste une seule fois par build ou avec revalidate, pas à chaque requête.

Personnalisez avec le CSS

Les pages utilisent les variables --flocon-* et gèrent le mode sombre. Voir la page thème de votre framework : Next.js, Astro, React.

Le SEO est déjà là

Pas besoin de le refaire :

  • Metadata et JSON-LD viennent avec le composant de page.
  • Sitemap et llms.txt : Next.js, Astro, React.
  • Image OG (Next.js seulement) : Image OG.

Déployer

Utilisez n'importe quel hébergeur qui lance votre framework en mode serveur. Définissez FLOCON_TOKEN dans ses variables d'environnement.

Remplir avec votre IA

Essayez un prompt comme celui-ci dans votre outil d'IA :

Utilise Flocon AI pour construire les pages de mon site web.
1. Écris la page d'accueil à "/".
2. Écris une page "/about".
3. Écris 5 pages de cas d'usage sous "/use-cases/".
Utilise seulement des faits réels. Planifie les pages de cas d'usage avec publishAt, une par jour.

Voir Publication planifiée et Types de pages.

Mis à jour