Webflow-Seiten erstellen

Was macht Webflow-Seiten erstellen?

Übersicht

Die Webflow MCP-Schreibtools melden bei Vorgängen Erfolg, die stillschweigend etwas anderes tun, als Sie verlangt haben. Klassennamen werden umbenannt, Bilder binden an nichts, Styles landen im falschen Breakpoint. Jeder Schreibvorgang muss zurückgelesen werden.

Kernprinzip: Eine Erfolgsmeldung ist kein Beweis. Der Elementbaum ist es.

Verwenden Sie für CMS-Elemente, Blogbeiträge und Seiten-SEO stattdessen eine CMS-fokussierte Publishing-Fähigkeit. Diese Fähigkeit betrifft die Designer-Oberfläche: Elemente, Styles, Assets, benutzerdefinierter Code.

Das Eiserne Gesetz

Veröffentlichen Sie niemals in der Produktion ohne explizite Genehmigung im aktuellen Gespräch.

Eine Site-Veröffentlichung versendet jede bereitgestellte Designer-Änderung auf jeder Seite, einschließlich Arbeiten, die Sie nicht erstellt haben, und nicht gelisteter Seiten, die in der Produktion weiterhin erreichbar sind. „Ich habe dir schon früher gesagt, du sollst veröffentlichen" gilt nicht über Aufgaben hinweg. Fragen Sie erneut.

Staging ist anders und dies ist die Art und Weise, wie Arbeit überprüft wird. Die Veröffentlichung auf der Staging-Subdomain (eine leere Liste benutzerdefinierter Domains) ist der normale Schritt nach einer Korrektur, gefolgt von QA auf dem Staging. Veröffentlichen Sie nur auf die primäre Produktionsdomain, niemals auf jede Domain der Site, und nur nach Genehmigung.

Die neun Fallen

1. whtml_builder benennt kollidierende Klassen um

Fragen Sie nach hp2-proof, wenn ein Style dieses Namens existiert, und Sie erhalten hp2-proof-1. Fragen Sie nach hp2-proof-n und Sie erhalten hp2-proof-n-1. Verkettete Kollisionen erzeugen hp2-proof-link-1-2. Wrapper-divs erhalten oft gar keine Klasse.

Nichts gibt einen Fehler aus. Ihr Head-CSS zielt dann auf eine Klasse, die nicht existiert, und jedes querySelectorAll('.hp2-proof') in einem registrierten Skript findet null Elemente, sodass Scroll-Animationen niemals ausgeführt werden.

Führen Sie nach dem Einfügen immer query_elements nach Style durch, lesen Sie die tatsächlichen styleNames und schreiben Sie Ihre CSS- und Skriptselektoren gegen diese. Nicht klassifizierte Wrapper sind als .parent-class > div erreichbar.

2. Eine Klasse im html wird nur angewendet, wenn sie bereits existiert

Eine Klasse, die im html-Parameter referenziert wird, bindet nur, wenn dieser Style bereits in der Site existiert ODER im selben Aufruf im css-Parameter definiert ist. Andernfalls wird das Element ohne Klasse eingefügt und meldet dennoch Erfolg. Definieren Sie jede Klasse, die Sie verwenden, im css.

Der Builder unterstützt auch keine Nachfahrenselektoren. Verwenden Sie einzelne Klassen und Kombi-Klassen (.a.b). @media und clamp() sind in Ordnung.

3. whtml_builder benötigt ein einzelnes Wurzelelement

Mehrere Geschwister auf oberster Ebene schlagen fehl oder werden teilweise eingefügt. Umwickeln Sie sie in einem Container.

4. Als Markup eingefügte Bilder sind nicht gebunden

Ein <img> im html gibt partial_success mit „existiert nicht in der Asset-Bibliothek" zurück. Fügen Sie das Element ein und binden Sie es dann mit set_image_asset und der Asset-ID.

5. update_style gilt für breakpoint_id, nicht für breakpoint

Ein breakpoint-Schlüssel wird stillschweigend ignoriert und der Schreibvorgang landet im Basis-Breakpoint und überschreibt den Desktop. Die Antwort zeigt einen breakpoints-Schlüssel nur, wenn der gezielte Schreibvorgang funktioniert hat. Übergeben Sie breakpoint_id explizit und lesen Sie es zurück.

6. set_style ersetzt, es fügt nicht hinzu

set_style entfernt alle vorhandenen Styles und wendet nur das an, was Sie übergeben. Um eine Klasse hinzuzufügen, lesen Sie zuerst die aktuellen styleNames und übergeben Sie die vollständige Liste.

7. set_page_freeform_code ersetzt den gesamten Block

Benutzerdefinierter Code im Seitenkopf und -fuß befindet sich unter data_scripts_tool, nicht unter den Seiten- oder Style-Tools: get_page_freeform_code und set_page_freeform_code, mit location: "head".

Der Schreibvorgang ist alles-oder-nichts. Es gibt kein Anhängen. Holen Sie immer zuerst den aktuellen Block mit get, ändern Sie die Zeichenfolge und setzen Sie sie mit set im Ganzen zurück. Das Schreiben eines Fragments löscht stillschweigend alles andere, was sich im Kopf befand. Es lehnt <script>-Tags bei einigen Tarifen doch ab, weshalb Skripte in Embeds (siehe unten) platziert werden.

8. Seiten, die über die API erstellt wurden, erben nicht Ihr Basis-CSS

Wenn die Site ihre Grundschriftgröße in einer Basis-CSS-Komponente festlegt (z. B. html{font-size:.625rem}, damit 1rem 10px entspricht), erhält eine über die API erstellte Seite diese Komponente nicht. Alles wird im Designer und bei der Veröffentlichung 1,6-mal zu groß dargestellt. Das erste Element auf jeder neuen Seite ist die Basis-CSS-Komponente. Überprüfen Sie es, bevor Sie etwas stylen.

9. Asset-Erstellungsausgaben verschwinden und Bindungen ratenbegrenzen

Die Ausgabe create_asset unterhalb einer bestimmten Größe wird nicht beibehalten, sodass ein Stapel von 22 Assets inline gedruckt und sofort transkribiert werden muss. set_image_asset führt jeweils einen Lese- und einen Schreibvorgang durch: etwa zehn Bindungen pro Minute vor einem 429er. Binden Sie in Stapeln von zehn mit einer Minute Pause und behalten Sie eine Tabelle mit Name, Asset-ID, Datum und Signaturzeilen.

Benutzerdefinierter Code und Skripte

Die Seiten-Skript-API ist bei einigen Konten gesperrt. Um JavaScript auf einer Seite auszuführen:

1. register_inline_script (maximal 2000 Zeichen) oder register_hosted_script
2. Referenzieren Sie die zurückgegebene gehostete URL von einem <script src> innerhalb eines HtmlEmbed-Elements auf der Seite, bearbeitet über data_element_settings_tool mit dem Schlüssel code

Strukturieren Sie die Seite als ein Embed pro Abschnitt plus ein Loader-Embed, das die Animationsbibliothek und dann Ihre Skripte einbindet. Versionieren Sie den Anzeigenamen (sections.v17), anstatt ein registriertes Skript zu mutieren: update_registered_script schlägt bei Inline-Skripten fehl, und ein versionierter Name lässt sich durch Bearbeiten einer URL im Embed zurücksetzen. Hosten Sie das Seiten-CSS auf die gleiche Weise, versioniert.

Vorschau eines Entwurfs

Eine Entwurfsseite kann über die API nicht in „Veröffentlicht" umgewandelt werden, und Seiten-Verzweigungen sind eine Enterprise-Funktion. Führen Sie daher QA für einen Entwurf gegen eine lokale Replik durch: das Live-Navigations- und Footer-Markup, das Site-CSS, die Basis-CSS-Regel und die Animationsbibliothek von einem CDN.

In einem versteckten Tab oder einem unsichtbaren Bereich wird der Animations-Ticker angehalten. Erzwingen Sie ihn:

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

Screenshots eines unsichtbaren Bereichs zeigen unterhalb des Falz leere Bereiche. Verschieben Sie den Body, um einen Abschnitt für einen Screenshot in den sichtbaren Bereich zu bringen, und rufen Sie ScrollTrigger.update() nach einem echten scrollTo auf.

Assets

Drei Schritte, und der dritte wird oft vergessen:

1. create_asset mit dem Dateinamen und dem MD5 der rohen Bytes (32 Hex-Zeichen in Kleinbuchstaben)
2. POST der Bytes an die zurückgegebene uploadUrl als multipart/form-data, wobei jedes uploadDetails-Feld plus die Datei unter file angehängt wird. Erwarten Sie 201.
3. create_asset erneut mit demselben Namen und Hash zum Abschluss.

Die CDN-URL ist https://cdn.prod.website-files.com/<siteId>/<assetId>_<filename>. Siehe asset-upload.md für ein funktionierendes curl-Rezept.

Videos werden über dasselbe Formular hochgeladen (video/mp4, video/webm) und werden von einem Embed mit autoplay muted loop playsinline und einem Poster referenziert. Das Homepage-Video ist der Bandbreitenfresser, also liefern Sie kleine Loops und Lite-Dateien für Smartphones.

Ratenbegrenzungen

Lesevorgänge (query_elements, get_all_elements, get_settings) hydrieren die Asset- und Sammlungs-Endpunkte und beginnen nach starker Asset-Arbeit, 429er zurückzugeben. Schreibvorgänge funktionieren weiter. Wenn query_elements einen 429er zurückgibt, gelingt get_all_elements mit Tiefe 2 normalerweise noch.

Batch-Lesevorgänge: Ein query_elements-Aufruf akzeptiert mehrere Abfragen.

Überprüfungsliste

Führen Sie dies nach jeder Build-Sitzung aus und melden Sie die Ergebnisse, nicht Ihre Absichten.

• Führen Sie query_elements nach Style-Namen für jede von Ihnen eingeführte Klasse durch; die tatsächlichen Namen stimmen mit dem überein, auf das Ihr CSS und Ihre Skripte abzielen
• Jedes eingefügte Bild hat eine assetId in seinen Einstellungen
• Breakpoint-Styles werden bei dem beabsichtigten Breakpoint zurückgelesen
• Der Kopf-/Fußblock enthält noch alles, was er vor Ihrer Bearbeitung enthielt
• Die registrierte Skript-URL im Embed stimmt mit der Version überein, die Sie gerade registriert haben
• Asset-CDN-URLs geben 200 mit dem erwarteten Inhaltstyp und der erwarteten Größe zurück
• Die Basis-CSS-Komponente ist das erste Element auf der Seite
• Die bereitgestellte Seite stimmt mit dem überein, was Sie erstellt haben: Holen Sie das Staging-HTML und überprüfen Sie es, gehen Sie nicht davon aus

Rote Flaggen

• „Das Tool hat Erfolg gemeldet, also ist die Klasse angewendet"
• „Ich schreibe jetzt das CSS und überprüfe die Klassennamen später"
• „Es ist eine kleine Änderung, ich schreibe den Kopfblock direkt"
• „Der Benutzer hat die Veröffentlichung früher in diesem Projekt genehmigt"
• „Ich veröffentliche auf allen Domains, damit es konsistent ist"

Alle diese bedeuten: Lesen Sie den Baum zurück, bevor Sie fortfahren.