suchen

Heim >Web-Frontend >js-Tutorial >Astrobuild-Tutorial mit Kontaktformular

Astrobuild-Tutorial mit Kontaktformular

Patricia Arquette
Patricia ArquetteOriginal
2024-10-04 22:23:30325Durchsuche

Astrobuild tutorial with Contact Form

AstroBuild-Tutorial mit Kontaktformular mit Fabform

Was ist Astro?

Astro ist ein moderner Static Site Generator (SSG), der auf Geschwindigkeit ausgelegt und für die Erstellung schneller, SEO-freundlicher Websites optimiert ist. Es unterstützt mehrere Front-End-Frameworks und erleichtert so die Integration von Technologien wie React, Vue, Svelte oder sogar Vanilla JavaScript in Ihr Projekt. Astro liefert weniger JavaScript aus, was schnellere Ladezeiten und insgesamt eine bessere Leistung bedeutet.

In diesem Tutorial werden wir die folgenden Schritte behandeln:

  1. Ein Astro-Projekt einrichten
  2. Seiten und Layouts erstellen
  3. Komponenten hinzufügen
  4. Integration eines Kontaktformulars mit Fabform.io

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Folgendes installiert ist:

  • Node.js (v16 oder höher)
  • Ein Code-Editor (wie VSCode)
  • Vertrautheit mit HTML, CSS und JavaScript

Schritt 1: Einrichten eines Astro-Projekts

1.1 Astro installieren

Zuerst müssen Sie ein neues Astro-Projekt erstellen. Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus:


npm create astro@latest

Dadurch werden Sie aufgefordert, Ihrem Projekt einen Namen zu geben. Wählen Sie einen Namen für Ihr Projekt und fahren Sie mit der Einrichtung fort. Der Einfachheit halber können Sie die Standardeinstellungen verwenden.

1.2 Navigieren Sie zu Ihrem Projekt

Sobald das Projekt eingerichtet ist, navigieren Sie in Ihr Projektverzeichnis:


cd your-project-name

1.3 Führen Sie den Entwicklungsserver aus

Um den Entwicklungsserver zu starten, führen Sie den folgenden Befehl aus:


npm run dev

Ihr Astro-Projekt sollte jetzt unter http://localhost:3000 ausgeführt werden.

Schritt 2: Seiten erstellen

2.1 Erstellen einer Homepage

Astro verwendet ein dateibasiertes Routingsystem. Um eine Homepage zu erstellen, navigieren Sie zum Verzeichnis src/pages/ und erstellen Sie eine Datei namens index.astro.


src/pages/index.astro

Fügen Sie in index.astro den folgenden Code hinzu:


---
title = "Home"
---

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
  </head>
  <body>
    <h1>Welcome to My Astro Site</h1>
    <p>This is the homepage created using Astro.</p>
  </body>
</html>

Astro verwendet die Frontmatter-Syntax (den ----Block oben), um Variablen zu deklarieren, die in der Datei verwendet werden können.

2.2 Erstellen einer About-Seite

Erstellen Sie auf ähnliche Weise eine about.astro-Datei im Verzeichnis src/pages/ für eine About-Seite.


src/pages/about.astro

Fügen Sie den folgenden Code hinzu:


---
title = "About"
---

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
  </head>
  <body>
    <h1>About Us</h1>
    <p>This is the About page of our Astro project.</p>
  </body>
</html>

Besuchen Sie http://localhost:3000/about, um die neue Seite zu sehen.

Schritt 3: Layouts hinzufügen

Um Wiederholungen zu vermeiden, unterstützt Astro Layouts. Lassen Sie uns ein grundlegendes Layout für unsere Website erstellen.

3.1 Erstellen eines Layouts

Erstellen Sie ein src/layouts/-Verzeichnis und eine neue Datei mit dem Namen MainLayout.astro.


src/layouts/MainLayout.astro

Fügen Sie den folgenden Code für das Layout hinzu:


---
title = "My Astro Site"
---

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
  </head>
  <body>
    <header>
      <h1>Welcome to {title}</h1>
      <nav>
        <a href="/">Home</a> | 
        <a href="/about">About</a>
      </nav>
    </header>
    <main>
      <slot />
    </main>
    <footer>
      <p>&copy; 2024 My Astro Site</p>
    </footer>
  </body>
</html>

3.2 Verwenden des Layouts in Seiten

Jetzt aktualisieren wir die Dateien index.astro und about.astro, um dieses Layout zu verwenden.

Ersetzen Sie für index.astro den Code durch:


---
import MainLayout from '../layouts/MainLayout.astro';
title = "Home"
---

<MainLayout>
  <h2>Welcome to My Astro Site</h2>
  <p>This is the homepage created using Astro.</p>
</MainLayout>

Ähnlich ersetzen Sie für about.astro den Code durch:


---
import MainLayout from '../layouts/MainLayout.astro';
title = "About"
---

<MainLayout>
  <h2>About Us</h2>
  <p>This is the About page of our Astro project.</p>
</MainLayout>

Jetzt haben beide Seiten ein gemeinsames Layout, um die Konsistenz auf der gesamten Website zu gewährleisten.

Schritt 4: Hinzufügen eines Kontaktformulars mit Fabform.io

Fabform.io ist ein einfacher Dienst, mit dem Sie Formulare zu Ihrer Website hinzufügen können, ohne dass ein Back-End erforderlich ist. Sie müssen nur ihren Formularendpunkt integrieren, und Fabform erledigt den Rest.

4.1 Erstellen Sie eine Kontaktseite

Erstellen Sie eine neue Datei contact.astro im Verzeichnis src/pages/.


src/pages/contact.astro

Fügen Sie den folgenden Code für ein einfaches Kontaktformular hinzu:


---
import MainLayout from '../layouts/MainLayout.astro';
title = "Contact"
---

<MainLayout>
  <h2>Contact Us</h2>
  <form action="https://fabform.io/f/your-form-endpoint" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required />

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required />

    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>

    <button type="submit">Send</button>
  </form>
</MainLayout>

4.2 Fabform-Endpunkt anpassen

  • Gehen Sie zu Fabform.io und eröffnen Sie ein Konto.
  • Erstellen Sie ein neues Formular und kopieren Sie die bereitgestellte Formularendpunkt-URL.
  • Ersetzen Sie https://fabform.io/f/your-form-endpoint in der Formularaktion durch Ihre eindeutige Formular-URL.

Wenn Benutzer jetzt das Formular einreichen, übernimmt Fabform die Übermittlung und sendet Ihnen die Ergebnisse per E-Mail oder über einen von Ihnen konfigurierten Dienst.

Schritt 5: Letzter Feinschliff

Sie haben jetzt mit Astro eine einfache, schnelle Website mit mehreren Seiten, einem gemeinsamen Layout und einem Kontaktformular, das von Fabform.io bereitgestellt wird.

Ordnerstruktur: 


├── src
│   ├── layouts
│   │   └── MainLayout.astro
│   ├── pages
│   │   ├── about.astro
│   │   ├── contact.astro
│   │   └── index.astro
└── package.json

Führen Sie npm run dev aus, um noch einmal eine Vorschau Ihrer Website anzuzeigen und sicherzustellen, dass alles wie erwartet funktioniert.

Abschluss

Astro macht es unglaublich einfach, statische Websites mit minimalem JavaScript und hoher Leistung zu erstellen. Durch die Nutzung seiner Funktionen wie Layouts und komponentenbasierter Architektur können wir unseren Code sauber und wiederverwendbar halten. Durch das Hinzufügen eines Kontaktformulars mit Fabform.io stellen Sie sicher, dass Sie problemlos Benutzerfeedback sammeln können, ohne sich Gedanken über den Aufbau eines Back-Ends machen zu müssen.

Erweitern Sie dieses Projekt gerne durch die Integration zusätzlicher Komponenten oder Frameworks wie React oder Svelte, um die vollen Möglichkeiten von Astro auszuschöpfen!

Das obige ist der detaillierte Inhalt vonAstrobuild-Tutorial mit Kontaktformular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css less html npm Static for Directory using copy JS default this vscode http https everything prompt SEO
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：VeranstaltungsplanerNächster Artikel：Veranstaltungsplaner

In Verbindung stehende Artikel

Mehr sehen