📝Gestion du Contenu

Introduction

Pour simplifier la gestion du contenu et éviter la dispersion entre Webflow, Wized et Xano, tout le contenu textuel du boilerplate est centralisé dans la base de données Xano, dans la table content_strings. Cette approche permet une gestion unifiée et efficace du contenu à travers toute l'application.

Xano

Structure de la table Content_strings

La table Content_strings dans Xano contient les colonnes suivantes :

  1. internal_name : Identifiant unique du contenu

  2. content : Le contenu textuel à afficher

  3. global : Booléen indiquant si le contenu est global ou spécifique à une page

  4. page_slug : Le slug de la page spécifique (si non global)

Règles importantes

  1. Ne jamais modifier la colonne "internal_name" : Ces identifiants sont utilisés par Wized pour récupérer le bon contenu à afficher. Les modifier pourrait causer des dysfonctionnements dans l'application.

  2. Chargement du contenu :

    • Si global = true, le contenu est chargé sur toutes les pages.

    • Si global = false, le contenu est chargé uniquement sur la page correspondant au page_slug indiqué.

Processus de mise à jour du contenu

  1. Connectez-vous à votre base de données Xano.

  2. Accédez à la table content_strings.

  3. Localisez la ligne correspondant au contenu que vous souhaitez modifier en utilisant la colonne internal_name.

  4. Modifiez le contenu dans la colonne content.

  5. Si nécessaire, ajustez les valeurs de global et page_slug pour contrôler où le contenu sera affiché.

Bonnes pratiques

  1. Cohérence : Assurez-vous que le nouveau contenu respecte la structure et le style de l'interface utilisateur existante.

  2. Test : Après avoir modifié le contenu, testez l'application pour vous assurer que les changements s'affichent correctement.

Ajout de nouveau contenu

Si vous avez besoin d'ajouter du nouveau contenu :

  1. Ajoutez une nouvelle entrée dans la table content_strings.

  2. Choisissez un internal_name unique et descriptif.

  3. Remplissez le content avec le texte souhaité.

  4. Définissez global et page_slug selon vos besoins.

  5. Mettez à jour votre code Wized pour utiliser ce nouveau internal_name. (voir section Wized ci-dessous)

Dépannage

Si le contenu ne s'affiche pas correctement :

  1. Vérifiez que l'internal_name dans Wized correspond exactement à celui dans la table Content_strings.

  2. Assurez-vous que les paramètres global et page_slug sont correctement configurés.

  3. Vérifiez que le contenu est bien chargé au démarrage de la page dans Wized.

En suivant ces directives, vous pourrez gérer efficacement le contenu de votre application sans avoir à naviguer entre différentes plateformes.

Wized

Tout le contenu devrait être ajouté depuis Xano pour simplifier la maintenance.

Pour ajouter du contenu sur de nouveaux éléments, voici le guide :

Utilisation de la fonction getString

Pour faciliter la récupération du contenu approprié en fonction du contexte, nous utilisons une fonction getString. Cette fonction permet de récupérer la chaîne de caractères souhaitée en fonction de son internal_name et d'une variable conditionnelle.

Code de la fonction getString

function getString(data, auth) {
  const authStringMap = {
    login: "modal_passwordinput_login",
    signup: "modal_passwordinput_signup",
    password: "modal_emailinput_password",
    reset_password: "modal_passwordinput_newpassword"
  };
  const internalName = authStringMap[auth];
  if (!internalName) {
    console.warn(`Unrecognized auth type: ${auth}`);
    return "Continue";
  }
  const item = data.find(item => item.internal_name === internalName);
  return item ? item.content : "Continue";
}

const string = getString(r.GET__content.strings.data, v.auth);
return string;

Fonctionnement

  1. La fonction getString prend deux paramètres :

    • data : Les données de la table Content_strings

    • auth : Une variable conditionnelle (dans cet exemple, v.auth)

  2. Elle utilise un objet authStringMap pour mapper les valeurs de auth aux internal_name correspondants.

  3. Si un internal_name correspondant est trouvé, la fonction recherche et retourne le contenu associé.

  4. Si aucune correspondance n'est trouvée, elle affiche un avertissement et retourne "Continue" par défaut.

Adaptation pour d'autres utilisations

Vous pouvez adapter cette fonction pour sélectionner du texte de Content_strings en fonction de n'importe quelle variable, pas seulement v.auth. Par exemple :

function getConditionalString(data, condition) {
  const stringMap = {
    condition1: "internal_name_for_condition1",
    condition2: "internal_name_for_condition2",
  };
  const internalName = stringMap[condition];
  if (!internalName) {
    console.warn(`Unrecognized condition: ${condition}`);
    return "Default text";
  }
  const item = data.find(item => item.internal_name === internalName);
  return item ? item.content : "Default text";
}

const string = getConditionalString(r.GET__content.strings.data, v.someCondition);
return string

Version simplifiée pour du contenu non conditionnel

Si vous n'avez pas besoin de contenu conditionnel, vous pouvez utiliser une version simplifiée de la fonction :


function getSimpleString(data, internalName) {
  const item = data.find(item => item.internal_name === internalName);
  return item ? item.content : "Default text";
}

const string = getSimpleString(r.GET__content.data.strings, "waiting_start_text");
return string

Cette version simplifiée recherche directement le contenu correspondant à l'internal_name fourni.

En utilisant ces fonctions, vous pouvez facilement récupérer et afficher le contenu approprié dans différentes parties de votre application, tout en maintenant une gestion centralisée du contenu dans la table Content_strings.

Webflow

Le contenu de The Hack n'est pas géré depuis Webflow, mais vous devez ajouter les éléments dans Webflow pour pouvoir les altérer.

Pour le développement de vos fonctionnalités, vous pouvez ajouter directement votre contenu dans Webflow, mais n'oubliez pas où vous l'avez mis. ;)

PrécédentPageSuivantAuth (classique)

Dernière mise à jour