Code-Editor

Jede WebTwizz-Website ist ein echtes Code-Projekt. Im Code-Editor kannst du die Dateien direkt lesen und ändern.

Code bearbeiten, Dateiversionen und Downloads sind in kostenpflichtigen Tarifen verfügbar. Im Free-Tarif siehst du den Dateibaum, aber der Code bleibt verborgen und schreibgeschützt.

Code-Editor öffnen

Klicke in der Werkzeugleiste auf den Code-Schalter (den <>-Schalter neben Browsen und Bearbeiten). Links siehst du den Dateibaum, rechts die geöffnete Datei. Klicke erneut auf den Schalter, um zur Arbeitsfläche zurückzukehren.

Der Code-Editor ist auf Smartphones nicht verfügbar.

Projektstruktur

• src/app/page.tsx ist deine Startseite. Jede weitere Seite hat einen eigenen Ordner unter src/app/ mit einer page.tsx.
• src/app/layout.tsx ist das Layout, das jede Seite umschließt.
• src/app/globals.css enthält globale Stile und dein Theme.
• src/components/ enthält wiederverwendbare Komponenten.
• src/lib/ enthält Hilfsfunktionen.
• src/data/ enthält Datendateien.
• public/ enthält statische Dateien wie Bilder und Schriftarten.

Dateien bearbeiten

Klicke auf eine Datei, um sie zu öffnen, und beginne zu tippen. Deine Änderungen erscheinen kurz nachdem du aufhörst zu tippen auf der Arbeitsfläche. Drücke ⌘S / Ctrl+S zum Speichern.

• ⌘Z / Ctrl+Z macht Texteingaben und Dateiänderungen wie Umbenennungen oder Löschungen in der Reihenfolge rückgängig, in der du sie vorgenommen hast.
• Klicke mit gedrückter ⌘-Taste (Mac) oder Ctrl-Taste (Windows) auf einen Import, um die verknüpfte Datei zu öffnen.
• Bilddateien werden als Vorschau geöffnet.

Einige Dateien sind als Schreibgeschützt gekennzeichnet, weil WebTwizz sie verwaltet: src/app/layout.tsx, next.config, tsconfig.json, die PostCSS- und ESLint-Konfigurationen, .gitignore und src/types/cms.ts. Bitte die KI, wenn du eine dieser Dateien ändern möchtest.

Dateien verwalten

• Dateien suchen oben im Dateibaum filtert die Dateien nach Namen.
• Über die Schaltfläche + kannst du mit Neue Datei oder Neuer Ordner eine Datei oder einen Ordner hinzufügen.
• Klicke mit der rechten Maustaste auf eine Datei oder einen Ordner, um Umbenennen, Duplizieren, Kopieren, Einfügen und Löschen aufzurufen. Bei Ordnern gibt es außerdem Neue Datei und Neuer Ordner.
• Ziehe Dateien und Ordner innerhalb des Dateibaums, um sie zu verschieben.
• Ziehe Dateien oder Ordner von deinem Computer auf den Dateibaum, um sie hochzuladen. Ist ein Name bereits vergeben, wähle Ersetzen, Beide behalten oder Abbrechen.
• Klicke mit gedrückter ⌘-Taste (Mac) oder Ctrl-Taste (Windows) auf mehrere Zeilen, um sie auszuwählen. Klicke dann mit der rechten Maustaste, um eine Aktion auf alle ausgewählten Einträge anzuwenden.

Dateiversionen

Klicke mit der rechten Maustaste auf eine Datei und bewege den Mauszeiger über Dateiversionen, um ihre gespeicherten Versionen nach Tagen gruppiert zu sehen. Die neueste ist mit Aktuell markiert. Bereits veröffentlichte Versionen sind mit ihrer jeweiligen Veröffentlichungsversion gekennzeichnet.

Klicke auf eine Version, um diese Datei wiederherzustellen. Nur diese Datei wird geändert. Mit ⌘Z / Ctrl+Z kannst du das rückgängig machen. Medien und schreibgeschützte Dateien lassen sich auf diese Weise nicht wiederherstellen.

Um das gesamte Projekt auf einen früheren Stand zurückzusetzen, nutze den Versionsverlauf.

Deinen Code herunterladen

Klicke bei geöffneter Datei oben im Editor auf Herunterladen:

• Projekt herunterladen speichert das gesamte Projekt als ZIP-Datei. Du kannst es auf deinem eigenen Computer ausführen oder überall hosten.
• Diese Datei herunterladen speichert nur die geöffnete Datei.

Wenn keine Datei geöffnet ist, hat die Schaltfläche Projekt herunterladen in der Mitte des Editors dieselbe Funktion wie Projekt herunterladen.