Astro ialah penjana tapak statik moden (SSG) yang dibina untuk kelajuan dan dioptimumkan untuk mencipta tapak web mesra SEO yang pantas. Ia menyokong pelbagai rangka kerja bahagian hadapan, menjadikannya mudah untuk menyepadukan teknologi seperti React, Vue, Svelte, atau JavaScript vanila dalam projek anda. Astro menghantar lebih sedikit JavaScript, bermakna masa pemuatan lebih cepat dan prestasi yang lebih baik secara keseluruhan.
Dalam tutorial ini, kami akan merangkumi langkah-langkah berikut:
Sebelum bermula, pastikan anda telah memasang yang berikut:
Pertama, anda perlu mencipta projek Astro baharu. Buka terminal anda dan jalankan arahan berikut:
npm create astro@latest
Ini akan menggesa anda untuk memberikan nama projek anda. Pilih nama untuk projek anda dan teruskan dengan persediaan. Anda boleh menggunakan tetapan lalai untuk kesederhanaan.
Setelah projek telah disediakan, navigasi ke dalam direktori projek anda:
cd your-project-name
Untuk memulakan pelayan pembangunan, jalankan arahan berikut:
npm run dev
Projek Astro anda kini sepatutnya berjalan di http://localhost:3000.
Astro menggunakan sistem penghalaan berasaskan fail. Untuk membuat halaman utama, navigasi ke direktori src/pages/ dan buat fail bernama index.astro.
src/pages/index.astro
Dalam index.astro, tambahkan kod berikut:
---
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 menggunakan sintaks frontmatter (blok --- di bahagian atas) untuk mengisytiharkan pembolehubah yang boleh digunakan dalam fail.
Begitu juga, buat fail about.astro dalam direktori src/pages/ untuk halaman Perihal.
src/pages/about.astro
Tambah kod berikut:
---
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>
Lawati http://localhost:3000/about untuk melihat halaman baharu.
Untuk mengelakkan pengulangan, Astro menyokong reka letak. Mari buat reka letak asas untuk tapak kami.
Buat direktori src/layouts/ dan fail baharu yang dipanggil MainLayout.astro.
src/layouts/MainLayout.astro
Tambah kod berikut untuk reka letak:
---
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>
Sekarang, mari kemas kini fail index.astro dan about.astro untuk menggunakan reka letak ini.
Untuk index.astro, gantikan kod dengan:
--- 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>
Begitu juga, untuk about.astro, gantikan kod dengan:
--- 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>
Kini, kedua-dua halaman berkongsi reka letak yang sama untuk konsistensi di seluruh tapak.
Fabform.io ialah perkhidmatan ringkas yang membolehkan anda menambahkan borang pada tapak web anda tanpa memerlukan back-end. Anda hanya perlu menyepadukan titik akhir borang mereka dan Fabform mengendalikan yang lain.
Buat kenalan fail baharu.astro di dalam direktori src/pages/.
src/pages/contact.astro
Tambahkan kod berikut untuk borang hubungan asas:
---
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>
Kini, apabila pengguna menyerahkan borang, Fabform akan mengendalikan penyerahan dan menghantar keputusan kepada anda melalui e-mel atau perkhidmatan yang anda konfigurasikan.
Anda kini mempunyai tapak web yang ringkas dan pantas dengan Astro, lengkap dengan berbilang halaman, reka letak yang dikongsi dan borang hubungan yang dikuasakan oleh Fabform.io.
├── src │ ├── layouts │ │ └── MainLayout.astro │ ├── pages │ │ ├── about.astro │ │ ├── contact.astro │ │ └── index.astro └── package.json
Jalankan npm run dev untuk pratonton tapak anda sekali lagi dan pastikan semuanya berfungsi seperti yang diharapkan.
Astro menjadikannya sangat mudah untuk membina tapak web statik dengan JavaScript minimum dan prestasi tinggi. Dengan menggunakan cirinya seperti reka letak dan seni bina berasaskan komponen, kami boleh memastikan kod kami bersih dan boleh digunakan semula. Menambah borang hubungan menggunakan Fabform.io memastikan anda boleh mengumpulkan maklum balas pengguna dengan mudah tanpa perlu risau tentang membina bahagian belakang.
Jangan ragu untuk mengembangkan projek ini dengan menyepadukan komponen atau rangka kerja tambahan, seperti React atau Svelte, untuk menerokai keupayaan penuh Astro!
Atas ialah kandungan terperinci Tutorial Astrobuild dengan Borang Hubungan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
