construction-de-pages-webflow

Construire des pages Webflow

Aperçu

Les outils d'écriture MCP Webflow rapportent un succès pour des opérations qui, silencieusement, ont fait quelque chose de différent de ce que vous avez demandé. Les noms de classe sont renommés, les images ne sont liées à rien, les styles atterrissent sur le mauvais point de rupture. Chaque écriture doit être relue.

Principe fondamental : une réponse de succès n'est pas une preuve. L'arborescence des éléments l'est.

Pour les éléments CMS, les articles de blog et le SEO de page, utilisez plutôt une compétence axée sur la publication CMS. Cette compétence concerne la surface Designer : éléments, styles, assets, code personnalisé.

La loi de fer

Ne publiez jamais en production sans approbation explicite dans la conversation en cours.

Une publication de site envoie chaque modification Designer en attente sur chaque page, y compris le travail que vous n'avez pas effectué et les pages non listées qui sont toujours accessibles en production. « Je vous ai déjà dit de publier plus tôt » ne s'applique pas d'une tâche à l'autre. Demandez à nouveau.

Le staging est différent, et c'est ainsi que le travail est examiné. Publier uniquement sur le sous-domaine de staging (une liste de domaines personnalisés vide) est l'étape normale après un correctif, suivie du QA sur staging. Publiez uniquement sur le domaine de production principal, jamais sur tous les domaines du site, et seulement après approbation.

Les neuf pièges

1. whtml_builder renomme les classes en conflit

Demandez hp2-proof quand un style de ce nom existe et vous obtenez hp2-proof-1. Demandez hp2-proof-n et vous obtenez hp2-proof-n-1. Les collisions en chaîne produisent hp2-proof-link-1-2. Les divs wrapper n'obtiennent souvent aucune classe du tout.

Rien ne génère d'erreur. Votre CSS principal cible alors une classe qui n'existe pas, et tout querySelectorAll('.hp2-proof') dans un script enregistré ne correspond à aucun élément, donc les animations de défilement ne s'exécutent jamais.

Toujours query_elements par style après insertion, lisez les styleNames réels, et écrivez vos sélecteurs CSS et de script par rapport à ceux-ci. Les wrappers sans classe sont accessibles sous la forme .parent-class > div.

2. Une classe dans html ne s'applique que si elle existe déjà

Une classe référencée dans le paramètre html ne se lie que si ce style existe déjà dans le site OU est défini dans le paramètre css du même appel. Sinon, l'élément s'insère sans classe et signale toujours un succès. Définissez chaque classe que vous utilisez dans css.

Le constructeur ne prend pas non plus en charge les sélecteurs descendants. Utilisez des classes uniques et des classes combinées (.a.b). @media et clamp() sont acceptables.

3. whtml_builder a besoin d'un seul élément racine

Plusieurs frères au niveau supérieur échouent ou s'insèrent partiellement. Enveloppez dans un seul conteneur.

4. Les images insérées comme balisage ne sont pas liées

Une <img> dans html renvoie partial_success avec « n'existe pas dans la bibliothèque d'assets ». Insérez l'élément, puis liez-le avec set_image_asset et l'id de l'asset.

5. update_style délimite par breakpoint_id, pas par breakpoint

Une clé breakpoint est ignorée silencieusement et l'écriture atterrit sur le point de rupture de base, écrasant le bureau. La réponse montre une clé breakpoints uniquement lorsque l'écriture délimitée a fonctionné. Passez breakpoint_id explicitement et relisez-le.

6. set_style remplace, il n'ajoute pas

set_style supprime tous les styles existants et applique uniquement ce que vous passez. Pour ajouter une classe, lisez d'abord les styleNames actuels et passez la liste complète.

7. set_page_freeform_code remplace tout le bloc

Le code personnalisé de l'en-tête et du pied de page réside sur data_scripts_tool, pas sur les outils de page ou de style : get_page_freeform_code et set_page_freeform_code, avec location: "head".

L'écriture est tout ou rien. Il n'y a pas d'ajout. Toujours get le bloc actuel, modifier la chaîne, et set le tout en retour. Écrire un fragment supprime silencieusement tout ce qui se trouvait dans l'en-tête. Il rejette également les balises <script> sur certains forfaits, c'est pourquoi les scripts vont dans les intégrations (ci-dessous).

8. Les pages créées via l'API n'héritent pas de votre CSS de base

Si le site définit sa taille de police racine dans un composant CSS de base (par exemple html{font-size:.625rem} pour que 1rem soit 10px), une page créée via lAPI n'obtient pas ce composant. Tout rend 1,6 fois trop grand dans le Designer et à la publication. Le premier élément de chaque nouvelle page est le composant CSS de base. Vérifiez-le avant de styliser quoi que ce soit.

9. Les sorties de création d'assets disparaissent et les liaisons sont limitées en débit

La sortie create_asset en dessous d'une certaine taille n'est pas persistée, donc un lot de 22 assets s'imprime en ligne et doit être transcrit immédiatement. set_image_asset effectue une lecture et une écriture chacune : environ dix liaisons par minute avant un 429. Liez par lots de dix avec une minute entre les deux, et gardez un tableau des lignes de nom, id d'asset, date et signature.

Code personnalisé et scripts

L'API de script de page est bloquée sur certains comptes. Pour exécuter du JavaScript sur une page :

1. register_inline_script (2000 caractères max) ou register_hosted_script
2. Référencez l'URL hébergée retournée depuis une <script src> à l'intérieur d'un élément HtmlEmbed sur la page, édité via data_element_settings_tool avec la clé code

Structurez la page comme une intégration par section plus une intégration de chargeur qui importe la bibliothèque d'animation puis vos scripts. Versionnez le nom d'affichage (sections.v17) plutôt que de modifier un script enregistré : update_registered_script échoue sur les scripts en ligne, et un nom versionné permet un retour en arrière en modifiant une seule URL dans l'intégration. Hébergez le CSS de la page de la même manière, versionné.

Prévisualiser un brouillon

Une page en brouillon ne peut pas être basculée en publiée via l'API, et la création de branches de page est une fonctionnalité Enterprise. Donc, effectuez le QA d'un brouillon sur une réplique locale : le balisage de navigation et de pied de page en direct, le CSS du site, la règle CSS de base et la bibliothèque d'animation depuis un CDN.

Dans un onglet masqué ou un volet sans tête, le ticker d'animation se met en pause. Forcez-le :

gsap.ticker.lagSmoothing(0); gsap.ticker.tick();

Les captures d'écran d'un volet masqué s'affichent vierges sous la ligne de flottaison. Traduisez le corps pour amener une section dans la vue pour une capture d'écran, et appelez ScrollTrigger.update() après un scrollTo réel.

Assets

Trois étapes, et la troisième est celle que les gens oublient :

1. create_asset avec le nom du fichier et le MD5 des octets bruts (32 hexadécimal minuscule)
2. POST les octets vers l'uploadUrl retourné en tant que multipart/form-data, en ajoutant chaque champ uploadDetails plus le fichier sous file. Attendez 201.
3. create_asset à nouveau avec le même nom et le même hachage pour finaliser.

L'URL CDN est https://cdn.prod.website-files.com/<siteId>/<assetId>_<filename>. Voir asset-upload.md pour une recette curl fonctionnelle.

Les vidéos sont téléchargées via le même formulaire (video/mp4, video/webm) et sont référencées depuis une intégration avec autoplay muted loop playsinline et une affiche. La vidéo de la page d'accueil est là où la bande passante est consommée, alors servez des petites boucles et des fichiers légers pour les téléphones.

Limites de débit

Les lectures (query_elements, get_all_elements, get_settings) hydratent les points de terminaison des assets et des collections et commencent à retourner 429 après un travail intensif sur les assets. Les écritures continuent de fonctionner. Lorsque query_elements renvoie 429, get_all_elements à la profondeur 2 réussit généralement encore.

Lectures par lots : un seul appel query_elements peut gérer plusieurs requêtes.

Liste de vérification

Exécutez ceci après chaque session de construction et rapportez les résultats, pas vos intentions.

• query_elements par nom de style pour chaque classe que vous avez introduite ; les vrais noms correspondent à ce que votre CSS et vos scripts ciblent
• Chaque image insérée a un assetId dans ses paramètres
• Les styles de point de rupture sont relus au point de rupture que vous vouliez
• Le bloc d'en-tête/pied de page contient encore tout ce qu'il avait avant votre modification
• L'URL du script enregistré dans l'intégration correspond à la version que vous venez d'enregistrer
• Les URL CDN des assets retournent 200 avec le type de contenu et la taille attendus
• Le composant CSS de base est le premier élément sur la page
• La page en attente correspond à ce que vous avez construit : récupérez le HTML de staging et vérifiez, ne supposez pas

Drapeaux rouges

• « L'outil a renvoyé un succès donc la classe est appliquée »
• « Je vais écrire le CSS maintenant et vérifier les noms de classe plus tard »
• « C'est un petit changement, je vais écrire le bloc d'en-tête directement »
• « L'utilisateur a approuvé la publication plus tôt dans ce projet »
• « Je vais publier sur tous les domaines pour que ce soit cohérent »

Tous ces éléments signifient : lisez l'arborescence avant de continuer.