cari

Rumah >hujung hadapan web >tutorial js >Tutorial Astrobuild dengan Borang Hubungan

Tutorial Astrobuild dengan Borang Hubungan

Patricia Arquette
Patricia Arquetteasal
2024-10-04 22:23:30327semak imbas

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:

  1. Menyediakan projek Astro
  2. Membuat halaman dan reka letak
  3. Menambah komponen
  4. 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

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

1.3 Jalankan Pelayan Pembangunan

Untuk memulakan pelayan pembangunan, jalankan arahan berikut:


npm run dev

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

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.

2.2 Mencipta Halaman Perihal

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.

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

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>

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>

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.

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

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>

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

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!

JavaScript css less html npm Static for Directory using copy JS default this vscode http https everything prompt SEO
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Perancang AcaraArtikel seterusnya：Perancang Acara

Artikel berkaitan

Lihat lagi