Aller au contenu

Comment fonctionne le CMS

Silex se connecte à n'importe quelle API GraphQL pour intégrer des données en temps réel dans vos pages, puis les affiche dans l'éditeur visuel afin que vous puissiez voir exactement à quoi ressemblera votre site avant de publier.

Au moment du design, les données circulent ainsi : API GraphQL → moteur d'expressions → états des composants → aperçu en direct sur le canevas. Vous n'avez pas besoin de comprendre toutes les étapes techniques — sachez simplement que lorsque vous ajoutez une source de données, Silex récupère les données disponibles, vous les liez aux composants, et vous voyez le résultat immédiatement.

Note : Cette page couvre le flux de travail de design. La publication et les pages de collection sont couvertes dans Publication et Pages de collection.

L'API GraphQL

Une API (Interface de Programmation d'Application) est un moyen pour Silex de communiquer avec une base de données et de demander du contenu. Silex utilise GraphQL — un langage de requêtes standard que de nombreuses plateformes CMS prennent en charge.

WordPress (avec le plugin WPGraphQL) est le CMS principal pour Silex. Mais Silex fonctionne avec n'importe quelle API GraphQL : Strapi, Supabase, Directus ou tout backend personnalisé.

Backends compatibles

Toute API qui expose un point d'accès GraphQL peut fonctionner comme source de données. Ces backends ont été testés par la communauté :

Backend Type Statut
WordPress CMS auto-hébergé Entièrement documenté (voir Configuration WordPress)
Strapi CMS headless auto-hébergé Compatible — votez pour un support dédié
Directus Plateforme de données auto-hébergée Compatible
Supabase Base de données hébergée + API Compatible (voir connecter une source de données)
Squidex CMS headless auto-hébergé Compatible
KeystoneJS CMS headless Node.js Compatible
GetCockpit CMS headless auto-hébergé Compatible
Sanity CMS headless hébergé Compatible
Contentful CMS headless hébergé Compatible
Prismic CMS headless hébergé Compatible
Saleor API GraphQL e-commerce Compatible
Nhost Alternative open-source à Firebase Compatible
Hashnode Plateforme de blog Compatible (API GraphQL en lecture seule)
Hygraph CMS headless hébergé Non compatible — problèmes connus avec le schéma GraphQL

Pour les backends non listés ici, si le service fournit un point d'accès GraphQL standard, vous pouvez essayer de le connecter. Pour les API REST uniquement, utilisez GraphQL Mesh pour ajouter une couche GraphQL.

Lorsque vous ajoutez une source de données dans Silex, vous fournissez l'URL du point d'accès GraphQL — quelque chose comme https://votresite.com/graphql. Silex interroge l'API « quels types de données avez-vous ? » et « quels champs contient chaque type ? » Ensuite, vous pouvez choisir des champs à afficher sur vos pages.

Expressions : chaîner les champs de données

Une expression est une chaîne de jetons qui indique à Silex quelles données extraire et comment les transformer.

L'expression la plus simple : posts → first → title. Cela signifie :

  1. "posts" — obtenir une liste d'articles depuis l'API
  2. "first" — prendre le premier article de cette liste
  3. "title" — extraire le champ titre

Chaque jeton dans la chaîne transforme les données. Vous pouvez ajouter des filtres comme "upcase" pour mettre le texte en majuscules, ou "where" pour filtrer une liste selon une condition.

Cela deviendra plus clair lorsque vous parcourrez les pages suivantes — pour l'instant, sachez simplement que les expressions vous permettent de naviguer dans la structure de vos données.

États : valeurs réutilisables sur les composants

Un état est une expression nommée attachée à un composant. Une fois que vous créez un état sur un composant (par exemple, "Titre de l'article"), d'autres composants peuvent le référencer.

Les états existent en deux types :

  • États publics : visibles par les composants enfants. Utiles pour partager des hiérarchies de données.
  • États privés : uniquement pour ce composant. Utiles pour la logique temporaire comme "innerHTML" (le contenu HTML de l'élément) ou "condition" (s'il faut afficher/masquer l'élément).

Aperçu en direct sur le canevas

Lorsque vous liez des données à un composant dans Silex, l'aperçu se met à jour en temps réel. Vous voyez le contenu réel de votre API GraphQL rendu sur le canevas — pas un espace réservé ou une maquette.

Si votre API WordPress renvoie 5 articles de blog, et que vous configurez une "boucle" (un composant répétitif), vous verrez les 5 articles affichés directement pendant que vous designez. C'est pourquoi l'intégration CMS dans Silex est si puissante : vous designez avec de vraies données, pas du texte factice.

L'aperçu récupère les données en direct depuis votre API à chaque modification, donc vous voyez toujours à quoi votre site ressemblera réellement.

Erreurs courantes

  • Supposer qu'il faut comprendre GraphQL. Ce n'est pas le cas — Silex gère les requêtes GraphQL pour vous. Pensez-y simplement comme « se connecter à ma base de données ».
  • Utiliser le mauvais point d'accès API. L'URL d'administration de votre WordPress n'est pas le point d'accès API. Le point d'accès est généralement https://votresite.com/graphql.
  • Oublier d'installer WPGraphQL sur WordPress. Sans lui, votre site WordPress n'a pas d'API GraphQL. Le guide de configuration couvre cela.
  • Penser que l'aperçu est une maquette. Ce sont de vraies données. Si l'aperçu affiche un contenu incorrect, c'est votre API ou votre expression qui est erronée — pas votre design.

En savoir plus

Quiz

Q1 : Votre site WordPress a une API GraphQL. Où trouvez-vous l'URL du point d'accès ?

  • A) L'URL du tableau de bord d'administration WordPress (par exemple, https://votresite.com/wp-admin)
  • B) L'URL racine de votre installation WordPress + /graphql (par exemple, https://votresite.com/graphql)
  • C) Elle est générée aléatoirement et Silex la trouvera automatiquement
Réponse

B) L'URL racine de votre installation WordPress + /graphql — Le point d'accès API est une URL spécifique, généralement la racine du site suivie de /graphql. Le tableau de bord d'administration sert à gérer WordPress, pas à accéder aux API.

Q2 : Vous regardez votre composant sur le canevas et il affiche de vraies données de votre API WordPress. De quoi s'agit-il ?

  • A) Une maquette ou un espace réservé pour vous montrer comment la mise en page fonctionne
  • B) Un aperçu des données en direct de votre API GraphQL
  • C) Le résultat final qui ne change pas lorsque vous publiez
Réponse

B) Un aperçu des données en direct de votre API GraphQL — Lorsque vous liez des données et activez l'aperçu, Silex récupère le contenu réel de votre API et l'affiche sur le canevas. Ce n'est pas une maquette ; ce sont les données réelles qui apparaîtront sur votre site.

Q3 : Lequel de ces backends n'est PAS un backend GraphQL auquel Silex peut se connecter ?

  • A) WordPress (avec WPGraphQL)
  • B) Strapi
  • C) Shopify (sans adaptateur GraphQL)
Réponse

C) Shopify (sans adaptateur GraphQL) — Silex prend en charge WordPress, Strapi, Supabase et les API GraphQL génériques. Shopify possède une API GraphQL, mais elle ne figure pas dans la liste des backends pré-configurés ; vous devriez la configurer comme générique ou via un adaptateur personnalisé.

Q4 : Vous ajoutez une source de données à Silex et sélectionnez "WordPress" comme type de backend. Qu'est-ce que cela fait ?

  • A) Installe WordPress sur votre serveur
  • B) Aide Silex à comprendre la structure des données WordPress et vous offre des valeurs par défaut intelligentes
  • C) Vous oblige à écrire manuellement des requêtes GraphQL
Réponse

B) Aide Silex à comprendre la structure des données WordPress et vous offre des valeurs par défaut intelligentes — Sélectionner un type de backend permet à Silex d'adapter l'expérience à cette plateforme. Cela n'installe rien et ne nécessite pas de requêtes manuelles ; cela optimise simplement l'éditeur pour cette structure de données.

Éditer cette page sur GitLab