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:
Bevor Sie beginnen, stellen Sie sicher, dass Folgendes installiert ist:
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.
Sobald das Projekt eingerichtet ist, navigieren Sie in Ihr Projektverzeichnis:
cd your-project-name
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.
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.
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.
Um Wiederholungen zu vermeiden, unterstützt Astro Layouts. Lassen Sie uns ein grundlegendes Layout für unsere Website erstellen.
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>© 2024 My Astro Site</p>
</footer>
</body>
</html>
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.
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.
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>
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.
Sie haben jetzt mit Astro eine einfache, schnelle Website mit mehreren Seiten, einem gemeinsamen Layout und einem Kontaktformular, das von Fabform.io bereitgestellt wird.
├── 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.
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!
