Aller au contenu principal

Introduction

Gérez les pages de votre site web et les écrans de votre application mobile avec un contenu dynamique.

🎯 Que fait ce module ?​

Le module Pages vous permet de créer, récupérer et gérer des pages (pour les sites web) ou des écrans (pour les applications mobiles) avec tout leur contenu - texte, images, paramètres SEO et attributs personnalisés.

Considérez-le comme votre système de gestion de contenu - au lieu de coder en dur les pages, vous les gérez dans OneEntry et les récupérez dynamiquement dans votre application.

📖 Explication Simple​

Imaginez que vous construisez un site web avec ces pages :

  • 🏠 Page d'accueil - page d'atterrissage principale
  • 📄 À propos de nous - informations sur l'entreprise
  • 📞 Contact - page de formulaire de contact
  • 📝 Articles de blog - plusieurs pages d'articles
  • ❓ FAQ - centre d'aide

Au lieu de créer chaque page manuellement dans votre code, vous :

  • ✅ Créez des pages dans le panneau d'administration de OneEntry (avec contenu, images, SEO)
  • ✅ Récupérez les pages dynamiquement en utilisant ce module
  • ✅ Mettez à jour le contenu sans redéployer votre application
  • ✅ Gérez la structure des pages, les URL et les métadonnées en un seul endroit

Exemple concret :

Sans le module Pages (codé en dur) :
- Modifier la page d'accueil → Changer le code → Tester → Déployer → Attendre ❌
- 10 pages = 10 fichiers de code à gérer ❌
- Changements SEO = changements de code ❌

Avec le module Pages (dynamique) :
- Modifier la page d'accueil → Mettre à jour dans l'administration de OneEntry → En direct instantanément ✅
- 100 pages = récupérer dynamiquement depuis l'API ✅
- Changements SEO = mise à jour dans le panneau d'administration ✅

✨ Concepts Clés​

Qu'est-ce qu'une Page ?​

Une page est une entité de contenu qui représente :

  • Web : Une page sur votre site web (par exemple, /about, /contact)
  • Mobile : Un écran dans votre application (par exemple, Écran de Profil, Écran des Paramètres)

Chaque page contient :

  • Contenu - Texte, images, vidéos
  • URL - Adresse de la page (par exemple, /about-us)
  • SEO - Titre méta, description, mots-clés
  • Attributs personnalisés - Tous les champs supplémentaires que vous définissez
  • Statut - Publié, brouillon, archivé
  • Localisation - Support multilingue

Types de Pages​

OneEntry prend en charge différents types de pages :

TypeDescriptionExemple d'utilisation
Page NormalePage statique standardÀ propos, Contact, Conditions
Page d'ErreurPages d'erreur 404, 500Page Non Trouvée
Page SystèmePages spécialesPolitique de Confidentialité, Cookies
Page ModèleStructure de page réutilisableModèle d'article de blog

Hiérarchie des Pages​

Les pages peuvent être organisées dans une structure arborescente :

📁 Entreprise
  ├─ À propos de nous
  ├─ Équipe
  └─ Carrières

📁 Produits
  ├─ Catégorie de Produit 1
  │   ├─ Produit A
  │   └─ Produit B
  └─ Catégorie de Produit 2

Pourquoi cela compte : Vous pouvez récupérer toutes les pages dans une section ou construire des menus de navigation automatiquement.

📋 Ce que vous devez savoir​

Deux façons d'identifier les Pages​

MéthodeQuand l'utiliserExemple
Par URLL'utilisateur visite une page spécifique/about-us, /contact
Par IDRéférences internes123, 456

Meilleure pratique : Utilisez id dans le code (ils ne changent pas), utilisez URLs pour le routage.

Structure de la Page​

Chaque page a ces champs clés :

{
  "id": 9,                        // ID unique
  "parentId": 8,                  // ID parent
  "moduleFormConfigs": [],        // Configurations du module Forms
  "pageUrl": "blog1",             // URL de la page
  "depth": 1,                     // profondeur
  "localizeInfos": {              // informations de localisation
    "title": "Blog 1",            // titre
    "menuTitle": "Blog 1",        // titre du menu
    "htmlContent": "",
    "plainContent": "",
  },
  "isVisible": true,              // visibilité
  "blocks": [],                   // blocs
  "type": "common_page",          // type de page
  "templateIdentifier": null,     // identifiant de modèle
  "attributeSetIdentifier": null, // identifiant de l'ensemble d'attributs
  "attributeValues": {},          // valeurs des attributs
  "isSync": false,                // synchronisation
}

Localisation (Multilingue)​

Les pages prennent en charge plusieurs langues

Même page, différentes langues !

Attributs Personnalisés​

Vous pouvez ajouter n'importe quel champ aux pages en utilisant AttributesSets :

Exemples :

  • Articles de blog : auteur, date de publication, tags, image à la une
  • Pages de produits : prix, SKU, galerie, spécifications
  • Pages d'atterrissage : image principale, boutons CTA, témoignages

En savoir plus : Voir Module AttributesSets

📊 Tableau de Référence Rapide - Méthodes Courantes​

MéthodeCe qu'elle faitQuand l'utiliser
getPages()Récupérer toutes les pages (paginé)Construire un plan du site, lister toutes les pages
getRootPages()Récupérer toutes les pages racines (paginé)
getChildPagesByParentUrl()Récupérer toutes les pages enfants par ParentUrl (paginé)
getBlocksByPageUrl()Récupérer les objets PositionBlock pour la page par URL.Les blocs sont utilisés pour rendre le contenu de la page.
getConfigPageByUrl()Récupérer les paramètres pour la page par URL.Les pages de configuration sont utilisées pour stocker les paramètres de la page.
getPageById()Récupérer une seule page.Les pages sont utilisées pour rendre la page.
getPageByUrl()Récupérer une seule page par URL.Les pages sont utilisées pour rendre la page.
searchPage()Recherche rapide de pages avec sortie limitée.Rechercher des pages par titre, description, tags, etc.

❓ Questions Fréquemment Posées (FAQ)​

Quelle est la différence entre URL et Marqueur ?​

  • URL (pageUrl) - L'adresse web que les utilisateurs voient (par exemple, /about-us, /contact)

    • Utilisé pour le routage
    • Convivial

  • Marqueur - Identifiant technique dans le code (par exemple, homepage, contact_page)

    • Utilisé dans les références de code
    • Technique, pas visible par l'utilisateur

💡 Notes Importantes​

URLs des Pages et Routage​

Meilleure pratique pour le routage :

✅ Bon : Route dynamique catch-all Exemple Next.js : pages/[...slug].js

Mise en Cache pour la Performance​

Réduisez les appels API avec la mise en cache.

Prévisualisation des Brouillons​

Montrez les pages brouillons uniquement aux administrateurs.

🎓 Meilleures Pratiques​

  • Mettez en cache les pages pour réduire les appels API
  • Gérez les erreurs 404 avec élégance
  • Filtrez par statusId: 1 et isVisible: true pour la production
  • Ajoutez des états de chargement dans l'UI
  • Mettez en œuvre une stratégie de mise en cache des pages

Plus d'informations sur l'interface utilisateur du module https://doc.oneentry.cloud/docs/category/pages

Définition du module Pages​


const { Pages } = defineOneEntry(
  "your-project-url", {
    "token": "your-app-token"
  }
);

🔗 Documentation Connexe​