Tutorial Astrobuild dengan Borang Hubungan-tutorial js-php.cn

Astrobuild tutorial with Contact Form

Tutorial AstroBuild dengan Borang Hubungan Menggunakan Fabform

Apa itu Astro?

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:

Menyediakan projek Astro
Membuat halaman dan reka letak
Menambah komponen
Menyepadukan borang hubungan menggunakan Fabform.io

Prasyarat

Sebelum bermula, pastikan anda telah memasang yang berikut:

Node.js (v16 atau lebih baru)
Penyunting kod (seperti VSCode)
Kebiasaan dengan HTML, CSS dan JavaScript

Langkah 1: Sediakan Projek Astro

1.1 Pasang Astro

Pertama, anda perlu mencipta projek Astro baharu. Buka terminal anda dan jalankan arahan berikut:


npm create astro@latest

Salin selepas log masuk

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.

1.2 Navigasi ke Projek Anda

Setelah projek telah disediakan, navigasi ke dalam direktori projek anda:


cd your-project-name

Salin selepas log masuk

1.3 Jalankan Pelayan Pembangunan

Untuk memulakan pelayan pembangunan, jalankan arahan berikut:


npm run dev

Salin selepas log masuk

Projek Astro anda kini sepatutnya berjalan di http://localhost:3000.

Langkah 2: Membuat Halaman

2.1 Membuat Laman Utama

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

Salin selepas log masuk

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>

Salin selepas log masuk

Astro menggunakan sintaks frontmatter (blok --- di bahagian atas) untuk mengisytiharkan pembolehubah yang boleh digunakan dalam fail.

2.2 Mencipta Halaman Perihal

Begitu juga, buat fail about.astro dalam direktori src/pages/ untuk halaman Perihal.


src/pages/about.astro

Salin selepas log masuk

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>

Salin selepas log masuk

Lawati http://localhost:3000/about untuk melihat halaman baharu.

Langkah 3: Menambah Reka Letak

Untuk mengelakkan pengulangan, Astro menyokong reka letak. Mari buat reka letak asas untuk tapak kami.

3.1 Membuat Reka Letak

Buat direktori src/layouts/ dan fail baharu yang dipanggil MainLayout.astro.


src/layouts/MainLayout.astro

Salin selepas log masuk

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>&copy; 2024 My Astro Site</p>
    </footer>
  </body>
</html>

Salin selepas log masuk

3.2 Menggunakan Reka Letak dalam Halaman

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>

Salin selepas log masuk

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>

Salin selepas log masuk

Kini, kedua-dua halaman berkongsi reka letak yang sama untuk konsistensi di seluruh tapak.

Langkah 4: Menambah Borang Hubungan Menggunakan Fabform.io

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.

4.1 Buat Halaman Kenalan

Buat kenalan fail baharu.astro di dalam direktori src/pages/.


src/pages/contact.astro

Salin selepas log masuk

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>

Salin selepas log masuk

4.2 Sesuaikan Titik Akhir Fabform

Pergi ke Fabform.io dan daftar untuk akaun.
Buat borang baharu dan salin URL titik akhir borang yang mereka sediakan.
Ganti https://fabform.io/f/your-form-endpoint dalam tindakan borang dengan URL borang unik anda.

Kini, apabila pengguna menyerahkan borang, Fabform akan mengendalikan penyerahan dan menghantar keputusan kepada anda melalui e-mel atau perkhidmatan yang anda konfigurasikan.

Langkah 5: Sentuhan Akhir

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.

Struktur Folder:


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

Salin selepas log masuk

Jalankan npm run dev untuk pratonton tapak anda sekali lagi dan pastikan semuanya berfungsi seperti yang diharapkan.

Kesimpulan

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!